Streamlining Best Buy’s Purchase Experience
Design System Design
2022
Art Direction
Project Overview
Role: Lead UX/UI Designer (Heuristic Evaluation, High-Fidelity Redesign)
Timeline: 2 Weeks
Team: 2 UX Designers
Task: Purchasing a computer with a deal
Hypothesis: Improving clarity and flow will enhance user satisfaction and reduce task completion time.
This project focused on improving the task flow for 'purchasing a computer with a deal' within the Best Buy mobile app. Usability issues were identified and addressed to streamline the process, resulting in a user-centered design that reduced friction and improved clarity for a smoother purchasing journey.
Evaluating the Current Experience
Identifying usability issues using Jakob Nielsen’s heuristics
We conducted a heuristic evaluation on Best Buy’s mobile app using Jakob Nielsen’s 10 Usability Heuristics. This allowed us to identify key usability issues and prioritize areas for improvement.
We chose Best Buy because of its significant user base and digital shopping reliance, making this project both impactful and realistic.
Specifications:
App Version: 16.10.1
Device: iPhone 15, iOS 18.1
Heuristic Evaluation Findings
Uncovering areas of friction and opportunities for improvement
Aesthetic and Minimalist Design
The “Deals” section was cluttered, making it overwhelming and difficult to navigate
Rating: 3 (Major Usability Problem)
Help and Documentation
Users lacked clear guidance on filtering deals or navigating the discount section
Rating: 3 (Major Usability Problem)
Consistency and Standards
Inconsistent UI patterns and terminology disrupted user expectations
Rating: 2 (Minor Usability Problem)
User Control and Freedom
Limited options to undo actions or navigate back caused frustration
Rating: 2 (Minor Usability Problem)
Match Between System and Real World
Product descriptions were unclear, failing to align with user language
Rating: 2 (Minor Usability Problem)
Defining Usability Priorities
Focusing on impactful changes with a prioritization matrix
To ensure meaningful results, we ranked design improvements by severity, feasibility, and user impact. This approach helped us address the most critical usability violations first.
Establishing a Design System
Outlining UI elements to ensure clarity and usability
Before redesigning, we outlined key design elements from Best Buy’s brand guidelines, which also served as design constraints to ensure brand consistency and clarity.
Typeface: SF Pro Display (substitute for Best Buy’s custom font)
Type Scale: Developed a scalable hierarchy to enhance readability
Colour Palette: Leveraged Best Buy’s existing brand colors for continuity
Defining these foundations streamlined the design process and ensured a cohesive outcome.
Targeted Redesign Based on Heuristics
Implementing changes to improve navigation and clarity
Aesthetic and Minimalist Design
Reduced visual clutter in the “Deals” section
Streamlined product cards with clearer hierarchy
Improvement: Aligns with the principle of simplicity for better navigation
Help and Documentation
Added tooltips and guidance for navigating filters and discounts
Improvement: Supports users in understanding and utilizing key features
Consistency and Standards
Standardized UI components and labels across screens
Improvement: Enhances familiarity and predictability within the app
User Control and Freedom
Introduced “Undo” options and clear navigation pathways
Improvement: Gives users more control over their actions
Match Between System and Real World
Replaced jargon-heavy descriptions with clear, user-centered language
Improvement: Creates a more intuitive experience that aligns with user expectations
Measuring the Redesign’s Success
Delivering simplicity, clarity, and a seamless user experience
By identifying and addressing critical usability violations, our redesign aimed to:
Enhance the overall shopping experience
Reduce user frustration with the “Deals” section
Improve visual consistency and navigation clarity
These improvements validate our hypothesis by demonstrating how enhanced clarity and streamlined navigation reduce friction, improve task efficiency, and elevate user satisfaction. Hypothetically, this would lead to an increase in App Store ratings from 4.0 to 4.2, achieved by securing an additional 375 five-star reviews.
