LUSH Redesign
Overview
During a team project, we redesigned the Lush webpage to enhance user experience and usability. Using Nielsen's heuristic evaluation, we identified four key issues: visibility of system status, user control and freedom, consistency and standards, and aesthetics and minimalist design. We prioritized these issues using a matrix to focus on the most critical ones first. Our redesign aimed to provide clearer system feedback, better user control, consistent design, and a more aesthetically pleasing layout. The new webpage offers a more seamless, intuitive, and satisfying user experience.
Timeline: 1 Week, 2024
Role: UX/UI Designer
Tools: Figma, Canva, Paper & Pencil
Platform: iOS
Team Goal
We aim to optimize the usability of LUSH's website by addressing issues identified in our heuristic evaluation. Our design improvements align with LUSH's values and brand identity, ensuring consistency while enhancing the chosen task flow for a better user experience.
Why Heuristic Evaluation is important?
Conducting a heuristic evaluation is crucial for identifying and addressing usability issues early in the design process, making it a cost-effective method. It leverages expert insights to uncover problems, improves user satisfaction, guides redesign efforts, enhances accessibility, and supports consistency. This process ensures the website meets user needs and expectations, resulting in a more intuitive and enjoyable user experience.
LUSH’s Evaluation
Our evaluation methodology combined Jakob Nielsen’s 10 Usability Heuristics of User Interface Design with a severity scale ranging from 0 to 4, where 4 signifies a usability catastrophe. Through this process, we identified numerous areas within the website's design that could be improved.
Visibility of System Status - (Severity: 1)
Category chips hover states are very faint
User Control & Freedom - (Severity: 1)
Category chips disappears when scrolling downwards
User Control & Freedom - (Severity: 2)
login page with no apparent exit route
Consistency & Standards - (Severity: 2)
User profile (Smiley) icon was not recognized as the location to log into user account
Aesthetics & Minimalist Design - (Severity: 1)
Large images are overwhelming and causing prolonged scrolling
Task Flow
To illustrate the process a user would follow to log in and add an item to their shopping bag, we developed a detailed task flow. This task flow highlights the redesigned interfaces and features, showcasing improvements in the overall user experience. It outlines each step a user takes, from accessing the login page to successfully adding an item to their bag, emphasizing how our enhancements simplify and streamline these interactions. Through this visualization, we aim to demonstrate the user-centric approach and the benefits of our redesign in creating a more intuitive and efficient shopping experience.
Brand Guidelines
When redesigning LUSH's website, we adhered to its brand guidelines by maintaining consistent typography, colors, and icons. The typography reflects LUSH's natural and handmade ethos, enhancing readability. We used the brand’s bold blacks, whites, and vibrant colors for instant recognition and to highlight important elements. Consistent, well-designed icons improved usability and added to the visual appeal. This approach ensured the redesign stayed true to LUSH's identity while enhancing the user experience.
Redesign LUSH
Visibility of System Status - (Severity: 1)
Category chips hover states are very faint
Solution:
Make hover state more visible by adding a fill
User now knows which chip category they are hovering over
User Control & Freedom - (Severity: 1)
Category chips disappears when scrolling downwards
Solution:
Create a sticky top navigation bar
Categories now stay in place when the user scrolls down the page, allowing them to navigate more freely
User Control & Freedom - (Severity: 2)
Login page with no apparent exit route
Solution:
Provide the user a return to home button
User can now easily exit back to the home page
Consistency & Standards - (Severity: 2)
User profile (Smiley) icon was not recognized as the location to log into their account
Solution:
Include “Log In“ text with the smile icon to align with platform conventions
User can now easily identify the location to log into their account
Aesthetics & Minimalist Design - (Severity: 1)
Large images are overwhelming and causing prolonged scrolling
Solution:
Decrease the size of the images and create 2 block sections for image and text
User now has smoother navigation, making it faster for them to access the categories
Key Learnings
Brand identity and usability heuristics are crucial in redesigning task flows. Consistent use of typography, color schemes, and icons ensures a seamless user experience, reinforcing the brand’s personality and values. A strong brand identity fosters recognition, trust, and differentiation from competitors. Usability heuristics simplify navigation, provide clear feedback, minimize errors, and enhance accessibility, making the user journey intuitive and satisfying. Prioritizing these elements creates a cohesive, engaging, and user-friendly website that aligns with the brand's core values.