Cocktail Recipe App Design
For a class project, I was tasked to design a digital product of my choice. The solution had to address a real-world problem, be technically feasible, and be designed on any platform. I decided to create a mobile app for adults to discover diverse cocktail recipes with intuitive instructions. ​
DURATION
CLASS
4 Weeks,
March 10 - April 16, 2020
Entrepreneurship 390
Digital Product Design
Solo UX/UI Designer
ROLE
Scrum Framework
Throughout this project, I utilized Pivotal Tracker to follow Agile workflow to make different epics and stories for the necessary tasks, giving points to each element. This allowed me to stay on top of what was urgent and to be proactive about the different steps of the project. This was my first introduction working with the Scrum framework.
Screenshot from Pivot Table project
Problem Statement
Adults strive for an efficient way to get access to a variety of creative and clear -instructed cocktail recipes to bring excitement into their drinking preferences.
Audience
The audience for Mixy is anyone over the age of 21 hoping to get more creative with their bartender skills or just create some variety in their drinking habits. This app is especially appealing for people hoping to spend less money at bars, or anyone who is looking to get more creative for the next event they are attending.
Primary persona example
Use Cases Brainstorm
-
Create and develop an account
- View a drink of the day
- Get a daily notification to check out a recipe
- Filter recipes by a variety of different preferences
- View photos, ingredients, instructions and reviews
- Save recipes you want to go back and try
- Rate and upload photos of your creations
- Follow along with interactive and descriptive directions to create drinks
Initial Sketching
I initially drew out different screens to better understand how the different use cases would be designed. I took some inspiration from Spotify's search page, HelloFresh's step-by-step instructions, and Tasty's filtration design. Navigating the flow of the search, discover, and filter functions were the most difficult to figure out.
Original sketches based on use cases
Initial Feedback
After generating my sketches, I met with my professor to discuss some concerns about my product. I was unsure if I should have the app run on user-generated content or the company's uploads only. He emphasized the importance of not getting lost in feature overload and instead focus on the most important use cases. In addition, we discussed how to best set up the flows so the different functions are visual and prototyped. Based on this advice, I decided to prioritize the search tab as a way to categorize different drink options in addition to the filter.
Ideate
Then, I used Adobe XD to mock up and prototype the different screens of the App. Check out the prototype below:
VISUAL DESIGN
I chose the light blue color with navy and beige highlights with palm tree graphics because I wanted the app to evoke a vacation vibe. The app should feel like a nice break with some playful tones.
LANDING PAGE
The landing page is focused on the "drink of the day" so every time users enter the app, they are welcomed with a new drink and other recommendations. This way content always feels new to the users.
SEARCH PAGE
The search page is inspired by Spotify's design in the way the page functions with a search bar but also includes categories users can browse through. It is a fast way to find a certain type of drink.
FILTER
Filtering is one of the most important features of this app because users can quickly search based on preferences. This modal was designed so users can easily select the tags and can add their own as well.
GUIDED DIRECTIONS
Users can click "let's mix" and walk through interactive directions with images to go step by step through the instructions. This helps users to best follow the instructions and feel achieved when they reach the done page.
NOTIFICATIONS
Users can choose to turn on a daily notification so they can always be reminded of the drink of the day. I included this feature because it helps increase retention to the app and provides personalization .
MRD for Mixy
Market Requirements Document
After creating the prototype, I created a market requirement document to pinpoint the problem statement, target market, and how the product solves user issues. This document provides a quick and efficient way to get the overview of the product.
Final Feedback
I was able to run a few usability tests of the app on fellow students in my class. Most were able to navigate the app effectively and understand how to use the functions. The main feedback I got was to prototype more of the screens so the prototype functions more closely to how the app would behave. Overall, I received positive feedback and my peers said they would find an app like Mixy useful and engaging.
Future Changes
This project lasted only one month, so I had to work quickly through the design process. Looking back, I would have preferred to do some user interviews and more competitive analyses about other recipe apps to better understand the market. I wanted the app to be driven by user needs, but I did not have the time to do an in-depth analysis of their preferences through interviews. In addition, if I had more time to develop Mixy I would have liked to develop the profile section to make the app behave like a social media with user-generated content.
Key Takeaways
Avoid Filter Overload
Organizing filters
I found through this project the importance of focusing on the primary use cases, and avoid getting carried away with additional features that are not fully developed. It is better to have fewer functions that work smoothly, rather than an app with superfluous features that are not fully developed.
I struggled to pinpoint the relationship between my browse content page, filter, and search bar. It was a challenge finding a way to have all these features co-exist on the same frames. In the end, I found it helpful to map out the flow ahead of time to see if all the locations of these features made sense.
