WOLT IS COMPLICATED TO USE. 😳 WHAT?
While having a conversation with a person who is legally blind, Wolt came up in the context of the times of COVID-19 lockdown. "I never order food from delivery apps because they are complicated to use", he said.
Why a very tech-savvy person, soundman and DJ is not able to use Wolt? His answer was unclear to me, so I decided to dig into it by doing usability testing with blind people and user research.
Shachar playing music at Concierge Bar on Purim night
PROBLEM
Wolt became very robust in content, offering too many options that for blind users create a very hard user experience. But there is more...
Navigation Trouble
Unexpected layout changes caused users to get lost on some screens, creating trouble in learning navigation patterns.
Content and Information Hierarchy
The lack of a unique title on some screens made VoiceOver skip relevant information, causing some disorientation on users' mental map.
Screen Layout
The lack of similarity and inconsistency in many screen layouts caused users to make an extra effort to memorize the app navigation.
Banners and Carousels
It confused and created disorientation for users in trying to scan the screens.
Filters
Users found them very messy.
Accessibility Information
Some no grouped elements caused users to get stuck on some screens.
Blind users
Blind people have a huge memory, they experience life in the dark, but they can see by creating patterns for everything. These patterns are created by discovering small things, to discover the whole thing. In the same way, blind users scan screens, the opposite of sighted users.
Small Parts
Sighted Users
Blind Users
The Whole
Illustration source: internet
PERSONAS
After conducting the usability testing and user research, I created a persona that represents a large part of the users for whom ordering food is a thing done by phone because of the wasting time of using inaccessible food delivery apps.
"Apps shouldn't be the same for sighted and blind people."
- Blind User (during the usability testing)
IDEATION
Information Architecture and Main User Flows
To visualize solutions, I redesigned Wolt's Information Architecture which also helped me to identify the main paths users could take, focusing on Wolt's main business: Food Delivery.
Click the image to open the link
Redesigning Screens
Wireframes
To visualize the early designs and test Wolt's accessibility improvements, I started with a few sketches on paper and then created mid-fi wireframes of the main screens, focusing on Navigation, layout and reducing content.
Final Screens
Onboarding - Adaptive User Interface (AUI)
During the onboarding process, Wolt recognizes that VoiceOver/TalkBack is enabled and offers the user an alternative version of the app, whose user interface is specially adapted to the needs of blind users.
Screens Design during the onboarding
Search Screen: Layout, Content and Results
The vertical scroll layout and avoiding unexpected information changes help users to easily scan the screen, learn and memorize the mental map of the app. Adding the main title for each screen lets users understand the app structure.
Current Design
Suggested Design
Providing filters allows users to have control over the results and, depending on the scenario, users can decide which options are better for them - it also reduces content. Not presenting closed restaurants, prevents users from wasting time on unnecessary information.
Current Design
Suggested Design
Presenting the menu in categories allows users to quickly navigate the screen from top to bottom effectively, informing them of all the food types offered by the restaurant. Also hiding irrelevant information about the restaurant in a button, reduce the amount of content that is presented to users, guiding them to focus on their order.
Current Design
Suggested Design
Search Screen - Hi-Fi Screen Flow
Discovery Screen: Layout, Content and Filters
To offer users fewer content options, based on their needs (the displayed content based on the time of day was confusing for users). Avoiding banners and carousels, and keeping a vertical scroll is key for users to learn and memorize the mental map of the app.
Current Design
Suggested Design
Presenting vertical scroll filters helps the consistency of pattern navigation. Users had trouble with the horizontal version of the current design.
Current Design
Suggested Design
Discovery Screen - Hi-Fi Screen Flow
Checkbox and Forms
Grouping the checkbox with the text, creating a "container" that presents its state and makes the entire text line clickable to change the checkbox’s state (Example: VoiceOver: “Unchecked + text line + Button”). Also changing the text and place of the "read more" link helps users to understand the context.
Current Design
Suggested Design
Presenting the payment information fields as a form, instead of a visual credit card, helps users to scan and navigate the screen and easily find the fields to fill. Also, group elements and adding informative text will let users understand the context. Example: VoiceOver will read "Enter Card Number" instead of 16 times the number "0".
Current Design
Suggested Design
USABILITY TESTING
The usability testing was a real challenge: mobile prototyping software apps, including Figma, don't work with VoiceOver, so I decided to test the design using a paper prototype.
I printed all the screens and in this case, I used sandpaper to highlight its content. I also asked a professional person who is a book narrator for blind people to voice over all screens when the user touched the paper.
Example: The yellow marker represents the sandpaper.
KEY FINDINGS
Navigation Bar
Some users made comments about expecting the Homepage (the search screen) on the bottom left of the app, instead of its current place.
Position of the “Back” button and screen main titles
The first element announced by the VoiceOver on a new screen is the one on the top of the screen, from the left. Because the “Back” button and the screen title are aligned, VoiceOver announced the button (top left) and then went silent. It didn’t bring confusion, but it broke the consistency of the navigation.
Filters
Users expected filters on the search screen.
User Support
During the usability testing, one user asked “what happens in case I need some help?"
Reflections and Next Steps
This project challenged me to empathize with a group of people that I was entirely unfamiliar with. It taught me in depth the importance that well-designed products are those that are able to include all kinds of people, and also to rethink that products that are not always well-adapted for minority use can be adapted (and must be).
I enjoyed reading studies and reports and watching lectures from sources like WCAG and W3C, A11Y, Léonie Watson, Rob Dodson, NNgroup, Apple Human Interface Guidelines, Google Accessibility, and others. Those lessons were really important when making decisions.
Next steps: Continue to improve the project and learn more about accessibility.
Thanks for reading!
More Projects
Furwell
Building the MVP
The GT-R Ride
CX Campaign
Crafty Beers
E-commerce Website
Foodz Exchange
Website Redesign
Frame Me
A Streaming Network App
The 47% Stories
A Crowdfunding Platform