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.
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.
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
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
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.