Empowering accessibility for the digital ordering experience
Project Type
UX/UI, Feature, Accessibility Design
Tools
Figma/ lllustrator
Timeline
2023 January
The context and problem space
In January 2023, a friend of mine shared a story he experienced while ordering food through his phone. He complained about feeling disconnected with the experience.
The goal
In this case study, I'll be focusing on the eater (one of the end-to-end user), to Craft a user experience that delivers a seamless and user-friendly journey for seeking to order food through their digital mobile devices.
User Research (story mapping scenarios)
- The user is looking for a fast and accurate way to order food before arriving to the restaurant, because they want to avoid in queue, if not to avoid, provide a better accomodation to plan their time accordingly to that queue.
- The user wants to accurately place their order and simultaneously know how long it will take for the restaurant to prepare their order, from the beginning, process to end.
Brainstorming 💭 and mindmap
Initial Pain points discovered...
User Research
Persona and empathy map
💬 "I wish I get to know every subtle detail of why the food is taking so long"
💬 "Could there be an option where I can leave a note for the restuarant to list my food concerns?"
White paper research
HMW improve the observable states to reduce user insecurity and patience? (Opportunities to improve visibility on)
- Restaurant's Volume and Efficiency
- Order traffic
- Peak Hour
- Order complexity
User flow (Early iteration)
Competitive Analysis
Ideating solutions...
- There must be accomodations to improve today's observable states of the digital order system.
- A prompt of queue window must be simple to keep users updated.
- Implement expected guestmates above the machine learning time estimations.
Starting to sketch initial screen variations and lofi-prototpye...
Usability test 1 and research goal:
Determine whether if the app reduces insecurity for eaters by providing observable states in the prompt window. Methods used were, system usability scale and time on task.
Outcomes
Through affinity diagramming , I identified visual issues, particularly with the home screen's clustered information and minor problems in other main flows due to insufficient consideration of information architecture. Additionally, users suggested implementing the queue time caveat earlier in the flow (e.g., cart/confirmation).
Design Improvements from usability testing
Layouts, color and type
Visual representations are crucial in this project since it is part of the user's pain points (Increase in efficiency in reducing time spent in user flow). This also brings improved clarity to users navigation to each screen.
I chose Proxima Nova as the typeface for this project primarily because it complemented the overall aesthetic.
The color option was picked with elements of coffee, since it resonates well with the restuarant's atmosphere, and it gives a warm and soothe feeling.
Usability test 2 (Hi-fi prototype)
The second usability study revolved around improvements on IA, clarity and other visual aspects.
- Removed unnecessary colors and illustrations
- Color palette was adjusted again into iteration 3 (final) to meet WCAG compliance as a accessibility considerations.
Improvements 3
Gradient → Flat design
Improvements 4
WCAG compliance as a accessibility considerations
Refinements
Visual cluterness was significantly improved (improved time on task), users completed user-flow (from home screen to checkout) faster, tested with new users to contrast with previous users from iteration 1's prototypes. Incorporated WCAG compliance, for accessibility considerations for overal visual color in the final iteration.
Final Design System
Final user flow
Final Prototyping
outcomes
Users navigated quicker between each flow, and were able to move around screens without making or are able to adjust errors (Beginning to final iteration). Users felt secure when confirming information with faster completion time between screens.
Challenges upon reflection
Problems can shift between different stages in design, and in this case study, the UX research has increased my awareness of how users' pain points can transform into other issues through different expressions, such as empathy maps during user interviews. The different states of the empathy map have brought forth more insightful stories, and journey mapping through various scenarios has been key in understanding users in a broader context.
Next steps
The usability study emerges more ideas to solve real pain points. The user's preferrence can either complicate or shorten the userflow and Journey maps, though usually improves the clarity and direction of the flow. Reward and point system to further incentivize customer loyalty. Conduct usability study fruther and validate weather shorter flow is neccesary, e.g., expanding the user flow on favourite items or past orders, order history to quickly re-order.