UX Case Study

The Cranberry Restaurant

Elevating Mobile Dining

Project Overiew

In the dynamic world of dining, Cranberry Restaurant faced a challenge: a convoluted process for customers to navigate menus and place takeout orders.

Project:  During the Google UX program, we were provided with various prompts through Sharpen for our first project. I chose to create a menu viewing and ordering application for a local restaurant becasue I found a personal connection to this challenge.

Personal Connection:  While working nights at the Cranberry Restaurant during the UX program, it became quickly apparent the struggle for guests and staff when it came to takeout orders—the chaos of phone calls, order accuracies, and delays experienced by customers because of the absence of a digital solution. Inspired by these real-world challenges, I embarked on the journey to design a mobile app for menu viewing and ordering. This project wasn’t just about solving problems; it was a commitment to transforming an organization into culinary convenience, driven by a first-hand understanding of the restaurant’s operational intricacies. As part of this UX endeavor, my role extended beyond design; it became a narrative of crafting a user-friendly solution that addressed the pain points witnessed during those busy nights at Cranberry Restaurant.

Team: Individual Project

Role: UX Strategist | Researcher | Designer

Tools: Figma, Miro, Google Suites

The Problem

Challenges: Cranberry Restaurant faces inefficiencies in its manual ordering process, contributing to communication gaps, service delays, and staff strain, necessitating a user-centric app for swift, accurate, and secure order placement to elevate customer experience and outshine regional competitors.

 

 

Preliminary Research

Understanding the target audience was paramount. The Cranberry Restaurant is located in a remote yet high-tourist area with limited technological infrastructure. I found that there was a wide range in the level of technological literacy. It was very important to design in a way that was inclusive to all users, so a simple and clear interface was essential.

Market Research

A thorough competitor analysis revealed a significant gap – within a sixty-mile radius, there were no existing menu viewing and ordering apps. Recognizing this void, the strategic implementation of an easy-to-use, streamlined, and user-centric app emerged not just as a solution to technological challenges but as a potential game-changer, positioning Cranberry Restaurant ahead of its competitors.

 

— How might we create a digital platform that is accessible and approachable for all users?

The Solution

Solution: A user-friendly mobile app, informed by customer interviews and competitor audits, streamlines Cranberry Restaurant’s ordering process, offering menu customization, secure payments, and real-time tracking to enhance the customer experience and position the restaurant as technologically advanced in a competitive market.

design thinking phases Cranberry Restuarant App

DESIGN THINKING : A Non-Linear Process

 
 

The Process

Phase 1 — Emphazise

User Interviews — Empathy Maps — User Personas — User Stories — User Journey Maps = Foundation of User-Centered Design Process

 

Defining the Opportunity Areas

Based on my personal experience and time spent bartending at the Cranberry Restaurant, two focus areas emerged—product strategy and interactive prototyping.

Foundational Research

I interviewed ten guests of the Cranberry Restaurant. Seven guests lived in the area and three guests traveled to the area for vacation.

 

Interview Questions:

  1. Do you have a preferred restaurant for takeout orders?

  2. How frequently do you place takeout orders in a week?

  3. Do you usually order for yourself, or for a group?

  4. What factors influence your choice of restaurant for ordering and pickup? Are you familiar with using mobile apps for takeout orders?

  5. Can you describe your typical process of ordering and customizing takeout meals?

  6. Could you guide me through a typical day in your life?

Key Insights

The initial interviews revealed four user pain points related to ordering and picking up takeout orders.

CR User Pain Point found from user interviews

Empapthy Maps & Personas

Empathy Map - User persona Fransicso

Empathy Maps — Interview answers were organized and categorized based on shared characteristics, goals, and needs to create two aggregated user personas to represent two target user groups.

User Personas — Converting empathy maps into user personas enhances empathy and understanding, translating key insights into actionable representations for a more user-centered design approach.

 
User Persona Rachel

Problem statement: Rachel is a busy professional and mother who needs an easy and quick way to make informed choices to place and pick up takeout orders because she does not always have time to cook for her family.

User Persona Fransisco

Problem Statement: Francisco a student who recently relocated to the US from Ecuador who needs a convenient and accessible solution for ordering takeout without language barriers because he faces communication barriers and struggles with understanding menu items due to limited English proficiency.

 

User Personas — Converting empathy maps into user personas enhances empathy and understanding, translating key insights into actionable representations for a more user-centered design approach.

User Journey Maps — User personas were used to create a user journey map to visualize and understand the customer’s interactions with Cranberry Restaurant’s menu viewing and ordering process.

Rachel´s User Journey Map
Fransico’s User Journey Map

Opportunity Areas Defined

Findings from user interviews and analysis of the competitors were then translated into user personas and user journeys, which served as the guiding force behind the user-centered design direction. I moved forward with the project by mapping out our knowns, unknowns, and assumptions. I saw that there was an opportunity to bolster the position of the Cranberry Restaurant among competitors by:

  1. High-quality images and clear menu descriptions

  2. Create a simple and straightforward user interface and implement further time-saving features such as saved favorites and order history

  3. Implement a secure payment process and real-time order tracking to eliminate inaccurate quotes and delays in the pickup process

Phase 2 — Define

— Problem Statements — Hypothesis Statements — Goal Statements

Question: Which of my user needs are most important in my design to address?

By determining the goal statements for my two personas, I was able to take the action and outcome of the hypothesis statements and expand them to articulate specific and measurable goals for the restaurant app. The goal statements are also a vital tool for honoring a project’s business requirements.

 

Goal Statement: Rachel — The App for the Cranberry will let users quickly and easily place informed takeout orders which will affect users who do not have time to cook by providing a convenient solution for meal planning and saving time. I will measure effectiveness by tracking the average order placement time and user satisfaction ratings.

Goal Statement: Fransisco — The app for the Cranberry will let users with limited English proficiency conveniently and confidently order takeout which will affect people who struggle to understand menu items or clearly communicate orders to restaurant staff by eliminating language barriers and empowering them to make informed food choices. I will measure effectiveness by the number of orders placed with the app that are translated to a language other than English and the customer satisfaction rating of the app.

Phase 3 — Ideate

Competitive Audits — How Might We — Rapid Sketching — User Flow Diagram — Storyboards

The competitive audits of the two most popular direct competitors of the Cranberry Restaurant in the surrounding 30 miles revealed the lack of an online ordering platform. In addition to a lack of a digital platform to order takeout, both restaurants lack comprehensive menus on their websites and quality menu item images. No competitors in the surrounding 60 miles provide users with an app to view and place takeout orders. Most popular competitors were determined by the number of Google reviews and their overall rating.

Competitive Audit Report

User Flow Diagram

Creating this visual guide helped to ensure a cohesive journey, strategically integrating language translation, clear menu details, and simplified payments.

Storyboards

Cranberry Restaurant Big Picture Storyboard

Big Picture — My goal was to show the emotional engagement that Rachel will have with the Cranberry Restaurant app. 

 

Close Up — My goal was to focus on the practicalities of the design itself and indicate Rachel’s transitions between screens as she completes her goal. 

 

Phase 4 — Prototype

Site Map — Wireframes — Mockups — Prototypes

Site Map

  • Organization

  • Hierarchy

  • Sequence

This visual guide, including features like full menu browsing, categories, ordering, company info, and contact details, was important for outlining the website’s structure and enhancing user experience through logical flow.

 

Paper Wireframes

I drafted 5 iterations of each screen of the app beginning with the homepage and selecting key features for the final paper iterations. Stars donate key features for the final design.

The primary goal of creating paper wireframes was to visualize the initial layout and structure of the website, focusing on the arrangement of key elements. Through paper wireframes, I sought to establish a clear information hierarchy and user flow,

Lo-Fidelity Wireframes

Using wireframes, I put my ideas on paper first and then started to make high-fidelity wireframes.

 

Lo-fidelity Prototype

Cranberry Restaurant App Lo-Fidelity Prototype

The low-fidelity prototype connected the primary user flow from logging in to placing a takeout order, so the prototype could be tested in a usability study with users.

Design Systems

I created a series of reusable elements to develop the app more quickly and consistently, following predetermined brand standards.

Color Scheme

Cranberry Restaurant App Color Design Theme

Typography

Cranberry Restaurant App Typography

Phase 5 — Test

Usability Testing — Organize Data / Affinity Diagram — Analyze and Synthesize Data — Turn Data into Patterns and Themes — Translate Patterns and Themes to Actionable Insights — Prioritize Insights — Modify Designs — Repeat

 

Research Questions:

  1. Can users find the menu items they are looking for?

  2. Are users able to effectively customize their orders? 

  3. Do users understand how to add items to their cart?

  4. Are there any parts of the checkout flow that users struggle with?

  5. Can users easily navigate to different parts of the app from the home screen?

  6. Do users think the app is easy or difficult to use?

Usability Studies

From observations to insights

  • Gather the data in one place

  • Organize the data

  • Find themes within the data

  • Develop actionable insights

CR Affinity Diagram from Usability Study 1
Usability Study Round 1 Findings
Usability Study Round 2 Findings
Usability Round 2 Findings

Based on insights from the first usability study, the ¨Add to Cart¨ button on the homepage that brought users to the product page was confusing for most users. The first ¨Add to Cart¨ CTA was replaced with a forward arrow button. The ¨Add to Cart¨ button on the product page will add that item to the users cart.

 

Find all themes and insights derived from the first usability study in Research Report 1.

Research study plan can be found here.

CR Insight from usability study 2

Based on insights from the second usability study, the drop-down button, ¨Add,¨  needs to be more clearly labeled. Users were unclear if ¨Add¨meant ¨Add to Cart¨ or if it was a way to modify an item. The ¨Add¨ button was changed to ¨Add an Ingredient¨ and the text ¨Want to customize your order?¨ was added above the button. 

 

Find all themes and insights derived from the second usability study in Research Report 2.

Hi-fidelity Mockkups

CR Hi-Fidelity Mockups

Hi-fidelity Prototype

CR Hi-Fidelity Prototype

The final high-fidelity prototype showcased a more intuitive user flow for browsing, searching, and placing a takeout order. It also catered to user needs for clearer menu categorizations and personalized, customizable dining options, along with a simplified checkout process.

Accessibility Considerations

Accessibility Considerations

Inclusive design, essential for accessibility, ensures that products and environments cater to a diverse range of users, fostering equal access and usability for everyone, often resulting in improved design for all.

The Next Steps

While designing the Cranberry Restaurant app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs. Even a small design change can have a huge impact on the user experience. 

If this project was going to come to life, I would to conduct post-launch usability studies to validate the effectiveness of addressing identified pain points. Ongoing user research will uncover new needs, allowing for continuous refinement of the app’s functionality. I would then modify designs based on emerging findings, ensuring the app evolves to meet user expectations and remains aligned with changing needs.

 

Challenges & Takewayas —

The Cranberry Restaurant app project provided essential insights into market dynamics and strategies for product differentiation. Learning from real user feedback, despite challenges like time constraints and budget limitations, emphasized the significance of unbiased data. Interviewing acquaintances revealed inherent biases, underscoring the need for a more diverse sample in future research.
In future projects, it is important to prioritize unbiased data collection, diverse participant samples, and iterative design based on real user feedback.