CLEVELAND VEGAN MOBILE ORDERING APP
UX & UI: interviews | competitive audit | wireframing | prototyping | usability
OVERVIEW
Cleveland Vegan is a locally operated vegan cafe in the Cleveland metro area. Their mission is to provide excellent customer service with organic and locally sourced items. Its target customers are residents, workers, and visitors in the area seeking a convenient experience to meet their needs whether that’s eating vegan, eating healthy, or trying something new.
Problem: Busy workers and households don’t always have time to plan and prepare meals ahead of time.
Goal: Design a mobile ordering app for Cleveland Vegan that improves customer satisfaction by letting users quickly and conveniently place and receive takeout orders.
Role: UX designer from conception to delivery (secondary and primary research, paper and digital wireframe iterations, creation and testing of low and high-fidelity prototypes).
USER RESEARCH
To understand users’ needs, interviews were conducted and data were arranged on empathy maps. The primary user group identified was busy working adults who need to order food while on the go. While this user group confirmed the assumption that having a busy work-life makes it difficult to meal plan and have adequate time to cook, the research revealed other factors contributing to the problem which include frequent schedule changes and prioritizing hobbies and personal commitments.
Creating personas helped identify common patterns in behavior and led to finding user pain points.
Problem Statement: Meera is a busy working professional who needs a way to order food quickly and conveniently because her inconsistent schedule makes it difficult to plan meals ahead of time.
Creating a user journey map for Meera revealed the usefulness in having access to a dedicated Cleveland Vegan ordering app.
STARTING THE DESIGN
Ideation:
To help inform ideation, a competitive audit was performed on direct and indirect competitors. Some identified opportunities include providing an easy way to save users’ orders and creating a clear, consistent, and straightforward process for inputting/selecting order options and customizations.
To get a better picture of the typical path a user would take to complete a takeout order, a user flow was mapped out providing an overview of the app’s functionality. Afterward, a storyboard was created to examine the user experience as the user moves though each screen of the app.
Starting with paper wireframes, various iterations of each app screen were created to make sure the elements chosen for each screen would be well-suited to address user pain points. For example, the “Account Home” screen prioritized access to relevant and saved information to make ordering quick and easy.
Digital Wireframes:
Findings from user research informed each screen design.
Incorporating visuals to aid in quick scanning and understanding was an important user need addressed in the design.
Low-Fidelity Prototype:
The low-fidelity prototype connected the main user flow of starting an order, adding and modifying menu items, completing the checkout process, and accessing account information so the prototype could be used by participants in a usability study.
USABILITY STUDIES & DESIGN REFINEMENT
Two rounds of usability studies were conducted. The first study used the low-fidelity prototype which guided the transition from wireframes to mockups. The second usability study used a high-fidelity prototype and revealed aspects of the mockups that needed further refinement.
Findings From Usability Study 1:
Users want cues to guide them through the process of starting a new order.
Users need recognizable cues to locate their account information.
Users want intuitive and familiar navigation.
Findings From Usability Study 2:
Users need to easily find where to create an account
Users want clearer cues when navigating through the ordering process.
Users want quick access to important and relevant information.
Mockups:
The early design included three progressive screens to guide users through the ordering process. After the first usability study, task-specific language and improved cues were added to reduce ambiguity and create a better user experience.
before usability study
after usability study
The second usability study revealed navigation issues. Users still had trouble locating where to create an account. The “Create Account” and “Login” links were updated to match the call-to-action buttons used throughout the app.
after usability study 2
before usability study 2
Users were also unclear about the back navigation. On the “Add Items” screen, a pop-up menu was added for when a user taps the back arrow. In the pop-up, users are asked what action to take.
before usability study 2
after usability study 2
High-Fidelity Prototype:
The final high-fidelity prototype presented a clearer user flow for the ordering process with improved visual cues to aid navigation and locating desired information.
Accessibility Considerations:
Icons with text labels aid quick, intuitive navigation and include vision impaired users utilizing screen readers.
Menu items displayed with images help users intuitively understand the product and facilitates navigation.
Alternative text added to images and unlabeled icons to ensure access with screen readers.
CONCLUSIONS
Takeways:
The app makes users feel like Cleveland Vegan is putting them front and center and working toward providing added convenience to the ordering experience.
“I don’t feel like there’s anything missing from this app, it tells me everything I need to know.”
While designing the app, users with different technology comfort levels used and interacted with the product very differently. The information gathered from usability studies helped each design iteration by improving the app experience to accommodate a wider range of users.
Future Steps:
Plan additional usability studies to validate whether the remaining pain points have been resolved.
Conduct further user research to discover if there are additional user needs.
Synthesize data collected from studies/research and prioritize insights to be incorporated into future high-fidelity design iterations.