My Role:
UX/UI designer designing an app for Woolworths Café from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Durban Transport is a public transport service
organization focused on affordable transport service
for the local municipality of Durban. The organization
needs a tool that helps people find out about bus
timetable so they can manage their trips and time
more efficiently. The target users are primarily
saver’s, pensioner’s and students (Primary, High
School and Tertiary) who would like to use public
transport to commute to the city.
The product:
Woolworths Café has two types of customers. The first customer is Milena. Milena is a skilled architect and master's student who needs to manage her time more efficiently because she has a busy schedule. The second customer is Sphiwe. Sphiwe is an e-hailing driver. He needs to understand the restaurant menu and finds it difficult to navigate because he is not used to the naming conventions used in the menu.
The Goal
Design an app for Woolworths Café that allows users to preview the menu online and off, make reservations, and pick up takeaways from the comfort of their own home or office environment.
The Problem
Project Overview
User Research: Summary
I conducted interviews and created empathy maps to understand the users I am designing for. A primary user group identified through research was working adults who keep a busy schedule.
Our research revealed that users don’t have time to cook breakfast and lunch, but time was not the only factor limiting users from cooking at home. Other user problems included obligations, interests, and challenges that make it had to get groceries timely for cooking.
User Pain Points
1
Time
Working adults are too busy to spend time waiting on meal preparations.
2
Accessibility
The Woolworths Café Summer Menu 2022 is a digital PDF that has no interaction technologies.
3
IA
The restaurants menu is Text-heavy and often difficult to read and understand.
Persona Milena
Problem Statement
Milena is a busy working
professional who needs easy access to freshly made breakfast and lunches because they don’t have time to cook for themselves.
1
Goals
Working adults are too busy to spend time waiting on meal preparations
2
Frustrations
Working adults are too busy to spend time waiting on meal preparations
"
Growing with time, education, experience, and profession.
"
Milena Van Heerden
Age: 26
Education: Cape Peninsula University of Technology
Hometown: Cape Town, South Africa
Family: Single, Live with Family
Occupation: Architect & Student
Milena's Profile
Milena is an architecture, currently working on her masters degree, she loves leisure, and spending time with her family and friends. Sometimes she becomes over occupied with schoolwork she does not have much time to worry about anything else even cooking for myself.
User Journey Map
Mapping Milena’s user journey revealed how helpful it would be for
users to have access to an interactive Woolworths Café Menu app.
Action
Task List
Tasks
A. Locating the restaurant.
B. Fining a waitress.
Tasks
A. Viewing the menu.
Feelings Adjective
Sad
Disappointed about having to wait too long for a waitress who will take her order.
Sad
Disappointed with the menu because it is text-heavy.
Improvement Opportunity
Going to the Restaurant
Make a way to order before travelling to the restaurant.
Tasks
A. Relaying meal order to a waitress.
Tasks
A. Just Waiting while her meal is being prepared.
Tasks
A. Receiving the order.
B. Gathering essentials.
Happy
A. Happy with service.
B. Waitress are too busy to attend to her additional requests.
Placing the Order
making an order by reservation or take away.
Sad
Frustrated with how long it took to prepare her meal.
Happy
A. Locating the restaurant.
B. Fining a waitress.
Sad
Create a mobile application
to pre-order meals in advance.
Paper Wireframes
Taking the time to draft iterations of each screen of the app on
paper ensured that the elements that made it to digital wireframes would be well-suited to
address user pain points. For the home screen.
I prioritized a quick and easy ordering process to help users save time.
Digital Wireframes
As the initial design phase continued, I made sure to base the screen designs on feedback and findings from the user research.
“The text is too small for me too see”
Some Participants found it difficult to read these texts.
Users felt that the order screen was too busy.
This button provides an easy option for users to navigate the order process.
Participants also felt the cart button was too small.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow was building a preview menu and reservation app so the prototype could be used in a usability study.
View the Wcafé menu
Digital wireframes
After a couple iterations of the design, the key user need to address was more reader friendly screen, and focused navigation.
Easy access to navigation and screen reader friendly.
The visual hierarchy of similar strong black colours indicates a call to action.
The contrast of colour palette is designed to allow optimal engagement.
Increased font size and cart button. Consider the use of Gestalt Principles of design, visual hierarchy.
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
1
Round I findings
A. User login process is unnecessary.
B. Users want to user the app from different starting point of the user flow.
2
Round II findings
A. Users want to receive feedback, when they make a successful payment.
B. When an item is being added to cart, the Add To Cart button does not provide feedback.
Mockups
Early designs allowed for some users to select the store they would like to order from, but after the usability studies, I removed the upper navigation bar and added a bottom navigation bar. I also revised the design so users can easy access all the three menus.
Before usability studies
After usability studies
The second usability study revealed frustration with the checkout flow. to streamline this flow, I consolidated the “Current order” and “Checkout screens” to one “Checkout” screen. I also added the pickup or reservation option to the “edit” screen.
Before usability studies
After usability studies
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows and checkout. It also meet user needs for a pickup or reservation option, and the design was revised to match with the Woolworths Brand Design Guidelines.
View the WCafé
Key mockups
Accessibility Considerations
1
Provided access
to users who are vision impaired through adding alt text to images for screen readers.
2
Used icons to
help make
navigation easier.
3
Used detailed
imagery for meals to
help all users
better understand
the designs.
Takeaway
Impact:
The app makes users feel like WCafé really thinks about how to meet their needs.
What I learned:
While designing the WCafé app, I learned that the first ideas for the app are only the beginning of the process.
The Next Step
1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2
Conduct more user research to determine any new areas of user needs and pain points.
Disclaimer: Woolworths and the related logo are trademarks of Woolworths Holdings Ltd. I am not endorsed by or affiliated with Woolworths as a marketing or communications representative in any capacity or form. The work displayed on this website is for exemplary purposes only.