Introduction
A user-centric recipe app with key features to Edit recipes, as well as Upload recipes by Photo or URL, to fully customize the app to each user.
Project Overview
The Cocktail Library is a recipe app for iOS and Android that allows users to save all their cocktail recipes in one app.
Users collect cocktail recipes in so many places: from their favorite magazines to a distillery’s blog to their favorite bartender’s Instagram caption.
To alleviate user frustration with trying to remember where to find a recipe, or having to manually enter a recipe, they can now save all their recipes in one place with these two convenient in app features: Upload Recipe from Photos or Upload Recipe from URL.
Project Role
In this project, I created the UX and UI design, as well as supplied all photography used in The Cocktail Library and this Case Study.
Competitor Analysis
I conducted Competitor Analysis from the most popular cocktail apps in the Apple Store to better understand what features were missing that users needed from competitor apps.
Low Fidelity Wireframe Sketches
Mid Fidelity Wireframes
Using Apple’s Human Interface and Google’s Material Designs guidelines, and with my Competitor Analysis research and User Research/Personas in mind, I designed native app wireframes for iOs and Android.
User Feedback
In order to follow the UX Best Practices you are not the user and prototype before you deliver a real product, I created a Mid Fidelity Prototype to test the design with real users through Usability Testing.
It was important that the design follow UX Best Practice keep things simple and consistent by being intuitive. I knew I needed target users to be able to navigate a key User Flow without needing instruction.
Their feedback was implemented into the High Fidelity design.
The High Fidelity Wireframes for the final UI Design incorporate UI Best Practices from Nielsen - Molich's Ten Usability Heuristics for User Interface Design, such as:
Visibility of system status by keeping users informed on such screens as the loading recipe screen, when a user clicks the Upload Recipe.
User control and freedom by allowing users on to add and remove recipes to their Saved Recipes.
Aesthetic and minimal design by not cluttering the design with anything that would compete with the user’s attention from completing their goals.
iOS Prototype:
Android Prototype:
Click Here for InVision High Fidelity Mobile Android Prototype
Retrospective
What Went Well:
My concept to include features for Upload, Edit, and Save cocktail recipes was well received in user feedback.
To ensure users could find exactly what they were looking for quickly, I implemented some key features. I used design consistency by selecting icons familiar to users. In addition, I used standard gestures, and kept the design and navigation very minimal and consistent, while integrating a strong organizational system with diverse categories into the Home and Saved Recipes screen, as well as into the Search screen’s Filter feature.
During the prototype phase, users found the app to be easy to navigate and accomplish their tasks, so the UI Design was successfully intuitive for both iOS and Android users. Users also really liked the color palette and font selection as well.
Overall, my process for UX and UI Design has gotten quicker, and I’m able to think and design intuitively for the user’s needs.
What Can Be Improved:
As an iOS user, designing for Android was a learning curve to adjust my design to Material Design guidelines and components. I became more familiar with Material Design, and am now confident designing for Android users.
I wanted to try using XD for the prototype, which was a bit of a learning curve after I had used InVision previously. I’m glad I took the time to learn prototyping in XD, so I can streamline my process to one app in the future.
While users liked how easy it was for them to navigate to what they needed, they still wanted some extra features and a more interesting design, so I incorporated these into the design. I’ll be leaning heavily onto user testing and feedback for my future designs.