Project Overview

I designed a responsive web and an app for THouse restaurant as part of the online Google UX Design Professional Certificate program.
‍
Background: THouse, with four locations in the Atlanta area, currently allows customers to place takeout orders in person or use local delivery apps. The project aimed to serve busy customers by offering food delivery options that best suited their convenience, including specific locations, dates, and times. To address users' needs effectively, I focused particularly on one main feature - the scheduling flow.

Problem

Busy customers cannot schedule orders in advance and delivery at their time convenience. The goal is to create the website that allows users to easily order food from the restaurant and manage their delivery options to better suit their convenience (e.g., location, date, and time).

The Process

There are 5 phases in this design project:
1. Empathize
2. Define
3. Ideate
4. Prototype
5. Test

Design Thinking Process

To get a clear picture of who are the users and problem they face, I began with the empathize phase. I conducted user research through interviews and created an empathy map to better understand users' needs, thoughts and feelings which led me to spot the problem. First, I needed to get to know who my users are, and that's where user personas came in.

Creating personas helped me develop fictional users that represent a group of real users, allowing me to identify common pain points. I learned that most busy customers do not have time to pick up orders in person. Additionally, they are frustrated by the inability to customize delivery options in the local app.
‍
‍

Personas

From here, I began to understand their pain points and craft user stories to capture the needs of the users. Building a user story around their experiences, here is what I came up with:

• As a developer who works fully from home, I want to see live tracking on my delivery so that I can better plan my daily schedule, focus on work, and spend more time with my child.
• As a doctor working in various settings,I want to be able to order my meal in advance and customize my delivery details easily, so that I can ensure my food arrives at the right location before the restaurant closes.

Above is a simple user journey built off the personas and stories I've already created. It helps me think and feel like the user. Next is the define phase.

In the empathize stage, I focus on understanding the user's needs and problems, which allows me to craft a clear problem statement. By applying the problem statement formula, I identify the key elements: who, what, and why. This process not only clarifies the user's issues but also lays the groundwork for measuring success.

‍

Next I created a competitive audit which is a part of the ideation process. This includes:
- Identifying  key competitors
- Reviewing the products that the competitors offer
- Understanding how the competitors position themselves in the market
- Examining what the competition does well and what they could do better

By analyzing both the strengths and weaknesses of the competition, I can pinpoint gaps in the market and develop solutions that address unmet needs.

I researched each restaurant in the local area and filled out the information as needed to emphasize how this helps inform decisions to improve the product I’m designing.

‍

Competitive audit

Wireframes
Sketches & Low-Fi Wireframes

Based on the research findings, I can now start generating ideas for a storyboard and use them to create digital wireframes in Figma. To do this, I need to outline a user flow, which maps out the path a user takes through actions, decisions, and screens. This step helps me visualize how users will navigate through the app or website.
‍

User Flow

Now that I have my ideal flow for the design, I generate ideas for solutions by sketching a storyboard on paper to visualize potential solutions to the problems users are facing. By sketching out scenarios and user flows, storyboards provide a narrative that outlines how users will engage with the product. I use them as a tool to guide the flow of the experience, utilizing both big-picture and close-up storyboards.

Now that I have my ideal flow for the design, I generate ideas for solutions by sketching a storyboard on paper to visualize potential solutions to the problems users are facing. By sketching out scenarios and user flows, storyboards provide a narrative that outlines how users will engage with the product. I use them as a tool to guide the flow of the experience, utilizing both big-picture and close-up storyboards.
‍

These storyboards directly inform the wireframes, as they translate the visualized user journeys and interactions into tangible design elements. while storyboards offer a high-level view of user interactions, wireframes build on that foundation by detailing the specific layout and functionality of each screen. Specifically, I focus on the scheduling flow experience.
‍

Low-fidelity Wireframes

In the prototype phase of low-fi wireframes, I create basic, low-fidelity prototypes to test early concepts. This stage helps me understand how users interact with the design by providing a simple, interactive version of the product. By observing user interactions with these prototypes, I can identify usability issues, gather feedback, and refine the design before investing in higher fidelity. This iterative process ensures that the fundamental structure and flow meet user needs and expectations.
‍

Here is what I found from the early concept testing with five participants:
‍

I collected qualitative feedback and observations on usability issues, functionality, design preferences, and overall experience. To organize and analyze this information, I use an affinity diagram to clearly see connections between different pieces of feedback, prioritize key areas for improvement, and develop actionable design recommendations.
‍

The Insights

After organizing the feedback from our early testing into an affinity diagram, I use those insights to create high-fidelity wireframes. The affinity diagram helps me see patterns and key issues, so I know what to focus on in the design.

With the high-fidelity wireframes, I get more specific about how the design will look and work. These wireframes include detailed visuals and interactions, giving a clearer picture of the final product. This step lets us fine-tune the design and make sure it’s on track before moving forward with development.
‍

High-Fi Wireframes

After organizing the feedback from our early testing into an affinity diagram, I use those insights to create high-fidelity wireframes. The affinity diagram helps me see patterns and key issues, so I know what to focus on in the design.With the high-fidelity wireframes, I get more specific about how the design will look and work. These wireframes include detailed visuals and interactions, giving a clearer picture of the final product. This step lets us fine-tune the design and make sure it’s on track before moving forward with development.
‍

High-Fi Prototype

The final high-fidelity prototype for scheduling flow. Users can quickly update the date and time upfront in their cart and set it for reoccurring events if preferred.
‍