Cooking up Better UX for Private Chef Website:
Cooking up Better UX for Private Chef Website:
Ummi’s Table Web Redesign
Ummi’s Table Web Redesign
People said the previous website
People said the previous website
Looks outdated & Feels confusing
Looks outdated & Feels confusing
What I Did:
What I Did:
User Interview
UI/UX Design
Interaction Design
Motion Design
Usability Testing
User Interview
UI/UX Design
Interaction Design
Motion Design
Usability Testing
Tools I used
Tools I used
Completed in
Completed in
2
2
Weeks
Weeks
User Engagement
User Engagement
98%
98%
Users said the new version looks much more appealing and makes them more eager to explore.
Users said the new version looks much more appealing and makes them more eager to explore.
System Usability Scale
System Usability Scale
86
86
Achieve a 60% improvement in usability. SUS increased from 54 to 86. Collected by over 8 participants.
Why I started this project
Why I started this project
Why I started this project
Ummi’s Table is a private chef website owned by Chef Monica Douglas. I first discovered the site through Pitch’D, a design-focused competition where one of the tasks was to redesign Ummi’s Table.
Ummi’s Table is a private chef website owned by Chef Monica Douglas. I first discovered the site through Pitch’D, a design-focused competition where one of the tasks was to redesign Ummi’s Table.
Understanding the needs
Understanding the needs
Understanding the needs
Before starting the design process, I like to make sure I understand the target users, their goals, and their pain points.
Before starting the design process, I like to make sure I understand the target users, their goals, and their pain points.
During the competition, Chef Monica shared some pain points she wanted the website to address. To better understand how people interact with the site, I conducted 5 user interviews to ask users for feedback.
During the competition, Chef Monica shared some pain points she wanted the website to address. To better understand how people interact with the site, I conducted 5 user interviews to ask users for feedback.
I want my website to be more eye-catching to attract customers.
I want my website to be more eye-catching to attract customers.
👩🍳
I hope the new design allows for easy updates and expansion as the business grows, making it simple to maintain and scale over time.
I hope the new design allows for easy updates and expansion as the business grows, making it simple to maintain and scale over time.
👩🍳
🗣️
The top navigation bar is confusing and it took me some time to find the info I wanted.
The top navigation bar is confusing and it took me some time to find the info I wanted.
🗣️
The photos aren’t enough for me to see what the food really looks like, and the layout makes the text hard to read.
The photos aren’t enough for me to see what the food really looks like, and the layout makes the text hard to read.
I first identified three types of users; each uses the website for a different purpose.
I first identified three types of users; each uses the website for a different purpose.
First Time Visitor
To see what kind of service and food the private chef can offer.
First Time Visitor
To see what kind of service and food the private chef can offer.
Old Customer
To book the service and see any new updates.
Old Customer
To book the service and see any new updates.
Chef Monica
To attract more customers and promote upcoming events.
Chef Monica
To attract more customers and promote upcoming events.
Based on all the data and user interviews, I listed three main goals for the redesign.
Based on all the data and user interviews, I listed three main goals for the redesign.
Improve the navigation
Enhance visual appeal
Enable easy management
Improve the navigation
Enhance visual appeal
Enable easy management
Improve the navigation
Enhance visual appeal
Enable easy management
From sketch to development
From sketch to development
From sketch to development
I completed the project using Figma and Framer, moving from sketches to mockups to development, and turned the idea into a functional website.
I completed the project using Figma and Framer, moving from sketches to mockups to development, and turned the idea into a functional website.
Sketch
Mockup
Development
I restructured the information architecture. I eliminate unnecessary pages and keep only the important ones to make the website simpler and easier to navigate.
I restructured the information architecture. I eliminate unnecessary pages and keep only the important ones to make the website simpler and easier to navigate.
For the visual style, I explored various food website designs and chose a “Bento Box” layout.
For the visual style, I explored various food website designs and chose a “Bento Box” layout.
Bento Box layout offers a modern aesthetic, is highly flexible for different types of content, and allows me to present the website with a clear hierarchy while keeping it engaging.
Bento Box layout offers a modern aesthetic, is highly flexible for different types of content, and allows me to present the website with a clear hierarchy while keeping it engaging.
How I faced the challenge
How I faced the challenge
How I faced the challenge
While working on the website content, I realized I didn’t understand the users well enough. I wasn’t sure what they wanted to see or how to attract their attention.
While working on the website content, I realized I didn’t understand the users well enough. I wasn’t sure what they wanted to see or how to attract their attention.
I paused my work and returned to secondary research, studying various forums to better understand what people value most in private chef service websites and distilling those insights into three key points.
I paused my work and returned to secondary research, studying various forums to better understand what people value most in private chef service websites and distilling those insights into three key points.
Personalization & Dietary fit
Guests often have dietary needs (vegan, gluten-free, etc) and want to know they’ll be taken care of.
Personalization & Dietary fit
Guests often have dietary needs (vegan, gluten-free, etc) and want to know they’ll be taken care of.
Quality & Creativity of Food
People are paying restaurant-level prices; they expect a premium, creative experience.
Quality & Creativity of Food
People are paying restaurant-level prices; they expect a premium, creative experience.
Trust & Professionalism
A private chef enters someone’s home, so safety and professionalism are crucial.
Trust & Professionalism
A private chef enters someone’s home, so safety and professionalism are crucial.
The research helped me make better design decisions that stick to real users' needs.
The research helped me make better design decisions that stick to real users' needs.
I highlighted the variety in the chef's offerings to show that different dietary needs can be met.
I highlighted the variety in the chef's offerings to show that different dietary needs can be met.
I used attractive, high-quality imagery to convey the premium experience offered by Ummi’s Table.
I used attractive, high-quality imagery to convey the premium experience offered by Ummi’s Table.
I refined the "About Chef" page to showcase her strong reputation and build trust with potential clients.
I refined the "About Chef" page to showcase her strong reputation and build trust with potential clients.
The redesign outcome
The redesign outcome
The redesign outcome
Better navigation and appealing visual
Better navigation and appealing visual
Better navigation and appealing visual
More photos to showcase Chef Monica’s offerings
More photos to showcase Chef Monica’s offerings
More photos to showcase Chef Monica’s offerings
Professional, trustworthy chef introduction
Professional, trustworthy chef introduction
Professional, trustworthy chef introduction
Easy to read FAQs
Easy to read FAQs
Easy to read FAQs
Small interaction design brings the website to life and sparks customers’ interest in exploring more about Ummi’s Table.
Small interaction design brings the website to life and sparks customers’ interest in exploring more about Ummi’s Table.
After the redesign, I tested it with over 20 users and evaluated both the original site and my redesign.
After the redesign, I tested it with over 20 users and evaluated both the original site and my redesign.
System Usability Scale
System Usability Scale
Improve 60%
Improve 60%
Improve 60%
From 54 to 86
User Engagement
98%
98%
98%
19 out of 20 users
Users found the redesign more appealing and engaging, encouraging further exploration of the private chef service.
Users found the redesign more appealing and engaging, encouraging further exploration of the private chef service.
It ain't done yet
It ain't done yet
It ain't done yet
One key pain point I haven’t solved yet is enabling easy management. Beyond design, maintenance is also crucial for the business.
I’m currently working on connecting all content to a CMS so Chef Monica can easily update everything herself.
I’m currently working on connecting all content to a CMS so Chef Monica can easily update everything herself.
Reflection and what I've learned
Reflection and what I've learned
Reflection and what I've learned
Even if the users are general audiences, I need to spend time understanding user preferences, real problems, and use cases, designer's own assumptions can lead to bias and miss user needs.
Even if the users are general audiences, I need to spend time understanding user preferences, real problems, and use cases, designer's own assumptions can lead to bias and miss user needs.
It’s fun to play with micro-interactions, but I should also consider whether they truly help users or just feel cool to me.
It’s fun to play with micro-interactions, but I should also consider whether they truly help users or just feel cool to me.
What I can do better for this project is create a whole design system so it can be used across all Ummi’s Table materials, like newsletters, advertisements, and more.
What I can do better for this project is create a whole design system so it can be used across all Ummi’s Table materials, like newsletters, advertisements, and more.
More Projects
More Projects
More Projects
HoverSpeed
HoverSpeed
I built a Chrome extension to solve a common issue I face on YouTube, making it easy to adjust playback speed.
I built a Chrome extension to solve a common issue I face on YouTube, making it easy to adjust playback speed.
Dishionary
Dishionary
I created a mobile app that helps travelers understand foreign menus when literal translations of dish names are unclear.
I created a mobile app that helps travelers understand foreign menus when literal translations of dish names are unclear.
Let's connect 👋
chluan@iu.edu
CHIA LE LUAN
Let's connect 👋
chluan@iu.edu
CHIA LE LUAN