🗂️

Projects

🙋‍♂️

About

📬

Contact

📄

Resume

Side project

Side project

Cooking up Better UX for Private Chef Website:
Ummi’s Table

Cooking up Better UX for Private Chef Website:
Ummi’s Table

Cooking up Better UX for Private Chef Website:
Ummi’s Table

role

role

UI/UX Designer

UI/UX Designer

UI/UX Designer

type

type

Web

Web

Web

category

category

Food & Drink

Food & Drink

Food & Drink

Problem
Problem
Problem
Thewebsitewasdifficultforuserstonavigatebetweendifferentservices,andtheinterfacefeltunintuitive.Theownerwantedtorebranditandmakeitmoreappealingtoawiderrangeofcustomers.
Thewebsitewasdifficultforuserstonavigatebetweendifferentservices,andtheinterfacefeltunintuitive.Theownerwantedtorebranditandmakeitmoreappealingtoawiderrangeofcustomers.
Thewebsitewasdifficultforuserstonavigatebetweendifferentservices,andtheinterfacefeltunintuitive.Theownerwantedtorebranditandmakeitmoreappealingtoawiderrangeofcustomers.
Solution
Solution
Solution
-Rebuilttheinformationarchitecturetoimprovenavigationandclarity.
-Rebuilttheinformationarchitecturetoimprovenavigationandclarity.
-Rebuilttheinformationarchitecturetoimprovenavigationandclarity.
-Appliedabentoboxlayouttopresentinformationinamoreengagingandorganizedway.
-Appliedabentoboxlayouttopresentinformationinamoreengagingandorganizedway.
-Appliedabentoboxlayouttopresentinformationinamoreengagingandorganizedway.
-Enhancedinteractionandmotiondesignacrosspagestocreateamoredynamicuserexperience.
-Enhancedinteractionandmotiondesignacrosspagestocreateamoredynamicuserexperience.
-Enhancedinteractionandmotiondesignacrosspagestocreateamoredynamicuserexperience.
Result
Result
Result
Theredesignimprovedusabilitysignificantly,raisingtheSystemUsabilityScale(SUS)scorefrom54to86.
Theredesignimprovedusabilitysignificantly,raisingtheSystemUsabilityScale(SUS)scorefrom54to86.
Theredesignimprovedusabilitysignificantly,raisingtheSystemUsabilityScale(SUS)scorefrom54to86.

Scroll down to see more details

⬇️

⬇️

During this project,

During this project,

During this project,

I contributed as a Researcher, Designer, and Developer.

I contributed as a Researcher, Designer, and Developer.

I contributed as a Researcher, Designer, and Developer.

✍️🔎💻

✍️🔎💻

✍️🔎💻

I completed the redesign

I completed the redesign

I completed the redesign in 3 weeks

🏃

🏃

🏃

in 3 weeks

in 3 weeks

💡

💡

💡

My contributions included:

My contributions included:

My contributions included:

  • Refined the main purpose of the website

  • Designed the UI and interaction flow

  • Developed the design into a live website

  • Refined the main purpose of the website

  • Designed the UI and interaction flow

  • Developed the design into a live website

  • Refined the main purpose of the website

  • Designed the UI and interaction flow

  • Developed the design into a live website

Background

Problem

Design

Outcome

Background

Background

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.
Although I didn’t advance to the second round, I found the project interesting and decided to continue working on it.

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.
Although I didn’t advance to the second round, I found the project interesting and decided to continue working on it.

https://pse.is/843h6k

https://pse.is/843h6k

Problem & Goal

Problem & Goal

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 a few 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 a few 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.

Based on these problems, I listed out three main goals for the redesign.

Based on these problems, I listed out three main goals for the redesign.

  1. Improve the website navigation

  1. Improve the website navigation

  1. Enhance visual appeal

  1. Enhance visual appeal

  1. Enable easy management

  1. Enable easy management

Design Process

Design Process

I first restructured the Information Architecture to ensure the website was simple and easy to navigate.

I first restructured the Information Architecture to ensure the website was simple and easy to navigate.

Before

Before

Before

After

After

After

To highlight the chef’s services and make booking easier, I removed some items from the navigation bar to keep the website as simple as possible.

To highlight the chef’s services and make booking easier, I removed some items from the navigation bar to keep the website as simple as possible.

After confirming the site’s structure, I moved on to explore the visual style of the website.

After confirming the site’s structure, I moved on to explore the visual style of the website.

I reviewed various food website designs and decided on the “Bento Box” layout.

I reviewed various food website designs and decided on the “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.

With the IA and layout defined, I realized I needed to understand more about what users care about most.

With the IA and layout defined, I realized I needed to understand more about what users care about most.

I researched different forums to understand what people value most in private chef service websites. Three key priorities emerged consistently:

I researched different forums to understand what people value most in private chef service websites. Three key priorities emerged consistently:

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.

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.

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.

Trust & Professionalism

A private chef enters someone’s home, so safety and professionalism are crucial.

Knowing what to emphasize, I moved on to UI design, from sketches to mockups to development.

Knowing what to emphasize, I moved on to UI design, from sketches to mockups to development.

Sketch

snow covered mountain during daytime

Mockup

green trees on cliff

Development

A group of sand dunes in the desert

Sketch

snow covered mountain during daytime

Mockup

green trees on cliff

Development

A group of sand dunes in the desert

Sketch

snow covered mountain during daytime

Mockup

green trees on cliff

Development

A group of sand dunes in the desert

I completed the project with Figma and Framer, finishing with micro-interactions to create a more dynamic and engaging user experience.

I completed the project with Figma and Framer, finishing with micro-interactions to create a more dynamic and engaging user experience.

Outcome

Outcome

On the homepage, I simplified the navigation bar and redesigned the overall layout and visuals, giving users a fresh and appealing first impression.

On the homepage, I simplified the navigation bar and redesigned the overall layout and visuals, giving users a fresh and appealing first impression.

Drag the handle to check the difference

Drag the handle to check the difference

Instead of relying only on text to display the menu, I incorporated more photos, allowing users to get a quick glimpse of what Chef Monica offers.

Instead of relying only on text to display the menu, I incorporated more photos, allowing users to get a quick glimpse of what Chef Monica offers.

The entire website follows a Bento Box style, and I used different colors and cards to make the content more readable.

The entire website follows a Bento Box style, and I used different colors and cards to make the content more readable.

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.

Result
I used the System Usability Scale (SUS) to evaluate both the current website and the redesigned version, and the score increased from 54 to 86.
Many users also mentioned that the new version looked more appealing and encouraged them to explore more details about the private chef service.

Result
I used the System Usability Scale (SUS) to evaluate both the current website and the redesigned version, and the score increased from 54 to 86.
Many users also mentioned that the new version looked more appealing and encouraged them to explore more details about the private chef service.

Check out the website

Check out the website

🪄

🪄

🪄

https://ummitable.framer.website/

https://ummitable.framer.website/