The product
The UX design of this product is customized to help customers build their own sandwiches. The flow of the sandwich build is efficient, resulting in saved time for users. With the sandwich construction done online, it allows the shop to make fewer errors due to miscommunication. The main purpose of this app is to find out if this app will save people's time, produce fewer errors while building sandwiches, and give the users a quick and efficient experience.
My Role
As a Generalist Ux Designer, I developed paper wireframes, low-fidelity wireframes, high-fidelity wireframes, clickable prototypes, and user flows for the mobile app to enhance user engagement and increase conversation rate.
User Research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for. A primary user group identified through research is users who don’t have time to cook meals and wait in restaurants until their meals get ready.
​
During the research phase, the age group above 65 years was also considered. This study group showed signs of confusion at times. It seemed as if they are more comfortable going into the restaurant and asking for exactly what they wanted.
On the other hand, it was quite interesting talking to the youth and the working class. They seemed to enjoy this type of app a lot more. Studies showed that having the option to pick up and deliver was greatly appreciated. I think that this may be the result of their busy schedule.
Persona
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.
low-fidelity prototype for Mr. Sandwich App
High-fidelity UI design
Once the initial flow was completed and wireframes were ready, I started working on the main screen of the app. The typeface and the colors of the app were selected based on research done to make sandwiches look more appealing. For steady design process I created a simple UI style guide to maintain consistency.
​
Mockups
The picture below shows the menu page. After the usability study, I added the lines and shadows to the elements, so the product looks more attractive and clear.
To make the app more user-friendly, I consolidated the “Continue shopping” and “Add coupons” buttons to one “Order summary” screen.
​
High-fidelity prototype
