Madison Café

Problem

Individuals with hectic schedules often face difficulty in managing time for meal preparations.

Solution

Designing an app that's both user-friendly and engaging, making it effortless for users to order meals at any time of the day, whether it's pickup or delivery.

Type

My first independent project during Google UX design course

My Role

UX research
UI design

Timeline

February 2022 - June 2022

Tools

Figma

Understanding the user

User Research, Persona, User Journey map

User Research Summary

To understand my target audience better, I conducted surveys. I learned that my leading user group is young working adults, followed closely by students.

Initially, I thought their top priorities were reliable wait times, affordable pricing, and convenient food delivery. While these factors are important, I was surprised to find that many users were frustrated with outdated and confusing app interfaces.

User Persona

With the discovered research insights, I had to uncover users' goals, needs, and behaviors through a user-centric approach. During the design process, I crafted a user persona based on survey findings, which became my guide, ensuring every design decision resonated with user needs and expectations.

Some key highlights include:

Sasha values efficiency, affordability, and reliability in food delivery services.
Her main frustrations include misleading delivery times, hidden fees, and poor issue resolution.

User Journey Map

A closer look at the user's journey gave some unique perspectives into how Sasha might interact with the Madison Café app. By mapping her journey, I identified pain points and opportunities to enhance the ordering process for a seamless and user-friendly experience.

Key Takeaways & Design Opportunities:

Simplify Decision-Making:
- Add recommendations and organized categories.
Improve Order Clarity:
- Use high-quality images and better descriptions.
Enhance Order Tracking:
- Provide real-time tracking and communication options.
Ensure a Smooth Post-Order Experience:
- Offer easy feedback and issue resolution.

Starting the design

Digital Wireframes, Low-fidelity Prototype, Usability Study

Digital wireframes

After wrapping up the Crazy 8 exercise, there were a bunch of ideas and I had a hard time picking which route to explore further. Eventually, after a couple of rounds of sketching out some layouts, I moved on to bringing those ideas to life with wireframes.

To gain a clearer understanding of the app's structure, I created simple diagrams in Figma using basic lines and shapes. The following wireframes are specifically designed to illustrate the checkout process from beginning to end.

Lo-fi Wireframes & prototype

I enhanced my initial wireframes by incorporating relevant text elements to further visualize the checkout process.

During the entire process, I aimed to ensure that the app's navigation was user-friendly and uncomplicated, as research findings suggest many users prefer a swift process.

Click prototype and press F for full screen

Usability Study

When designing, it's common to overlook details even after examining something multiple times. Through rounds of usability testing, I identified key insights that improved the user experience for Madison Café’s mobile app.

Key Insights:

Users found the menu overwhelming, prompting the need for clearer categorization and filtering.
Some struggled with the checkout process, requiring a more intuitive flow.
Real-time order tracking increased user confidence and reduced frustration.

Refining the design

Mockups, High-fidelity prototype, Styleguide

Final design

After addressing some usability concerns, I designed the screens in Figma. The high-fidelity prototype focuses on providing a smooth and enjoyable experience, making it easy for customers to order their meals.

It took some time to determine the best layout for the screens and decide what to include while keeping the users' needs in mind. I continuously referred back to the user persona throughout the process to ensure my designs were truly aligned with user expectations.ly user-centered.