top of page
Stayin Alive App
01
My Story
This was the first design exercise I completed while enrolled in a UX/UI course. I was very excited to work on this project and improve my design skills. I'm presenting a case study and designing an experience in which users can find, order, and pick up fresh, healthy drinks/food with the option of translating.
Client - Project for Practice (No Client)
My Role - UX/UI Designer
Timeline - 5 Weeks, September 2022
Tools - Figma, Photoshop, Principle, Paper-Pen-Pencil
Responsibilities - Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design
02
Project overview
Stayin Alive is a Drinks/Food maker located in the suburbs of a metropolitan area Stayin Alive strives to deliver healthy, specialty drinks and side dishes. They offer a wide spectrum of competitive pricing. Stayin Alive targets customers like commuters, customer who order in their own language and workers who lack the time on ability to prepare a food.
The product
The problem
Busy workers needed group orders, commuters lack the time necessary to prepare a meal and Immigrants with language difficulties.
The goal
Busy workers needed group orders, commuters lack the time necessary to prepare a meal and Immigrants with language difficulties.
03
Understanding the user
-
User research
​
-
Personas
​
-
Problem statements
​
-
User journey maps
​
-
Storyboard
​
-
Competitive audit
04
User research
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 Early Interns and Students who are frequent buyers in cafes through apps. This user group confirmed initial assumptions about Stayin alive Cafe customers. Other user problems included obligations, interests, or challenges that make it difficult to order through a mobile app.
User research: Pain points
Time
Interns and students value their time and expect deliveries on time.
Accessibility
Platforms for ordering food are not equipped with assistive technology.
Information
Architecture
Text-heavy menus and other content in apps are often difficult to read and order.
DESIGN
Customer wants to Increase capacity and speed up food ordering,payment and delivery.
05
Understanding the user
I created four user personas based on the user interviews and survey to help make design decisions:
Problem Statement
Problem statement: Joseph is a recent Immigrant student who needs Order coffee and food in a restaurant where he can have many translation options because He won't find any difficulties while ordering or out running errands.
06
User journey map
07
Storyboard
![UX Design Certificate - Storyboard [Template] (1).jpg](https://static.wixstatic.com/media/788b9a_fe081bb25ebd4195aa89b9de16867b80~mv2.jpg/v1/fill/w_960,h_540,al_c,q_85,enc_auto/UX%20Design%20Certificate%20-%20Storyboard%20%5BTemplate%5D%20(1).jpg)
![UX Design Certificate - Storyboard [Template].jpg](https://static.wixstatic.com/media/788b9a_c2dcfe2ad44742f798cc1d0fedb400e7~mv2.jpg/v1/fill/w_960,h_540,al_c,q_85,enc_auto/UX%20Design%20Certificate%20-%20Storyboard%20%5BTemplate%5D.jpg)
Competitive Audit
08
Starting the design
-
Paper wireframes
​
-
Digital wireframes
​
-
Low-fidelity prototype
​
-
Usability studies
​
​​
09
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
10
As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research.
11
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of building and ordering food, so the prototype could be used in a usability study with users.
View
Usability study
12
Usability study: findings
Users want to order drinks and snacks quickly.
Users want more customization option.
User wants a detail order summary option.
Translation option was useful for most of the users.
Users want option to edit the order items.
User wants a detail order summary option with customization option.
13
Refining the design
-
Mockups
​
-
High-fidelity prototype
​
-
Accessibility
​
​​
Mockups
14
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
The home screen's top button allows you to translate everything into the desired language.
15
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for ordering Drinks/Food and checkout. It also met user needs for a pickup or delivery option as well as more customization.
View
Affinity diagram
Accessibility considerations
16
Access was made available to customers who were ordering but were having language difficulties by including a translation option for each available language.
Used icons to help make navigation easier.
To make the design more understandable to all users, we used comprehensive graphics for drinks and meals.
17
Brand Identity
Brand Name
Drink
Straw
Logo
Onboarding Screen
17
For a more enjoyable experience, view in full-screen mode.
17
Going forward
-
Takeaways
​
-
Next step
​
​​
Takeaways
18
Impact
Users of the app are given the impression that Stayin Alive Drinks/Food is seriously considering how to suit their demands.
What I learned
When creating the Stayin Alive app, I discovered that the first concepts were just the start of the process. Each version of the app design was influenced by usability tests and user input
17
Next steps
Conduct additional usability testing to confirm that the problems users encountered have been successfully resolved.
Conduct more user research to determine any new arears of need.
teration of High – Fidelity from the research
Let’s connect!
Thank you for your time reviewing my work on Stayin Alive app! If you’d like to see more or would like to get in touch, my contact information is provided below.
bottom of page