Four Seasons, Takeaway — Responsive Web
Treat yourself to luxury takeaway.
Four Seasons, Takeaway — Responsive Web
Treat yourself to luxury takeaway.
Four Seasons, Takeaway — Responsive Web
Treat yourself to luxury takeaway.
Overview.
As Four Seasons properties expand their takeaway offerings, we were tasked with redesigning the outdated microsite. The goal was to create a more engaging and intuitive experience for guests to browse and order, while aligning with the new design system from the parent site to ensure consistency across digital touchpoints. Building on the vision set by our lead designer, I led the end-to-end design process from research to handoff.
Looking to test it out?
🚀 Impact
Modernized UX/UI, Design system alignment
🤝 Design Team
Tiffany Chau (project owner), Ashley Kim (vision/support)
🧠 Roles
Research, UI/UX Design, Prototyping, Handoff, QA
⏱️ Shipped
Q4 2024
Overview.
As Four Seasons properties expand their takeaway offerings, we were tasked with redesigning the outdated microsite. The goal was to create a more engaging and intuitive experience for guests to browse and order, while aligning with the new design system from the parent site to ensure consistency across digital touchpoints. Building on the vision set by our lead designer, I led the end-to-end design process from research to handoff.
Looking to test it out?
🚀 Impact
Modernized UX/UI, Design system alignment
🤝 Design Team
Tiffany Chau (project owner), Ashley Kim (vision/support)
🧠 Roles
Research, UI/UX Design, Prototyping, Handoff, QA
⏱️ Shipped
Q4 2024
Overview.
As Four Seasons properties expand their takeaway offerings, we were tasked with redesigning the outdated microsite. The goal was to create a more engaging and intuitive experience for guests to browse and order, while aligning with the new design system from the parent site to ensure consistency across digital touchpoints. Building on the vision set by our lead designer, I led the end-to-end design process from research to handoff.
Looking to test it out?
🚀 Impact
Modernized UX/UI, Design system alignment
🤝 Design Team
Tiffany Chau (project owner), Ashley Kim (vision/support)
🧠 Roles
Research, UI/UX Design, Prototyping, Handoff, QA
⏱️ Shipped
Q4 2024
How might we increase engagement for ordering takeaway?
Design Process & Backstory • 2 min read
How might we increase engagement for ordering takeaway?
Design Process & Backstory • 2 min read
How might we increase engagement for ordering takeaway?
Design Process & Backstory • 2 min read
RESEARCH / APPROACH
The art of a visually stunning and delightful experience.
What does the ideal luxury takeaway site look like? To find out, I analyzed competitor sites and identified three key ingredients: easy browsing for a wide range of products, clear information hierarchy, and exposing customizable items. This helped to shape our design strategy for maximum impact.
RESEARCH / APPROACH
The art of a visually stunning and delightful experience.
What does the ideal luxury takeaway site look like? To find out, I analyzed competitor sites and identified three key ingredients: easy browsing for a wide range of products, clear information hierarchy, and exposing customizable items. This helped to shape our design strategy for maximum impact.
RESEARCH / APPROACH
The art of a visually stunning and delightful experience.
What does the ideal luxury takeaway site look like? To find out, I analyzed competitor sites and identified three key ingredients: easy browsing for a wide range of products, clear information hierarchy, and exposing customizable items. This helped to shape our design strategy for maximum impact.
DIVERGE
Explore all the possibilities and be fearless with it.
The product detail page was our wildcard. How do we handle products which have 1 image versus 20? Or a multi-layer cake where every layer has customizable flavors? By exploring layouts for all the different use cases, I was able to better understand how I could build a design system that would give us the most amount of flexibility.
DIVERGE
Explore all the possibilities and be fearless with it.
The product detail page was our wildcard. How do we handle products which have 1 image versus 20? Or a multi-layer cake where every layer has customizable flavors? By exploring layouts for all the different use cases, I was able to better understand how I could build a design system that would give us the most amount of flexibility.
DIVERGE
Explore all the possibilities and be fearless with it.
The product detail page was our wildcard. How do we handle products which have 1 image versus 20? Or a multi-layer cake where every layer has customizable flavors? By exploring layouts for all the different use cases, I was able to better understand how I could build a design system that would give us the most amount of flexibility.
CONVERGE
Even thumbnails deserve a little special treatment.
Thumbnails were our next pain point: they weren’t visible when the page loaded, and they were so large that browsing them often hid the main product image. Initially I explored different placements and behaviours, however, some layouts lacked clarity while others felt clunky.
A few team reviews later, I realized the problem was that I was trying to pick between one treatment over another. What we really needed was a combination: thumbnails to the left on desktop but bottom on mobile, and being able scroll or click when browsing images. This approach was what gave us the best of both worlds.
CONVERGE
Even thumbnails deserve a little special treatment.
Thumbnails were our next pain point: they weren’t visible when the page loaded, and they were so large that browsing them often hid the main product image. Initially I explored different placements and behaviours, however, some layouts lacked clarity while others felt clunky.
A few team reviews later, I realized the problem was that I was trying to pick between one treatment over another. What we really needed was a combination: thumbnails to the left on desktop but bottom on mobile, and being able scroll or click when browsing images. This approach was what gave us the best of both worlds.
CONVERGE
Even thumbnails deserve a little special treatment.
Thumbnails were our next pain point: they weren’t visible when the page loaded, and they were so large that browsing them often hid the main product image. Initially I explored different placements and behaviours, however, some layouts lacked clarity while others felt clunky.
A few team reviews later, I realized the problem was that I was trying to pick between one treatment over another. What we really needed was a combination: thumbnails to the left on desktop but bottom on mobile, and being able scroll or click when browsing images. This approach was what gave us the best of both worlds.
CONSTRAINTS / TRADEOFFS
Currently experiencing technical difficulties—please hold.
The final challenge was working within Shopify’s limitations, as it meant less control over what we’re able to redesign. At first our dev team said we couldn’t modify the order pickup section, however, I took it back and asked: what if we update just the typography?
It wasn’t flashy, but it would make a difference in keeping our style consistent. Turns out this was totally feasible, and reinforces the idea that constraints don’t have to be roadblocks. By shifting the focus from limitations to possibilities, we were able to uncover unexpected opportunities for improvement.
CONSTRAINTS / TRADEOFFS
Currently experiencing technical difficulties—please hold.
The final challenge was working within Shopify’s limitations, as it meant less control over what we’re able to redesign. At first our dev team said we couldn’t modify the order pickup section, however, I took it back and asked: what if we update just the typography?
It wasn’t flashy, but it would make a difference in keeping our style consistent. Turns out this was totally feasible, and reinforces the idea that constraints don’t have to be roadblocks. By shifting the focus from limitations to possibilities, we were able to uncover unexpected opportunities for improvement.
CONSTRAINTS / TRADEOFFS
Currently experiencing technical difficulties—please hold.
The final challenge was working within Shopify’s limitations, as it meant less control over what we’re able to redesign. At first our dev team said we couldn’t modify the order pickup section, however, I took it back and asked: what if we update just the typography?
It wasn’t flashy, but it would make a difference in keeping our style consistent. Turns out this was totally feasible, and reinforces the idea that constraints don’t have to be roadblocks. By shifting the focus from limitations to possibilities, we were able to uncover unexpected opportunities for improvement.
RESULTS / IMPACT
Where we landed.
Previously the takeaway site felt outdated and difficult to navigate, but after the redesign, the experience is seamless, scalable, and engaging. We ended with happy stakeholders and a bunch of new components for our design system—setting the foundation for future projects.
Beyond the visuals, this project gave me the opportunity to sharpen my ability in leading creative direction, navigate constraints, and drive strategic decisions. If you’re curious to learn more about my work, let’s connect!
RESULTS / IMPACT
Where we landed.
Previously the takeaway site felt outdated and difficult to navigate, but after the redesign, the experience is seamless, scalable, and engaging. We ended with happy stakeholders and a bunch of new components for our design system—setting the foundation for future projects.
Beyond the visuals, this project gave me the opportunity to sharpen my ability in leading creative direction, navigate constraints, and drive strategic decisions. If you’re curious to learn more about my work, let’s connect!
RESULTS / IMPACT
Where we landed.
Previously the takeaway site felt outdated and difficult to navigate, but after the redesign, the experience is seamless, scalable, and engaging. We ended with happy stakeholders and a bunch of new components for our design system—setting the foundation for future projects.
Beyond the visuals, this project gave me the opportunity to sharpen my ability in leading creative direction, navigate constraints, and drive strategic decisions. If you’re curious to learn more about my work, let’s connect!
REFLECTION
Thinking outside the box.
A senior designer once shared a piece of advice that always stuck with me: start with at least two versions of a design—one which meets all the requirements, and another which showcases our vision of what the best in-class design would be. This approach was super helpful in this project, and has allowed me to consistently push creative boundaries as well as drive innovation within my work.
REFLECTION
Thinking outside the box.
A senior designer once shared a piece of advice that always stuck with me: start with at least two versions of a design—one which meets all the requirements, and another which showcases our vision of what the best in-class design would be. This approach was super helpful in this project, and has allowed me to consistently push creative boundaries as well as drive innovation within my work.
REFLECTION
Thinking outside the box.
A senior designer once shared a piece of advice that always stuck with me: start with at least two versions of a design—one which meets all the requirements, and another which showcases our vision of what the best in-class design would be. This approach was super helpful in this project, and has allowed me to consistently push creative boundaries as well as drive innovation within my work.