💼 Open to work as Full-time and Freelancer . contact

In This Casestudy

Introduction Problem Research & Synthesis Design Decision Final Design Outcome Closing Notes

Go back to work

4 minute read

Introduction

Timeline

Jul' 24 - Aug' 24

Client

Newme

Tools Used

Figma

Newme, a fashion brand focused on Gen Z, recently redesigned its shop page to improve usability, organization, and engagement. This case study explores the reasons behind these updates, the key improvements made, and the impact on user behavior and conversion rates. The goal was to enhance the overall shopping experience, optimizing for Gen Z's browsing and fast-paced shopping habits.

My Contribution

I was accountable for user flows, explorations, interactions, visuals, and prototyping. Conducted user research alongside my PM using methods such as user interviews, and online study to address both user behavior and attitudes.

Collaborators

1 x Product Manager
4 x Engineers

Problem

The previous shop page had several usability and engagement issues that negatively impacted the shopping experience and conversion rates. Key challenges included:

Cluttered Interface: Large black buttons and excessive text made navigation difficult.

Poor Navigation: Sorting, filtering, and category selection were unintuitive, frustrating users.

Ineffective Promotional Space: Important deals and fast delivery options were not highlighted.

Confusing Bottom Navigation: Users struggled to find essential features.

Size Availability Issues: Users left when their preferred size was out of stock.

Limited Product Discovery: Similar items were only visible on product detail pages.

Unclear Pricing & Discounts: Discount percentages and original prices were not emphasized.

Overemphasis on Product Titles: Product names took up excessive space but were not a priority for users.

Promo Code Confusion: Users expected to copy discount codes from the banner but couldn't.

Hidden Color Variations: Users overlooked different color options due to their lack of visibility on listing pages.

Goal

The primary goal of this redesign was to enhance the user experience, increase engagement, and improve conversion rates. The focus areas included:

Success Metrics

Enhancing navigation and accessibility to improve browsing.

Optimizing product discoverability with better layout and recommendations.

Highlighting discounts, promotions, and fast delivery to drive sales.

Reducing cognitive load by simplifying UI and decision-making clarity.

Ensuring a seamless mobile experience for frictionless shopping.

Research

Frontstage: What We Can See

When we observe people booking flights, we notice unpleasant side effects and interesting user hacks.

Searching for the right flight is extremely stressful.
High prices, limited availability, artificial scarcity, a plenitude of options, as well as an ingrained penchant for cost traps and loopholes.

The flight gets more expensive with every search.
Opaque pricing and the feeling of being on the airline’s hook make travelers suspicious of cookies and tracking.

Flights are like looking for a needle in a haystack.
Alone, the route from Frankfurt to Honolulu offers 8,777 different flight combinations. To get a handle on what’s on offer, travelers turn to third-party providers like skyscanners to combine different routes or Google to find offers from the surrounding area and many more.

Long waiting times are nerve-wracking.
Prices are recalculated, and availability is checked for every search query. In our test, a query usually takes 10 seconds. This always leads to long waiting times in the observed search behavior.

The quest for the best flight deal.
The most important decision criterion for a flight is still the price. But every search parameter influences it. The lack of price communication reinforces the feeling of intransparency.

The feeling of having paid too much for the flight.
When it comes to flights, most travelers are confronted with “from” prices. However, these are only available on certain flights and in limited numbers. What if such flights are not available? This leads to negative anchoring: what seemed affordable at the beginning now seems all the more expensive.

Backstage: What We Don’t See

It takes a look behind the curtain to find out that there are numerous technical and business constraints that have an enormous impact on flight search. Rather than years of usability engineering, the search experience is largely determined by third-party booking systems, dynamic pricing, and cost-per-request mechanics.

3rd Party Booking System.
Behind most flight searches is a reservation system running called Amadeus. This is where millions of customers purchase their tickets. Amadeus is mostly responsible for which data points are available and how the interface is designed. Airlines use those systems and can only exert limited influence on a better solution.

Dynamic Pricing.
Dynamic pricing is used to set the price of a product based on current market conditions. Prices fluctuate in real-time based on current data. This includes data on customer booking behavior, competitor airline prices, popular events, and a variety of other factors that affect product demand and necessitate price adjustments.

Cost per request.
In most cases, searches are charged per request. To keep costs down, airlines want to reduce search requests. This leads to avoiding both pre-emptive and iterative queries.

Reframing The Problem

Flight searches are structured in such a way that it is highly unlikely that a customer can find a suitable flight straight away because it presupposes that the traveler has entered all price-relevant information before submitting the search query.

The dilemma: this price-relevant information affects availability, travel time, and service. At the same time, they are factors for the traveler that can be changed depending on the result and personal preferences and flexibility. As a result, travelers develop their own user hacks to compare different search parameters and weigh the trade-off between price and convenience.

How can we give travelers a better flight search experience? Our pitch is The Balancing Act: a guided dialogue between traveler and airline. Strap in — we’re taking a deep dive.

The Flight Search Redesign:
Introducing The “Balancing Act”

What makes a search successful? It’s an increasingly important question in the age of global travel and its limitless possibilities. We focus on finding your personal solution. It puts the traveler, their occasion, and their budget at the center of the interaction and looks at how well the flight offer fits. To do this, we fundamentally change the tailoring of the interaction with travelers. We break down the search form into individual tasks and change the sequence of interactions. This allows a more balanced approach between friction and progress.

Task

The task is to find a suitable flight. We see that this usually takes several attempts and is achieved with the help of different search platforms and flight brokers. This shows that we are clearly in a weighing phase when searching for a flight. Different flights, routes, and times are weighed against travel planning criteria as well as personal preferences and limiting factors of the traveler.

Intention of use

The intention of use is a key determinant of interaction. The better we tailor our interface to the intention of use, the higher the probability that the interaction will be successful. Research findings show that usage intentions for digital applications can be assigned to three categories: “Act,” “Understand,” and “Explore.” In our case, we can clearly attribute the flight search to the “Act” usage intention: users have a specific task and want to make progress in completing that task as quickly as possible. Flight search is characterized by a clear goal. Travelers want to get an overview of the available flights to find the best option for their specific solution space. They take a structured approach and selectively change search parameters to uncover inconsistencies and explore the limits of what is available.

User Interviews

To improve International booking conversion by 200- 300 bps (relative) from SRP → Charged led us to conduct 20+ interviews with different type of travellers to find out what’s wrong and how we can do better.

Flight Search Platforms and Preferences

Explore preferences for flight search platforms e.g., Skyscanner, Google Flights, MakeMyTripS.
Understand criteria like cost, flexibility, and UI design influencing platform choices.

Booking Process and Collaboration

Analyze collaborative aspects in the booking process e.g., sharing details, comparing prices.
Investigate how collaboration impacts decision-making during flight booking.

Desktop vs. Mobile Usage Trends:

Identify user preferences regarding desktop or mobile usage.
Understand factors influencing choices, such as real estate and user interface.

Vacation Patterns and Planning

Explore diverse vacation patterns and planning approaches.
Understand considerations like leaves, budget, and destination preferences in international travel plans.

RESEARCH :International flight User interview

Explore the conversation and unearthed insights from our research aimed at gaining a deeper understanding of international flight users and the potential benefits these findings could offer us.

Research & Synthesis

To better understand these issues and develop effective solutions, we conducted extensive research using multiple methodologies.

Research Questions

What are the biggest pain points users face while shopping for clothes online?

What factors influence their purchase decisions?

What makes an online shopping experience smooth and enjoyable?

How do users interact with sorting and filtering options?

Do users prefer product images, descriptions, or pricing details when browsing?

How much does fast delivery influence purchase behavior?

What causes drop-offs in the shopping journey?

What role do product recommendations play in user engagement?

How do users perceive discounts and promotions?

How do users react when their preferred size is unavailable?

How important are color variations in the decision-making process?

User Interviews

We conducted in-depth interviews with frequent online shoppers to understand their frustrations and expectations.

Key takeaways

Users prioritized size availability, clear discounts, and fast delivery.

Most users ignored product names until they were ready to purchase.

Users wanted alternative recommendations when their preferred size was unavailable.

Many shoppers missed color variations due to their lack of visibility.

Sorting and filtering were underutilized because they were not easily accessible.

Heatmap Analysis

Sorting and filtering had only a 12% engagement rate, indicating usability issues
Users left the page 35% of the time when their size wasn't available, showing the need for better stock tracking
Promo banners received 25% of user clicks, but users expected to copy discount codes automatically
Product colors were mostly ignored until the final selection stage
Users spent 45% more time on products with clear pricing and discount tags

Competitive Benchmarking

To ensure our design aligned with industry best practices, we conducted a competitive analysis of top-tier fashion platform UX across web channels. This benchmarking helped us identify key features that improve user experience and conversion rates.

Prioritizing visual hierarchy over excessive text to enhance readability and focus.
Clear discount labels and pricing breakdowns to make promotions more transparent.
Persistent visibility for sorting and filtering tools to improve usability and product discovery.
Faster checkout options such as one-click payments and autofill features to reduce drop-offs.
Prominent size availability indicators to help users make purchase decisions faster.
Enhanced recommendation algorithms that suggest similar or complementary products, increasing engagement.
Mobile-first design principles to cater to the browsing habits of Gen Z shoppers.

Ideate & Downselect

From our research, we identified five core objectives that would enhance the overall shopping experience and address key user pain points:

Better Information Hierarchy – Streamline product details to reduce cognitive load and enhance readability while maintaining crucial information.
Simplified Navigation – Improve sorting, filtering, and category browsing to enable seamless product discovery.
Clearer Discounts & Delivery Information – Ensure promotional details are prominently displayed to increase engagement with deals and fast shipping options.
Modern Aesthetic – Adopt a sleek, Gen Z-friendly interface that balances visual appeal with functional usability.
Personalized Shopping – Leverage data-driven insights to provide tailored recommendations and enhance user engagement.

These objectives formed the foundation for the redesign strategy, guiding our decisions to create a more intuitive and high-converting shop page.

Challenge

Challenge 1: Areas of improvement

I"m in the process of evaluating the key segment that requires primary attention for funnel improvement, and I"m identifying the initial priority to enhance conversion rates specifically within the international flight booking funnel.

Here, we prioritized "Needs changes" based on research and current statistics, indicating it's where the maximum drop in the funnel occurs. Our initial focus in the first phase is to address and work on this aspect.

Challenge 2: Understanding Competitors

I've thoroughly studied key competitors and leading players in the international flight booking sector to analyze the information they include in their data sets. This investigation aims to extract valuable insights regarding the type of data they prioritize and discern key takeaways that can inform and enhance our approach.

Competitors analysis: SRP page

We aim to understand their design, functionality, and user experience to gain insights for optimizing our own SRP. By examining content, layout, and features, we seek to identify best practices and areas for improvement to enhance our users' booking journey.

Challenge 3: Ideate and Down-phase

We're aiming to make important information clear at the tuple level for users. In our brainstorming session, we discussed what details should be primary (must-see) and what can be secondary. This helps us design with the user in mind, especially considering information from providers like Amadeus.

Information at the segment level that needs to be displayed is crucial for users to choose the right flight.

Airline name
Airline number
Aircraft name
Aircraft information
Airline operated by
Class
Departure time
Arrival time
Departure city
Arrival city

Arrival city
layover information
Terminal number
Airport name
Total price
Total duration
Layover duration
Terminal change
Airport change
Transit Visa

Nearby Airport
Baggage information
Same price element
Type of refund options
Time zone
Distance from nearby airport
offer visibility
Seat left
Price cut

In our discussions, we engaged with various stakeholders, including product managers, business representatives for visibility insights, and developers, to understand the information available from Amadeus, our service provider for airline data.

In tuples

Primary Decision- making data point

Secondary Decision- making data point

Total Price/ Coupon callout

Departure time/ Arrival time and date

Departure / Arrival airport

No. of layovers

Type of layover

Airline Name

Total duration

Seatleft callout

Layover airport(s)

No baggage

Travel visa requirement

Terminal change

Airport change

Refund type

More options of same price

Price breakup

In expanded tuples

It is crucial to emphasize the reiteration of the expanded section or the ability to view detailed information on a tuple. In the case of international flights, transparency is vital for users to choose the right ticket confidently. Unfortunately, clicking on "view details" was causing a problem by increasing page depth, making it challenging for users to compare flights and contributing to a drop-off in user engagement.

Segment’s airline name

Segment’s airline logo

Departure airport name(code)

Departure time

Leg duration

Arrival time, day

Arrival airport name(code)

Stopover information

Stopover duration

Stopover airport name(code)

Terminal change

Airport change

Travel visa requirement

Nearby airport callout

Baggage checkin/cabin

cancellation and amendment info

Design Decision

Card design

The previous product card design hindered discoverability by only displaying the price, cut price, product name, size, and delivery type. It lacked essential decision-making elements.

The new design enhances usability by introducing ratings, product tags, a wishlist icon, and clear size indicators. It also incorporates a consistent layout with improved visual balance aspects. These additions improve product visibility, encourage engagement, and streamline the decision-making process, ultimately leading to higher conversions.

Filter and Quick sort

The previous filter design was intrusive, occupying a banner rather than a functional tool. Additionally, it grouped options under Sort, Category, and Filter which lacked clear interaction and made product discovery less effective.

The redesigned filter system features a more intuitive and visually distinct, allowing users to easily access and apply filters. Quick filters like categories, price and brand are prominently displayed and more refined options are tucked into dedicated, leading to better engagement and a smoother shopping experience.

Improved Category & Navigation Structure

Previously, categories were placed in the header, making them less prominent and harder to navigate. To enhance discoverability and personalization, a dedicated home navigation structure was implemented, featuring curated collections based on user preferences and occasions—adapting their shop page to their specific needs.

With 'Trends' and 'Occasion' based collections updating regularly, users always have fresh, relevant options, increasing engagement and making shopping more personalized and effortless.

Improved category and navigation structure

Mid-Scroll Filters for Enhanced Discoverability

To improve product discovery and streamline the browsing experience, we introduced mid-scroll filters that allow users to refine their selections without leaving the shop page. These filters remain visible as users scroll, enabling them to apply filters on-the-go while remaining in view, while scrolling through products. This enhancement ensures that users can find relevant items faster, reducing friction and making the shopping journey more intuitive.

By keeping filters accessible mid-scroll, we eliminated the need for excessive navigation, ultimately leading to higher engagement and faster decision-making.

Improved Filtering System for Better Product Discovery

The previous filters were limited to Color, Price Range, Size, and Delivery Type, restricting users' ability to refine searches effectively. The design also lacked intuitiveness, resembling a form rather than an interactive filtering tool.

In the new iteration, we expanded filter options to include Pattern, Clothing Material, Occasion, New Arrivals, Fit, Discount, Neckline, Closure Type, and Sleeve Type. This allows users to find exactly what they're looking for more efficiently, improving engagement and reducing drop-offs. The redesigned layout enhances visibility and ease of use, making filtering a seamless part of the shopping experience.

Improved filtering system with expanded options

Final Design

Shop page

Enhanced Product Cards

Added ratings, product tags, wishlist icon, coupon applicability, color variations, and additional offers for better decision-making.
Improved pricing visibility with a clear distinction between original and discounted prices.

Revamped Navigation & Category Structure

Introduced a dedicated bottom navigation for Trends, Categories, and Occasions to personalize the shopping experience.
Trends updated monthly with curated selections like Summer Trends, Corsets, Gingham, and Workwear.
Categories remained comprehensive with Tops, Bottoms, Dresses, Co-ords, Jackets, and more.
Occasion-based selections like Vacation Ready, Date Outfits, and Holiday Party to help users shop based on events.

Mid-Scroll Filters for Seamless Browsing

Implemented scrollable filters within the product listing page for quick selection and comparison.
Enabled real-time filtering adjustments without navigating away from the product grid.

Optimized Product Discovery & Engagement

Enhanced visibility for discounts, fast delivery, and size availability to reduce drop-offs.
Streamlined sorting and filtering to improve discoverability and user engagement.
Integrated personalization elements for a more curated shopping experience.

Filter & Sort

Enhanced Filter Experience

Previously, filters only included Color, Price, Size, and Delivery Time, limiting choices.
The new system adds Pattern, Clothing Material, Occasion, New Arrivals, Fit, Discount, Neckline, Closure Type, and Sleeve Type, improving personalization.
Mid-scroll filters enable quick selections without navigating away.

Improved Sorting System

The old design had basic sorting options.
The new system introduces Lowest Price, Highest Price, Best Sellers, New Arrivals, Trending, and Fastest Delivery, making product discovery faster and more intuitive.

Outcomes

The redesigned interface resulted in significant improvements in user engagement and conversion rates. By enhancing product discoverability and streamlining the shopping experience, we were able to create a more intuitive and enjoyable platform for users.

Closing Notes

Gen Z users value efficiency and visual appeal above all else in their shopping experiences. Mobile optimization is non-negotiable for reaching this demographic effectively. Personalization significantly impacts engagement and conversion rates. Social proof elements are powerful conversion drivers for younger shoppers. Continuous iteration based on user feedback is essential for maintaining relevance.