Wichclub Sandwich Store App Design
Aniizhai Thirumeni
Project overview
The product:
Wichclub Sandwich is a regional sandwich store located in the suburbs of a metropolitan area. Zia’s Pizza strives to deliver healthy, specialty sandwiches and side dishes.
They offer a wide spectrum of competitive pricing.
Wichclub Sandwich targets customers like commuters and workers who lack the time or ability to prepare a family dinner. The mobile app provides assistive technology with screen reading translation and voice search capabilities for customers with limited vision and language barriers.
Project duration:
December 2022 to February 2023
Project overview
The problem:
Busy workers and commuters lack the time necessary to prepare a meal. Provide assistive technology for users.
The goal: Design an app for Wichclub Sandwich that allows users to easily order and pick up fresh, healthy dishes with the use of assistive technology like screen readers, translators and voice enabled search features.
Project overview
My role:
UX designer designing an app for Wichclub
Sandwich store 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.
Understanding the user
● User research
● Personas
● Problem statements
● User journey maps
User research: summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults and senior citizens who don’t have time to cook meals.
This user group confirmed initial assumptions about Wichclub Sandwich stores customers, but the research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included obligations, interests, or challenges that make it
to get groceries for cooking or go to restaurants in-person.
difficult
User research: pain points
Time
Working adults are too busy to spend time on meal prep
Accessibility
Platforms for ordering food are not equipped with assistive technologies
Text-heavy menus in apps are often difficult to read and order from
Language
Platforms for ordering food are not equipped with language translator facilities
IA
1 2 3 4
Persona: Dhruv
Problem statement:
Dhruv is an international student who needs help with translation while placing order because it is difficult to keep switching between different apps while placing an order.
User journey map
Mapping Dhruv’s user journey revealed how helpful it would be for users to have access to translators features in the Wichclub Sandwich app.
● Paper wireframes
Starting the design
● Digital wireframes
● Low-fidelity prototype
● Usability studies
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 screen designs on feedback and findings from the user research.
This bar at the top of the home screen makes it fast and easy for users to order.
The menu is located here so it is easy to find.
This navigation bar at the bottom of the home screen makes it convenient to access important pages.
Digital wireframes
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
Easy to locate button which makes navigation convenient
Assistive touch shortcut button for accessibility features like color adjustments, screen readers and translators
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was customizing and ordering a sandwich, so the prototype could be used in a usability study.
View the Wichclub Sandwich store low-fidelity prototype
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.
Round 1 findings
1
Users want to see rewards program
Round 2 findings
1
Users would like a rating page
2
Users want more payment options
Users feel order agina page is incomplete 2
3
Users want to see more prominent menu button
Refining the design
● Mockups
● High-fidelity prototype
● Accessibility
Mockups
Early designs allowed for some customization, but after the usability studies, I placed the menu as a scroll to allow quick access.
I added the rewards in the main screen so users see when they first land on the screen.
Before usability study
After usability study
Mockups
The second usability study revealed frustration with the menu not being prominent, so I moved the menu to the navigation bar which opens to a new screen with images and description to choose from. I also added the search bar on the top to be easily located.
Before usability study After usability study
Mockups
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for building a sandwich and checkout. It also met user needs for a changing delivery option as well as adding including more payment methods.
View the Whichclub Sandwich
high-fidelity prototype
Accessibility considerations
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier.
Used detailed imagery for sandwich and toppings to help all users better understand the designs.
Provided translator feature so customers with language barriers can use the app
efficiently 1 2
3 4
Going forward
● Takeaways
● Next steps
Takeaways
Impact:
The app makes users feel like Whichclub
Sandwich really cares about customer satisfaction and that is their number one priority
Some quotes from peer feedback:
What I learned:
While designing the Whichclub Sandwich app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
“Wow, very nice apps!! I like the accessibility options you got on the apps! Great work”
“Brilliant work altogether, very impressive!”
“Hi there! I really enjoyed seeing your mock-ups! I can tell that you worked hard on them! I also appreciate the 60-30-10 rule you carried out. Keep up the good work! :D”
Next steps
1 2 3
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Refine design based on user reviews
Let’s connect!
Thank you for your time reviewing my work on the Whichclub Sandwich store! If you’d like to see more or get in touch, my contact information is provided below. Email:
aniizhai28@gmail.com
