Dyson
Revamped Dyson Haircare to enhance brand identity.
UI Redesign
Fall 2023
Solo Project
Figma, Adobe Illustrator, AfterEffects, Photoshop
Dyson is a technology leader known for its cutting-edge home appliances and personal care products. This project aims to enhance the website to better showcase Dyson’s innovation, improve user experience, and reinforce its brand identity.
Revamped Dyson’s website to enhance user experience with modern visual design principles, focusing primarily on their haircare section.
Dyson is renowned for its innovative technology but their website falls short of reflecting this. It is basic, lacking in vibrant colors and visual hierarchy, and does not effectively convey the brand’s cutting-edge image or engage users as intended.
Before diving into the design phase, I identified key pain points and analyzed three competitors to understand their solutions to similar challenges.
I analyzed the current website for its effectiveness in presenting information, visual appeal, and user engagement, along with identifying areas for improvement.
Static Design
The website’s static design lacks dynamic elements that could enhance user engagement and better showcase Dyson’s innovative haircare products.
Poor Information Hierarchy and Repetitive Content
The pages are overloaded with information, making navigation confusing. Repetitive sections add to the clutter, making it difficult for users to find and focus on key details.
Off-Brand Colors
Some color choices, such as the green “Add to Basket” buttons, do not align with Dyson’s brand identity, impacting the visual consistency of the site.
Cluttered Footer
The footer is filled with numerous links, creating an overwhelming and disorganized navigation area that detracts from the overall user experience.
The user flow is simple and direct, focusing on ease of navigation and clarity.
I started with the mobile UI design for a more focused approach, simplifying the desktop version. The straightforward flow required only a few screens.
Revamped the homepage by enhancing the visual appeal of the banner by adding aesthetic videos. Used icons in gradient for better visual communication.
Reorganized the category by excluding unnecessary informations. This made the page scroll much shorter. All the information was re-organised to make sense logically as well.
Reorganized and grouped related details together. Utilized color differentiation to guide users effortlessly through the content, improving overall readability and understanding.
Also used interactive features such as clicking on the product part to get to know more information about it.
Added sections such as “You May Also Like,” for users to explore more Dyson products and also color coded each section for better user experience.
Dark mode was introduced to enhance user comfort during night-time browsing. It offers a sleek, modern look while reducing eye strain and improving overall readability.
The design system ensures a cohesive, modern look with standardized components that enhance clarity and adaptability.
Learning from Competitors
Analyzing competitors provided valuable insights into how successful brands tackle design challenges and helped me understand where Dyson could stand out. for attention to detail make it broader
Effective Problem Solving
Defining the problem thoroughly before jumping into the design process was instrumental in developing a solution that truly addressed user needs.
Attention to Detail
Emphasizing consistency and meticulousness in both design system and overall UI elements highlighted how crucial attention to detail is in creating a seamless and engaging user experience.
