W R A P P E R
Festival of Flavors
PROJECT: Wrapper
ROLE: UX-UI Designer/ Conception to Completion
DURATION: Mar-May 2022
Project Background
The wrapper is a mock sandwich/wrap shop located in the valley of the sun, Phoenix, Arizona.
This sandwich shop offers wraps, submarine sandwiches, salads, and soups. In addition, custom wraps, sandwiches, and salads can be made according to customers' preferences.
Project Goals & Challenges
1) Increasing users' knowledge about the importance of food, nutrition facts, and its effect on their health.
2) Build an app to create custom sandwiches and wraps and change existing menu items.
3) Design an accessible app containing all helpful information that users with any background may need.
Showtime
In the beginning, I asked myself a few crucial questions. Who is the user? Why would someone prefer using the app instead of going to the restaurant? What are the user's goals?
I interviewed a variety of people with different ages, races, tastes, limitations, and disabilities to gain insight. I created user empathy maps and journey maps to better understand their needs and pain points. Upon closer inspection, all their goals and pain points fell within three categories; Irritation, convenience, and accessibility.
User Pain Points and Problem Statement
01
Accessibility
Food ordering apps do not consider accessibility in mind,
such as responsive nutrition facts, low-quality and irrelevant images, and low background-to-text contrast.
02
Convenience
The user showed frustration about the unnecessary steps they had to take to order a food. For example, starting over in the middle of the process, being asked several times to add food to their order, etc.
03
Information
Users expect the app to present necessary information and steps in a readable and easy-to-understand manner. They were frustrated about categorizing information in the apps.
Competitive Analysis
To ensure Wrapper has a good market fit and a compelling advantage over others in the marketplace, I had to run a practical competitive market analysis.
I evaluated several vital features from user surveys and identified which ones Wrapper could capitalize on to have a leg up over the other applications.
Meet the Users
“ My wife and I both work during the week. Friday nights are family nights and we all look forward to it!”
Salman
38 Years
PhD in Biology
Mumbai, India
Married, Lives with his wife and a 4-years old daughter
Professor at the University at Buffalo
Goals & Frustrations
• Enjoy dinner time with his family
• Make sure their food has no garlic in it
• Customize their food
• Earning points for rewards
• Have photos of the food for his kid to help her order her food
​
• Doesn't have a picture of all sandwiches
• Doesn't have any "special instructions" part in the app, and he has to call the restaurant every time
• Technical issues with redeeming their points
​
Salman is a professor at the University at Buffalo. On Fridays, he and his family have a movie night and eat dinner together. Most of the time, they order their food online, and they all love sandwiches. They love to customize their sandwich and change what they eat each week. Also, they earn points by ordering from their favorite sandwich shop, which motivates them to order from the same shop every week, which is their favorite. Salman’s wife, Prianka, is allergic to garlic; therefore, they have to call the restaurant weekly and ensure they don’t cook anything with garlic. His daughter, Anisha, can’t read and always wants to choose her food. Not having pictures of all ingredients and sandwiches makes it hard for her to do it herself.
“ I’m always studying, lunch time is that part of the day which I enjoy the most! I want to make the best out of it!”
Mana
Years 24
Master of Market Analysis
Istanbul, Turkey
Single
Student at IIT
Goals & Frustrations
• Eating healthy
• Get food on time
• Try new food and new tastes
• Knows the nutritional value
• Have an idea of what she is ordering
​
• Not having a picture of her food
• Incorrect estimation of when the food is ready
• Not knowing the food’s Nutrition facts
• Getting signed out from the app for no reason
Mana has just started an M.Sc. in Market Analysis at IIT. It's only one month since she moved from Turkey to The U.S. Therefore, she is super busy catching up with her classes all in English, which is her second language. Mana doesn't have enough time to cook and usually orders her food online and picks it up. Mana has diabetes; she loves to try different foods, but eating healthy is her priority. She wants to get her food on time, but sometimes the estimation on the app is not correct and causes her to get late for her class. Whenever she is late, she goes in person, but they don't understand her accent well, and her order is messed up. She loves to try new food, but she gives up because she can't get enough information on the food's nutrition or calorie or there is no picture of it.
Information Architecture
P & P Wireframes
Wireflow
CHALLENGE 1
Informing the Users
During the interviews, 2 out of 5 participants couldn't see the use and importance of nutrition facts and nutrition details in a sandwich-ordering app. Therefore, in order to encourage users to eat healthily and pay attention to their micro nutritions during the day, I decided to put some facts and tips about food, eating healthy, etc.
CHALLENGE 2
Customization
4 out of 5 participants showed interest in customizing their food online. This way, they could avoid having what they don't like in their wrap or have more of what they want. They could have a control over their food calorie, carb, fat and also avoid eating any food that they are allergic to. I made five categories to choose from: Protein or Veggie, Wrap, Cheese, Toppings, and Sauce. By swiping to the left, they can choose the amount and get more information about the nutrition facts.
CHALLENGE 3
Accessibility Consideration
Adding a nutrition facts feature where the user can see the nutrition details of each ingredient. This would be responsive, and the calorie and nutrition facts at the end will change based on the changes the user makes during the ordering process. This will help people with special diets, food limitations, and people with diabetes to be aware of what exactly they are eating.
I used color to highlight critical information and calls to action visually. In addition, I ensured that the text and background contrast was sufficient to meet WCAG criteria.
​
Style Guide
Using a gentle gradient made up of warm hues felt ideal for Wrapper's identity. When combined with the green, the orange makes consumers feel cheerful and strikes a beautiful balance between calming and uplifting. Finally, asap is the font of preference for the app. Because it delivers a consistent character width across all styles and gives the brand a more reliable, approachable, and friendly vibe, I thought this typeface worked best for the app.
Colors
Type
Buttons
Logos
Takeaways
Working on Wrapper was enjoyable and rewarding as a wrap and healthy food enthusiast. As my first project, I defined pain points, interacted with users, and always had them at the center of my attention. I learned that the design process is iterative, and I must redo many steps to get the best out of my design. I learned a lot about accessibility and inclusivity and considered them throughout the process. I enjoyed moderated studies a lot because I was able to interact with users while testing my design. I became comfortable working with Figma, and I learned a lot about new design rules.