From User Research to Prototyping a Menu & Ordering App

Overview

Zazie is a complete full-scale academic project I did for the Google UX Design Certificate, covering everything from user research to UI design. Zazie is a popular French restaurant in San Francisco known for dine-in, delivery, and pick-up services. I also made it harder and added Zazie's locations in other states. Due to increasing demand, Zazie needs a tailored online ordering system addressing individual diet needs and customer schedules and offering engaging rewards.

User’s Problem

Users want to see a personalized and efficient food ordering system for Zazie restaurant. Current methods, via phone call or a third-party platform, failed to provide a custom, seamless experience that respected the user's dietary needs, preferences, and tight schedule.

Challenges

• Designing a user-friendly interface to accommodate diverse users.
• Keeping the UI simple and straightforward, focusing on showcasing the products.
• Streamlining the checking process for ease and logic.
• Adding customization options for people's diet so they get recommended meals that fit their preferences.
• Building an emotional branding design system that reflects a French mood and aligns with Zazie's strategy.
• Implementing a rewarding and engaging loyalty system.

Solution

Designing a user-friendly Zazie app focusing on the specific areas: personalized meal customization, streamlined ordering, scheduling, enriched UX, and loyalty rewards system.

Approach

Upon receiving the assignment, I realized its complexity. Therefore, I broke it down into manageable sub-problems to define the research objectives.

Research goals

Some of the questions I hoped to answer:

Kickoff

I conducted primary research, using interviews to gain insights relevant to our research goals. My approach included asking precise, actionable questions without making assumptions, allowing for clear, unbiased answers. The inquiry combined both quantitative and qualitative methods.

Participants characteristics

I aimed for a 'curb-cut effect' in the app design, creating features beneficial for people with disabilities while also improving usability for all. My target demographic ranged from 25 to 65 years old, with varying socio-economic and professional backgrounds, ordering food at least weekly. The research pool included users of varying tech proficiency, special dietary needs (vegetarians, vegans, individuals with food allergies, users with GERD), and individuals with disabilities.

Sneak peak to questions and answers

The information from research interviews was extremely helpful. I organized the data into groups based on tasks using a type of chart called an affinity diagram. From there, I grouped them by their main goals, identifying ways to increase efficiency, refine processes, and improve depth and familiarity.

Foundational User Research Insights

I made a mistake during the interview that led to uncertainty in people's responses. The problem was the complexity of my questions where I referred to terminology. The results broadened my perspective, highlighting issues that stemmed not only from limited time for cooking and usability problems but also from inclusivity and versatility, such as accessibility for people with disabilities and catering for special dietary needs. 

More information about all UX researches from the Zazie app project.

Competitive Audit

Before diving into the design process, I conducted an overview of both direct and indirect competitors' strengths and weaknesses. I visited each competitor's website and app, took notes about their aspects, and organized everything in a spreadsheet, including details like what works well, what could be improved, and whether my competitor's aspects meet the needs of my specific audience. Here is the link to the competitive audit table. I summarized my findings and insights in a report. Here is the link to the full report.

I identified some opportunities for the Zazie project after a compelling audit:

1. Provide a quick and easy way to reorder past orders.
2. Provide rewards or perks for returning users.
3. Provide customization.
4. Provide allergy and nutrient information.
5. Provide accessibility features.

Our users: Personas

Before I started designing, I dived deep into the existing behavioral data of our users to understand them better. I focused on identifying the job our customers hire our product for. I defined two user archetypes and mapped them to their respective jobs to be done.

Emilie’s jobs-to-be-done: “As a busy marketing specialist who values health-conscious dining choices and convenient user experiences, I want to delegate cooking chores, quickly explore, customize menu options, and efficiently order meals for delivery so that makes my life easier and give me more free time for work or dates with my partner.”

Victor’s jobs-to-be-done: “As a small business owner with dyslexia and father of twins, I want to efficiently find and order meals for my family from nearby restaurants, ensuring kid-friendly options and accurate dietary information, so that I can balance my responsibilities, simplify dining experience, unite us as a family and focus on creating a stable future for my loved ones.”

Here is a link to User's Journey Map.

Preparing the journey

I created a user flow of a basic start-to-finish journey while purchasing an item. This helps me understand how users interact with the product and allows me to see navigation through user goals.

UX Design Storyboards: I used storyboarding to make a strong visual connection between the insights I uncovered during the foundational research. Also, these interactions started giving me some ideas for the interface.

Design Process

Below, I give you a sneak peek into my early wireframes, mid-fidelity drafts, and high-fidelity designs. The designs have gone through at least ten iterations per screen.

Based on the research as well as the proposed design challenge, here are the goals I was helping users to achieve:

• Simplicity in Menu Navigation: Recognizing that users often found menus confusing, the decision was made to categorize meals by type, time of the day, and specific dietary needs. 
• Dietary Information: We have included detailed nutritional information and allergen warnings for each dish.
• Efficient and Secure Ordering Process: I streamlined the ordering process, reducing the steps required to place an order. I designed a feature to remember users' favorite orders and securely store payment information for quicker repeat orders.
• Customization Options: In response to users' desire for more personalization, I made an essential decision to include options for adding and removing ingredients for each dish.
• Flexible Order Scheduling: I addressed the issue of limited ordering times by introducing a feature that lets users schedule orders for whenever they want.
• Delivery Tracking: To meet users' needs for detail, I included a real-time tracking feature. This gives them ongoing updates, estimated arrival times, and mapping.
• Improved Accessibility: The app was designed with accessibility in mind, employing readable fonts, high-contrast color schemes, and the “Accessibility” button right from the welcome screen.

Paper Wireframes

For the home screen, I prioritized a quick and easy ordering process to help users save time.

*Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Testing & Iteration

During this phase, I conducted two rounds of tests on my mid-fidelity designs to validate their effectiveness ahead of developing high-fidelity prototypes.

Here is the link (Figma link) to my low-fidelity prototype after the second round of tests.

Important moments of the first round usability-study of lo-fi prototype:

1. I used a note-taking method that let me capture any thoughts I had during the usability study. 
2. During synthesize stage I gather, organize the data, found patterns and got insights using Miro.com. Here is a link to my findings.

Finding 1.0 Scheduling issues

I had thought of filling the entire page with specific information. However, it turned out that users prefer the design with a better visual information hierarchy.

Finding 2.0 Order Tracking issues

Users struggled to locate the order tracking feature that was initially in the Account section on the home screen.

Finding 3.0 Navigation Issues

4 out of 5 participants found setting dietary preferences confusing or hard to find, stressing it should be more intuitive.

Finding 4.0 Menu Issues

This was a moment of insight for me: users want more context or visuals to understand menu items, especially when it comes to naming French dishes for Americans.

Finding 5.0 Accessibility

3 out of 5 participants noted issues with accessibility in different areas of the app. There was an urgent need for overall accessibility improvements on the lo-fi and future design. This included text size adjustments, better screen reader compatibility, and more visually comfortable options like contrast.

Here is a sneak peak on the full process.

Mockups

Designing mockups, I kept in mind my challenges and the pains of my users and, of course, took into account the principles and laws of Gestalt (Law of proximity, similarity, common area, law of connectedness, Hick and Miller's Law, Fitts' Law).

Final Designs

The initial designs went through several user tests and discussions with users to ensure we had a friendly and scalable user experience. I wish I could show you every single part of the process! After analysis of research findings and user pain points, I prioritized these problems based on importance. Subsequently, I crafted solutions for each issue and integrated them into the final design.