Top Shelf
Alcohol Review Android App Redesign
Overview
Top shelf aims to be one of the first mobile applications that lets alcohol enthusiasts review, keep track, and discover a variety of alcoholic beverages from around the world. The creator of Top Shelf wanted to redesign the app to elevate its user experience and visual aesthetics.
Role
Freelance UI Designer
Tools
Adobe Illustrator, Figma
Link
Figma File
Approach
As the UI designer for Top Shelf, I began by conducting a thorough evaluation of the existing interface to identify its strengths and weaknesses, complemented by a competitive market analysis. Based on that research, I developed low-fidelity wireframes that were iteratively refined into high fidelity prototypes. To ensure a cohesive and developer-friendly design, I also established a comprehensive design system that served as the blueprint for the developer.
Analysis of Existing App
The Top Shelf app, initially based on Material Design, provided a consistent user experience and familiar navigation. However, its similarity to other Material Design apps diminished its unique brand identity.
Competitive Market Analysis
In the alcohol review app market, Vivino, Untappd, Distilld, and Cocktail Flow are prominent players, each catering to distinct audiences. While Vivino boasts a vast wine database, Untappd emphasizes community engagement, Distilld focuses on whiskey, and Cocktail Flow offers cocktail recipes. However, a gap exists as none provide comprehensive reviews across all alcohol types, underscoring the opportunity for a versatile review app.
Wireframes
Low-fidelity wireframes were the starting point for the Top Shelf app design. They quickly mapped out key features, allowing for easy iterations and early problem identification. These wireframes set the stage for the high-fidelity prototypes that followed.
Logo
The new logo was designed for simplicity and impact, serving as the cornerstone of the brand. Its color is consistently applied throughout the app, setting the tone for the overall user experience and reinforcing the brand identity.
Colors
The color palette for the Top Shelf app was carefully selected to enhance both aesthetics and usability.
Prototype
Following the low-fidelity wireframes, high-fidelity prototypes were developed for the Top Shelf app. These prototypes offered a detailed and interactive representation of the final product, complete with colors, typography, and animations. They served as a critical tool for user testing, enabling us to validate design choices and make data-driven iterations before development began.
Testing
In the usability tests for the app redesign, "Think-Aloud Protocol" was used to gain real-time insights into user behavior. Task success rate were measured to identify and fix usability issues, ensuring the redesign was both visually appealing and functional.
Result
The Top Shelf app underwent a significant redesign, transitioning from Material Design to a more unique and brand-aligned interface. This redesign was sent to the developers, meeting key objectives in both aesthetics and usability. Metrics from usability testing showed improved user engagement and task success rates, confirming the redesign's effectiveness in enhancing the user experience. Future iterations will aim to further optimize features, performance and personalization, all informed by user feedback and behavior.
