a website redesign project

I was drawn to the baby clothing website by its organic fabric, charming prints, frequent promotions, and competitive pricing.

However, the browsing experience fell short. The cluttered homepage and confusing navigation left me feeling overwhelmed; the ineffective filter system turned exploring the extensive product range into a lengthy and frustrating process. 

This led me to envision a more user-friendly redesign of this promising brand's website, focusing on improving item discoverability and smoothing out the add-to-cart journey to boost sales.  

#Figma

challenges & objectives 

   challenges

   redesign objectives

The website's cluttered navigation and filter system hinder an effective shopping journey, leading to customer confusion and frustration. This inefficiency risks customers overlooking desirable items or abandoning their carts entirely due to the challenging experience. 

The redesign aims to

• reduce cognitive overload and prominently direct customers to the latest promotions.
• enables intuitive and easy location of targeted products, smoothens the add-to-cart journey,
•  and recommends matching products to enhance sales.

   navigation bar

   solutions

Despite a vast range of products, the website's navigation bar, cluttered with over 15 items, creates cognitive overload and fails to efficiently direct customers to what they're looking for.

• Divide the navigation bar into distinctive blocks, simplifying the layout to reduce cognitive load and simultaneously highlighting the latest promotion. 
• Use drop-down menus to guide customers to well-organized sub-categories, presenting a clear information structure. 
• Use added signage to highlight the latest promotions.

   homepage

   solutions

falls short in effectively showcasing promotions or directing customers on where to begin their shopping journey.

• The homepage, saturated with bright colors and lacking a clear information hierarchy, leads to complicated navigation and information overload. 
• The blending of themed and price promotions complicates differentiation, potentially leading customers to overlook certain deals. 
  
• A lack of clear guidance for customers seeking particular product categories makes it challenging to initiate their shopping journey. 

1.  introduce a signature strip to prominently showcase the main promotion.
2. Implement a "Shop by Size" strip that enables quick finding of age-appropriate clothing and creates a distinct separation between themed promotions for better differentiation. 
3. Arrange similar price deals into uniformly sized cards to ease browsing and clearly indicate their status as secondary promotions.
4. Organize regular item cards into a themed strip to differentiate them from promotional items, ensuring ease of browsing and preventing them from being overlooked due to information overload. 
   
   Visual Harmony and Brand Consistency

• use neutral background colors to showcase color-rich products, preventing visual overload. 
• apply the brand color scheme for typography, buttons, and banners to ensure consistency and cohesive visual identity. 

   filters & navigation

   solutions

• The redundant and perplexing filters impede efficient product discovery. 
• Customers frequently experience disorientation and a sense of loss while navigating the website. 

1. Implement  breadcrumb navigation

• to enhance navigation clarity and reduce clicks and time needed for page-to-page navigation.
  

2. Optimize filters. 

• Streamline filters into four primary categories: size, styles, colors, and materials. The first two focus on functionality, while the latter two highlight selling points. 
• Refined filters will enable efficient product discovery, support targeted shopping, and help decrease cart abandonment.  
  

3 & 4. Highlight selling points 

• group color variations of the same clothing styles together to streamline browsing, reduce choice overload, and enable efficient comparison. This approach highlights the variety the website offers. 
• include material details in the product card to emphasize a key selling point: the organic fabrics available on the site. 
   

  personalized expereice

  add "You may also like" section

The absence of personalized recommendations not only renders the shopping experience laborious, and prolonged, but it also leads to missed opportunities to effectively upsell and cross-sell products. 

• to recommend matching items to customers. 
• this feature provides convenience for customers, enhances product discovery, and increases sales and average order values. 

  inefficient cart addition button

  introduce a "Quick Shop" button 

Despite a vast range of products, the website's navigation bar, cluttered with over 15 items, creates cognitive overload and fails to efficiently direct customers to what they're looking for.

• to reduce friction in the purchasing process
• promote multiple purchases
• enhance the mobile shopping experience for busy moms
• and cater to regular customers familiar with the website's offerings. 

conclusions 

• This project serves as a learning experience in pinpointing problems and devising solutions within e-commerce website design. 
• I aim to demonstrate how a user-centered design approach can significantly enhance customer satisfaction and drive business performance. 

San Francisco Bay Area

© Hanhan C 2023
Ux designer