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

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

To find best practices, I examined Baymard reports and competitor websites to see how they handle main page and navigation issues, and compared these with Baymard’s recommendations. All insights are collected here.

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

  1. Prepare documentation: task draft, Figma structure, component ideas, process presentation

  1. Conduct team strategy sessions

  1. Start following the strategy

  1. Collect feedback

  1. Work with components and styles

DESIGN PROCESS

  1. Define objectives: business goals and user needs

  1. Delve into the problem: research and analysis

  1. Create a concept: wireframes

  1. Set a scope

  1. Track the implementation process, assure the quality

  1. Transform the selected concepts into detailed designs, most complex yet popular case – first

  1. Create or use components

  1. Cover all cases, include errors and empty states

  1. Identify and cover edge cases

  1. Track the implementation process, assure the quality

  1. 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

maria.sidorova@qua-design.com

© 2024

Hey! I'm Masha, I'm a Product Designer

have a look at my portfolio on your desktop device