top of page
FM Ramen iPhone Mockup.jpg

FM Ramen

A mobile food delivery app for ramen that offers a simple and satisfying checkout flow for either delivery or pickup.

INTRO

This hypothetical mobile app was designed as part of the Google UX Design program.

ROLE

Sole UX/UI Designer

DURATION

5 weeks

AUDIENCE

Students and working adults

Narrated walkthrough of the mobile prototype for FM Ramen

Problem

Busy students and working adults often lack the time or means to prepare themselves a meal outside of class/work, and many food delivery apps on the market fail to offer a hassle-free alternative.

Solution

Design an app for FM Ramen that is accessible, empathetic to users' needs, and provides a seamless user flow ordering delivery or pickup.

RESEARCH

I chose a qualitative research approach and conducted interviews to pinpoint user needs and identify pain points observed in competitors. This informed my design strategy to differentiate FM Ramen in a saturated market.

Participants

8

Demographic

Ages 18 - 55

The interviews identified two main user groups: students and working adults, which confirmed my initial assumptions. Four major pain points found in competitors were also identified.

Following the interviews, I created two user personas, conducted a competitive audit, and later conducted two unmoderated usability studies to test the app's prototypes.

User Pain Points

Navigation

Users can be locked into user flows without an easy option to backtrack or modify their order.

IA

Text-heavy menus in competitors are often difficult to read and order from.

Accessibility

Competitors are not always equipped with assistive technologies.

Transparency

When ordering online, competitors lack ingredient and allergy information.

As not every user interviewed for this project had used a dedicated ramen delivery app before, these pain points were identified across a variety of dedicated and third party food delivery apps.

User Personas

I constructed two user personas from my initial research. Fleshing out the personas before any further research or design was done ensured I kept the user's needs at the forefront of my process.

Persona 1.png
Persona 2.png


Competitive Audit
 

I conducted a competitive audit on two direct competitors and one indirect competitor to further inform my design strategy by identifying what is executed well and what could be improved on in my app.

Competitive Audit.png

DESIGN

I began the design process by creating a user flow map to help guide my future wireframes and prototyping. The user flow is for ordering delivery, but I planned to include a flow for pickup in future iterations as well.

Following this, I drafted paper wireframes and built a low-fidelity prototype to test my designs with a usability study. 

User Flow Map

Slide 16_9 - 17.png

Wireframes

Lo-Fidelity Prototype

Usability Studies

I conducted two rounds of usability studies, the first for my low-fidelity prototype and the second for my high-fidelity prototype. Additionally, I asked participants to complete a System Usability Scale (SUS) following each study. 

My goal with both prototypes was to receive feedback on the user flow, understand how participants interacted with the prototype, and learn if pain points had been addressed.

Participants

5

Methodology

Unmoderated

Location

Remote

Accessibility

Screen reader

Orders Takeout

x1 per week

Breakdown of Process

I created a planning document for each of the usability studies, outlining my goals for the study, the prompts to be given to participants during the study, and the SUS.

An example of the planning doc I used for the first usability study

After conducting each usability study and its accompanying SUS, I used pattern and insight recognition to organize my findings into several actionable items.

Round 1 Findings

  • Users reported a lack of action confirmation in the app.

  • Users thought a date/time picker would make scheduling pickup/delivery easier.

  • Users expressed a need for a "notes" section for menu items, allowing them to request customization for their order (eg. allergy accommodations).

Round 2 Findings

  • Users thought on-screen elements were too crowded and some buttons/actions were hard to see, especially during checkout.

  • Users reported that the new date/time picker could still be improved to be more intuitive.

  • Navigation could be improved to help users proceed forward and backward through the app.

As the first round of testing was conducted on a low-fidelity prototype, only some issues with my design were brought to light, most notably the lack of allergy information. However, the second usability study revealed to a greater extent that the app failed to address most previously established pain points.

I address the feedback for both prototypes in the next section.

MOCKUPS

After implementing the changes from the first usability study, I created a high-fidelity prototype and conducted a second round of testing. 

Listed below are my revisions to the low-fidelity and high-fidelity prototypes, a gallery of the app's mockups, and the app's style guide.

Lastly, an overview of the app's accessibility considerations and potential next steps are listed.

Revisions

Slide 16_9 - 20 (1).png

Gallery

Style Guide

Accessibility

This app meets the Web Content Accessibility Standard in terms of color contrast.

Using the Stark plugin for Figma, I added alt-text to images within the app to enable compatibility with screen readers for those with visual impairments.

An example of the alt-text added to the menu screen in Figma.

Next Steps

There are a few things I believe should happen for the app's next steps.

  • Conduct another round of usability testing to validate whether the pain points users experienced have been effectively addressed.

  • Add the option to save orders and view order history. Make the Orders button on the bottom navigation "clickable" in the app's prototype.

  • Add functionality to the customization options for each menu item. Subtotals should reflect the added cost of item customizations.

  • Add dynamic functionality to the cart screen to reflect which items users have added/removed from it. Similarly, update checkout screens to reflect those changes. 

  • Add screens and banners for the Rewards Program. Make the Rewards button on the bottom navigation "clickable" in the app's prototype.

  • Conduct further research to determine any new areas of need.

Thank you for reading!

bottom of page