The Drink
A new way to drink, share and learn.
A new way to drink, share and learn.
PRODUCT
App
ROLE
UX/UI Design/Research
SCOPE
1 week
CONTEXT
There are plenty of meal recipe apps on the market but dessert drinks have had a huge boom in popularity as of recent.
Many users on social medias have been sharing their creative ideas in the form of large paragraphs lost in a sea of users’s social media bookmarks.
That's where The Drink comes in.
CONTEXT
There are plenty of meal recipe apps on the market but dessert drinks have had a huge boom in popularity as of recent.
Many users on social medias have been sharing their creative ideas in the form of large paragraphs lost in a sea of users’s social media bookmarks.
That's where The Drink comes in.
PRODUCT
App
ROLE
UX/UI
Design
SCOPE
1 month
OVERVIEW
GOAL
Create social media for drink recipes.
Form an equitable experience for an audience ranging in digital literacy.
Develop a straightforward yet engaging format for content layouts.
Create social media for drink recipes.
Form an equitable experience for an audience ranging in digital literacy.
Develop a straightforward yet engaging format for content layouts.
ROLE
UX/UI Research and Visual Designer
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
UX/UI Research and Visual Designer
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
CHALLENGES
Create a platform allowing exclusively drink-related content that delivers digestible info.
Recognizing digital literacy greatly differed between audiences.
Create a platform allowing exclusively drink-related content that delivers digestible info.
Recognizing digital literacy greatly differed between audiences.
EMPATHIZE
Who might need this?
Who might
need this?
To ensure this is an equitable product, I created personas that would potentially have issues with mobile app use without additional features that assist them.
To ensure this is an equitable product, I created personas that would potentially have issues with mobile app use without additional features that assist them.
Trey (he/they)
Age: 15
Aspiring Influencer
Student
From a city that doesn’t offer many overseas dessert drinks yet.
Has a vision impairment in his right eye.
Desires to meet others with the same passion for creating recipes as him.
Trey (he/they)
Age: 15
Aspiring Influencer
Student
From a city that doesn’t offer many overseas dessert drinks yet.
Has a vision impairment in his right eye.
Desires to meet others with the same passion for creating recipes as him.
Diana (she/her)
Age: 35
Health Guru
Professional Penny-Pincher
Desires to share healthier alternatives with the world.
Has chronic carpal tunnel from years of creating arts and crafts.
Frustrated in the lack of healthy options in her country and believes theres could be a way to have your cake and eat it too!
Diana (she/her)
Age: 35
Health Guru
Professional Penny-Pincher
Desires to share healthier alternatives with the world.
Has chronic carpal tunnel from years of creating arts and crafts.
Frustrated in the lack of healthy options in her country.
DEFINE
Problem Statement
Problem
Statement
The bookmarking of posts on social media can be messy and is usually not well-integrated as an add-on feature in applications. Individuals who enjoy finding and utilizing recipes discovered on social platforms require an organized space to store their saved contributions, as well as share them on a recipe-focused application dedicated solely to beverages not meme content.
The bookmarking of posts on social media can be messy and is usually not well-integrated as an add-on feature in applications. Individuals who enjoy finding and utilizing recipes discovered on social platforms require an organized space to store their saved contributions, as well as share them on a recipe-focused application dedicated solely to beverages not meme content.
The bookmarking of posts on social media can be messy and is usually not well-integrated as an add-on feature in applications. Individuals who enjoy finding and utilizing recipes discovered on social platforms require an organized space to store their saved contributions, as well as share them on a recipe-focused application dedicated solely to beverages not meme content.
Key User Goals
User Goals
Make recipe posts
Users can swiftly initiate new posts and clear route should exist for users to start, even without much understanding of social media.
Users can swiftly initiate new posts and clear route should exist for users to start, even without much understanding of social media.
Connect with others
Like other social medias, you will be able to interact with your favorite drink-maker as well as connect with others on your favourite recipes.
Like other social medias, you will be able to interact with your favorite drink-maker as well as connect with others on your favourite recipes.
Save recipe posts
Saving and organizing recipes through your personalized account will be simple and easy to navigate compared to other social media bookmarking systems.
Save recipe posts
Saving and organizing recipes through your personalized account will be simple and easy to navigate compared to other social media bookmarking systems.
IDEATE
Competitive Audit
Competitive Audit
Before beginning any designs, I researched for both direct and indirect competitors to the concept of a drink recipe app.
Before beginning any designs, I researched for both direct and indirect competitors to the concept of a drink recipe app.
Takeaways
Takeaways
Personal Account
Specific Service
Each product requires the user to create an account or download an app that will allow them to save recipes or use other functions.
Each competitor specializes in particular elements surrounding food and recipes. One focuses on being a notepad while another focuses on providing meal plans and the last is a article heavy website.
Responsiveness
Each website functions differently from its mobile counterpart, making it less inclusively responsive than a product. They don't account for users without mobile data.
Each website functions differently from its mobile counterpart, making it less inclusively responsive than a product. They don't account for users without mobile data.
Personal Account
Each product requires the user to create an account or download an app that will allow them to save recipes or use other functions.
Specific Service
Each competitor specializes in particular elements surrounding food and recipes. One focuses on being a notepad while another focuses on providing meal plans and the last is a article heavy website.
PROTOTYPING
Creating the experience
Creating the
experience
After determining what features competitors had succeeded and failed with, I went into wireframing. I ultimately looked to design for three things: 1) Convenience 2) Digestibility 3) Accessibility
After determining what features competitors had succeeded and failed with, I went into wireframing. I ultimately looked to design for three things: 1) Convenience 2) Digestibility 3) Accessibility
After determining what features competitors had succeeded and failed with, I went into wireframing. I ultimately looked to design for three things:
1) Convenience 2) Digestibility 3)Accessibility
User Flows
Paper Wireframes
Low-Fidelity Wireframes
Low-Fidelity Mockup
Low-Fidelity Prototype
TESTING
Usability Testing
Usability Testing
After gathering a sample size of five, each varying in digital literacy and age, I performed a usability test on the performance of the product’s high-fidelity design.
After gathering a sample size of five, each varying in digital literacy and age, I performed a usability test on the performance of the product’s high-fidelity design.
Testing Insight
Testing Insight
Assumptions
There were assumptions during the design process where every user would be able to find everything legible with the original font choices and sizes of buttons/text.
Issues
Most of the users were confused that some elements that are typically present in apps was not present in the prototype causing the natural flow of their experience to be disrupted.
More Info
All of the participants indicated that they wanted more information to be provided with their saved drafts in order to know what each post is vs. just looking at a thumbnail.
All of the participants indicated that they wanted more information to be provided with their saved drafts in order to know what each post is vs. just looking at a thumbnail.
Issues
Most of the users were confused that some elements that are typically present in apps was not present in the prototype causing the natural flow of their experience to be disrupted.
Assumptions
There were assumptions during the design process where every user would be able to find everything legible with the original font choices and sizes of buttons/text.
MATERIALIZE
It's all coming together
It's all coming together
High-fidelity mockup
Stylesheet
Highfidelity Prototype
Final Product
Final Product
WRAPPING UP
Takeaways
Takeaways
Each project is a learning experience whether its a new skill within Figma or a new element of user testing that could be incorporated into future projects. I found that this particular passion project helped me learn a bunch:
Each project is a learning experience whether its a new skill within Figma or a new element of user testing that could be incorporated into future projects. I found that this particular passion project helped me learn a bunch:
Iteration and testing gives a ton of information like pain-points and user needs.
Gained more knowledge on equitable design based on user feedback and realized I have many assumptions about what I think the user needs.
Learned how to create a more friendly platform for all levels digital literacy.
Iteration and testing gives a ton of information like pain-points and user needs.
Gained more knowledge on equitable design based on user feedback and realized I have many assumptions about what I think the user needs.
Learned how to create a more friendly platform for all levels digital literacy.