Case Study

Enhance Batik Shirt UX

PROJECT OVERVIEW

The Batik Shirt Website Redesign project aimed to enhance the overall user experience by improving navigation, branding, product pages, cart pages, product explanations, collections pages, and the integration of apps. Our goal was to create a seamless and engaging shopping experience that better reflects the brand's identity and boosts user satisfaction and conversion rates.

THE CHALLENGE

The existing Batik Shirt website faced several challenges that hindered user engagement and sales performance:

Complex Navigation: Users found it difficult to navigate the website, leading to frustration and high bounce rates. Inconsistent Branding: The website's branding was not cohesive, which diluted the brand's identity and recognition.

Cluttered Product Pages: Product pages were cluttered and lacked clear information, making it hard for users to make informed decisions.

Inefficient Cart Page: The cart page was not user-friendly, resulting in abandoned carts and lost sales.

Unclear Product Explanations: Product explanations were vague, causing confusion and hesitation among potential buyers.

Disorganized Collections Page: The collections page was poorly organized, making it difficult for users to find desired products.

Limited App Integration: The website lacked effective integration of apps that could enhance user experience and streamline the shopping process.

THE GOAL

Create an upgraded product page that enhances the current product page, focusing on improved design, user experience, and key product highlights.

Simplify Navigation

Success will be measured by improved user flow, reduced bounce rates, and higher time spent on the website. 
Users will find it easier to explore the website, locate products, and complete their shopping journey.

Strengthen Branding

Success will be indicated by a cohesive and visually appealing brand presence across the website.

Users will have a stronger recognition of the brand identity and feel a deeper connection to the brand.

Enhance Product Pages

Success will be demonstrated by clear, well-organized product information and visually appealing layouts.

Users will have a better understanding of product features, benefits, and make informed purchasing decisions.

Improve Cart Page

Success will be measured by a user-friendly cart page that reduces abandoned carts and increases completed purchases.

Users will experience a smooth and efficient checkout process.

Clarify Product Explanations

Success will be indicated by detailed and easy-to-understand product explanations.

Users will feel confident in their product choices, leading to higher satisfaction and reduced return rates.

Organize Collections Page

Success will be measured by an organized and intuitive collections page that enhances product discovery.

Users will find it easier to browse and select products from various collections.

Integrate Useful Apps

Success will be demonstrated by the seamless integration of apps that enhance user experience and streamline the shopping process.

Users will benefit from additional features and tools that make their shopping experience more enjoyable and efficient.

DESIGN PROCESS

We use Double diamond to understand users and identify existing problems and solutions.

Discover

Define

customer problems

Specific customer problem

Develop

Deliver

potential solutions to these customer problems

feasible solutions to these customer problems

What are the problems?

Divergent

Convergent

What are the solution?

Divergent

Convergent

Gather data, understand demand and or problems.

Screening analysis
Personal exploration of the app.
Desk research
User interview
User personaEmpathy map

Narrow scope, focus to specific problem(s)

Pain points

Explore possible solutions, design the user interaction

Define constraints,
visualize interface

DISCOVER

Screening Analysis

To do this I did a more detailed understanding of the brief and it can be concluded that

Big Idea

Conducting a thorough Screening Analysis was essential to identify critical user needs and refine the website experience. Our goal was to create a seamless and intuitive shopping journey that aligns with user expectations and enhances overall satisfaction.

Essential Question

What are the primary usability challenges users encounter?How can we improve website design to strengthen brand identity?Which elements contribute to high bounce and cart abandonment rates?How can product information and collections be organized for better user navigation?What apps and features can enhance functionality and user engagement?

Challenge

Addressing user frustrations with navigation, branding inconsistencies, and inefficient product pages required precise analysis. Our focus was on optimizing every aspect of the website to deliver a cohesive and compelling user experience.

Research Objective

Understanding User

To analyze and determine optimal design enhancements and feature implementations that elevate user engagement and conversion rates across the Batik Shirt website

GUIDING QUESTIONS

To find the pain points and features needed by users, we compiled questions for the research objective and we used for conducting desk research & user interview with 3 people whom we asked to try out Ageless hair landing page.

How would you rate your experience navigating our website to find Batik Shirts? What aspects could be easier or more intuitive?

In what ways can we improve the product pages to better assist you in comparing different Batik Shirt styles and making informed purchase decisions?

FINDINGS & HIGHLIGHTED PAIN POINTS

Our research identified several key findings and highlighted pain points:

Navigation Complexity: Users found it challenging to navigate the website effectively, particularly when tracking orders and collections.

Brand Identity Consistency: Product pages were cluttered and lacked clear information, making it hard for users to make informed decisions.

Product Information Clarity: The cart page was not user-friendly, resulting in abandoned carts and lost sales.

Cart and Checkout Friction: Product explanations were vague, causing confusion and hesitation among potential buyers.

App Integration Opportunities: The collections page was poorly organized, making it difficult for users to find desired products.

These findings underscore the need for strategic improvements in navigation, branding consistency, product information clarity, and seamless integration of user-friendly features to enhance user satisfaction and drive conversion rates on the Batik Shirt website.

IMPROVE NAVIGATION

Many “dummy” navigation links on the navigation menu contained filler pages with no action or products instead of those with actual value.

Instead of directing users to many places that the business cannot satisfy the users on, the new menu redirects the initially cluttered focus to one pinpoint focus, the business’s main objective — sales of the batik shirt collection, and providing value/answering question.

Before

After

IMPROVE NAVIGATION

Implemented brand color consistency

Logo change to meet price expectation

Before

After

IMPROVE NAVIGATION

Remade product images to be more professional

Refined overall page design, feel, and consistency
Turn features into benefits, and be more informational where it matters

Before

After

Before

After

CART PAGE

Custom coded, so there is more room for bugs. For example, as shown in the before image,

Page cart was changed to slide cart to lessen the load time between adding to cart and arriving at cart. It also allows for a much more seamless experience for the users to continue browsing other items, making a multiple-item purchase more effortless for potential customers.
The next 3 out of 7 website orders after this change had at least 2 items in the order, compared to the 3 out of 16 website orders before the change.
The cart change’s effect is also positive in other aspects: In the previous 14 days before the change, there were 8 Add-To-Carts, 0 reached checkout, and 0 sales. In the immediate 14 days after the change, 15 Add-To-Carts, 11 reached checkout, and 6 sales. Evidently, the cart-to-checkout friction has been reduced substantially; where users now feel much more comfortable in proceeding toward the sale.
There are other elements within the cart that go into using the cart to assist buyer’s confidence, such as free shipping reminder, positive cart title, and more.

Before

After

PRODUCT EXPANSION

Before, there were only long sleeves available.

Our market research has shown that short-sleeved batik is equally, if not more, favored by the general consumers.
We added short-sleeved batik shirts to accommodate market demands.
As a result, the next 6 out of 7 orders following the expansion had included at least one(1) short-sleeved batik shirt. This suggests that the expanded catalog played a considerable factor in improving the consumer interest, or add to cart rate.

Before

After

COLLECTION PAGE

We collapsed the content section below into an expandable section only when the visitor wants to read more.

When people click “Mens”, they’re expecting to see products for men, not extensive background information about it. This is backed up by the results of session replays, where we noticed a lot of users bounced after scrolling down the content.

Before