Selected project
Making it easy to get the dress
Confidential information is excluded per my NDA. This case study reflects my views, not Lucy in the Sky's official viewpoints
DELIVERABLES
Design strategy
Design system
Product design
PLATFORMS
Web
Mobile web
USERS
Gen Z, living primarily in US and Canada
B2C
LINKS
CASE
Successfully redesigning the main and catalogue
DELIVERABLES
UX/UI design
UX audit
Secondary research
UX writing
Components
Stakeholder interviews
Team workshops
TEAM
Product designer (myself)
C - level executives
Product manager
3 web front-end developers
3 back-end developers
RESULTS
Bounce rate dropped, average session duration increased, end-to-end work took about 3 months
HYPOTHESIS
Delving into problems
I had two main inputs leading to concerns about the main page and the navigation performance:
User feedback
Comments and reviews indicated that some percentage of users found the website's navigation unclear and non-intuitive.
High bounce rate
Our data revealed that a significant percentage of users visit the site and leave almost immediately.
At the start of the project, most of our clients were first-time buyers. The main page was the main entry point, receiving more traffic than product pages and listings.
CURRENT SOLUTION AUDIT
Current solution vs best practices
I started the audit by diving into session replays. I closely examined videos of user interactions, focusing on their experience on the main page. I tracked their journeys and analyzed scroll maps and heatmaps to gain a comprehensive understanding of user activity over a period of one month.
Current solution audit highlights several critical issues
Critical are those issues that block user experience. The full audit is available here.
Cognitive load
The hero section is overcrowded with a video banner and an unconventional banner preview, which users rarely interact with.
Discoverability
On mobile, only about 20% of users discover the burger menu, and just 2% attempt to click on the non-clickable banner title. Desktop users interact with the header in 30% of cases, and with less than 0.5% of the other elements.
Lack of feedback
Desktop users were leaving listing page because the banner was hiding actual product cards.
The best practices and research insights
Bounce rate
20% of users leave websites because they misunderstand the site's purpose. Solution: ensure the hero section immediately conveys the site's purpose and value proposition. Feature a diverse range of product types (at least 40% of the catalog) to clearly communicate the site’s scope.
Ads on the homepage are generally perceived negatively. On mobile devices, in particular, ads can cause overview, distraction, and interaction issues, gently highlight discounts.
Navigation efficiency
A clear horizontal navigation bar, a prominently displayed search bar, and direct links to key product categories and sections, avoiding hidden menus on desktop, will ensure easy access to key navigation options on the main page.
Cognitive load
Avoiding carousels along with autorotation, especially on mobile, will help users concentrate on valuable content.
SCOPE
Where do we start?
Research identified key issues across the entire user flow, prompting us to focus on improving the main page, navigation, catalogue and listing sections.
FINAL DESIGNS
Introducing solution
To successfully solve the current solution issues and apply best practices, we needed to understand the audience's needs and behaviors.
Special occasion shopping
Our strategy was shaped by insights from our sales data, we knew that customers frequently visit our store for special occasions, that have seasons.
Private-label
Also, according to GWI, Gen Z buyers are particularly deal-conscious. Furthermore, brand familiarity is not as important to them as price; 45% are open to choosing a cheaper private-label product over a more expensive brand-name item.
SCENARIO 1
Find the perfect look for any special occasion in one click
The hero section features a prominent, eye-catching visual with a clear primary call-to-action (CTA).
The correlation between clicks on the key CTA and category cards depends on the content. The solution effectively captured user interest in special occasions.
SCENARIO 2
Access the catalog at any time
On desktop, navigation features a top menu with essential categories. The sticky position ensures it remains accessible as users scroll.
On mobile, a top hamburger menu and a more accessible floating action button (FAB) help users easily explore and understand the available items.
STEP 4
Before vs after
After conducting an A/B test comparing the old and new solutions, the results demonstrated that the new solution was more effective. Users who interacted with the new solution had a lower bounce rate, longer session times, and more efficient item discovery, leading us to decide to roll out the new solution to all users.
New
New hero section clearly conveys that this store features its own brand and regularly offers discounts. This approach aligns with our target audience's preferences, ensuring they understand they can always find valuable deals on our site.
Old
The logo was barely visible against the moving background, navigation was difficult to spot, main category UX patterns were unconventional, and there was cognitive overload due to excessive content.
New
The new navigation design has clear, easy-to-recognize thumbnails for each occasion, making it simple for users to find what they need. On desktop, it uses the full viewport, so no scrolling is required.
Old
Poor visual hierarchy: Important elements are not properly emphasized, leading to questionable usability on desktop as users need to click excessively. Poor real estate management: Some users need to scroll to see all options.
New
We began using static content instead of carousels, avoiding autorotation on mobile to ensure users don't miss valuable content. Additionally, advertisements in the catalogue navigation are tailored to match the selected item types for a cohesive browsing experience.
On desktop the items are visible right after the listing page is loaded, providing clear feedback.
Old
Users struggled to reach the products due to invisible navigation elements, unconventional UX patterns, cognitive overload, poor visual hierarchy, and inadequate system status feedback.
STEP 5
What is next
Filters and search
The next step in improving the user flow is to redesign the search feature. At the moment of this project, users saw all the filters as soon as they opened the search. However, filtering should still be available for those exploring entire categories to help them find what they need faster.
Redesign the FAB
Based on the data, we see that current FAB (Floating Action Button) is not used that much, so we can experiment with the FAB burger menu or consider removing it altogether.
Enhance item selections
Additionally, we can analyze user behavior to enhance item selections and improve the conversion rate from the main screen.
MY ROLE
As a senior product designer,
I was in charge of product design and design strategy
DESIGN STRATEGY IMPLIMENTATION
Prepare documentation: task draft, Figma structure, component ideas, process presentation
Conduct team strategy sessions
Start following the strategy
Collect feedback
Work with components and styles
DESIGN PROCESS
Define objectives: business goals and user needs
Delve into the problem: research and analysis
Create a concept: wireframes
Set a scope
Track the implementation process, assure the quality
Transform the selected concepts into detailed designs, most complex yet popular case – first
Create or use components
Cover all cases, include errors and empty states
Identify and cover edge cases
Track the implementation process, assure the quality
Evaluate and Iterate
DESIGN SYSTEM
How we created scalable solutions quickly?
I suggested to use well known framework that guides the creation and implementation of consistent, and scalable design solutions across our digital products.
On the web site the devs suggested to use headless components, so I could create patterns and components in accordance to the brand and the best practices.
Bellow is an example of component organisation
Thanks for your time
Feel free to reach out to me if you have any questions or suggestions. I'm always open to feedback and happy to help with your projects
