Context
The Cocktail Library is a user-centered iOS and Android app that helps users organize cocktail recipes from various sources in one place. To reduce the frustration of tracking recipes across magazines, blogs, and social media, the app includes key features like Upload from Photo and Upload from URL for easy customization and quick access. I led the UX and UI design and provided all original photography for the app and 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.
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 Testing and 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.
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.