HomeWorksAbout meLinkedinResumeContact

Outcome

19.32% increased revenue per visitor with higher average order value and 10.14% increased conversion rate.

Highest revenue in history during Click Frenzy 2024

User’s rating increased 18%

Customer support calls & Tickets got reduced

My Role
UI/UX Design
User Research
UX Workshops
Design Delivery
Tools Used

Hotjar

Miro

Figma

Userlytics

Jira

Backstory

Williams' e-commerce conversion rate has been steadily declining, and the site hasn't been updated since 2019. This has led to a surge in customer support calls, with users struggling to place or manage orders, leading to frustration and a poor shopping experience.

↑ Before

Kickoff & Goal alignment

During the kickoff meeting, I discovered Williams is 2019-built e-commerce site was outdated with bad user experience that lead to conversion rate drop, unnecessary customer support calls and tickets.
The business needed a scalable solution for Munro’s other sites, making this redesign a crucial step forward. We aligned our goals for the MVP on our first realise.

Aligned Goals

1. End-to-end redesign of Williams' e-commerce site for a better user experience.

2. Optimise key touchpoints to boost conversion rates.

3. Reduce customer support calls and ticket volume.

4. Create a scalable solution for Munro’s other sites.

Defining Success metrics

Once we aligned our project goals, we worked with stakeholders to define success metrics. While revenue and conversion rate were key, we also considered long-term internal and external metrics for sustained growth such as: User survey NPS, Feedback from customer support etc.

Technical limitation on A/B Testing plan

User Research

What would cause conversion rate drop?

In order to answer this question, I need to look up the most common reason in the footwear industry. After a quick browse on multiple sources. I end up a summary of various reasons to see if it's marry up any of the later findings.

What do our users think of our experience?

Curious about our users' thoughts on our e-commerce experience, I set up a Hotjar survey on our site.
To allow users time to interact, the survey pops up after 120 seconds (from the homepage to the product page or product page to checkout).
The questions are pretty broad as I am not sure which parts need to look into further.

How is your experience with <Functionaility> today?
[If Negative] - What are your furstration?
[If Positive] - What do like about <Functionality>?
How can we improve <Functionality> for you?

↑ Current Survey responses

Early responses indicated key areas needing attention: Filters, Cart & Checkout, Account, and Find in Store.

How our user interact our e-commerce exepirnce?

Observing how customers interact with our e-commerce site provided valuable insights. I reviewed Hotjar recordings of both desktop and mobile sessions, focusing on Cart & Checkout, Filters, and My Account—areas that received the most negative survey feedback.
From the recording, I've discovered some initial insight such as:
1. User seems tap the wrong filter selection often.

2.User have to scroll all the way up each time to use filter.

3. User going back and forward between cart&checkout.

4. User seems spent sometime to locate their purchased items

↑ Hotjar Recording

How is our data of our e-commerce site?

To uncover more insights, I reached out to our DA and dug into 6 months of Looker Studio data. I've discovered more interesting insights:

1. Checkout drop-off rate is more than 45%

1. Over 70% of users are on mobile.

2. With nearly 90% sorting product listings from lowest to highest price.

3. Interestingly, the "Find in Store" and "Store Selector" buttons received more clicks than "Add to Cart," showing a preference for in-store pickups, though these features led to frustration, as reflected in poor survey responses.

4. Users mostly check orders and rewards., and most land directly on the product listing page, skipping the homepage altogether.

↑ Extracted GA Data (6 Months)

What does our user says about our current sites?

For more in-depth insights, I've also collaborated with the marketing department to recruit existing customers for interviews, balancing valuable insights with budget constraints.
We sent screening questions via Google Forms through our brand's EDM, and once responses were collected, we manually screened the candidates.

During the interviews, we asked users about their shopping habits, decision-making process, and frustrations—both general and specific to our site. We also explored why they remained returning customers despite these issues. The responses aligned with our previous research but revealed some interesting findings:

1. Users can't edit product details once in checkout, and the shopping bag detail disappears.
2. They adjust filters when faced with ugly shoe options in the results.
3. Users struggle to track their shipments and often need to call for updates.
4. They want to see more products per screen with less scrolling.
5. Missing or forgot to put in their promo code, have to call customer care to cancel.

Does our finding marry up with the common reasons of conversion drop?

The findings from our research align with the common reasons for the drop in conversion rate, reinforcing the urgency for the business to address these issues.

Defining

User Persona

Based on the customer segments provided by the marketing department and our previous research, we created our user persona - Laura.

Laura is a 42-year-old full-time nurse with an average income, living in Narre Warren. She’s married with children and has a busy lifestyle balancing work and family. She typically does some in-store shopping near her workplace after her shifts.

How does the current user journey looks like?

Combining the previous findings, I collaborate with the stakeholder to come up a journey map which allow the team have a deeper understanding of what our user is facing at the moment.

Current user purchasing flow
↑ Current Journey map: From google search to post purchase

Service Blueprint & User Flow - Filter

I further examined how the current filter works both on the front-end and back-end. I organised a small workshop with the devs to map out our existing flows.

↑ Current User flow: Adjusting filter
↑ FE & BE Flow: Adjusting filter

Problems Statement

As a busy nurse, Laura's limited browsing time on mobile makes the current flow frustrating. Revising filters requires multiple clicks, and duplicated information from product page to checkout adds unnecessary effort. Out-of-stock products, especially when a nearby store has them, and having to call the store, only increase her frustration.

1. Difficult to manoeuvre filter selections.
2. No alternative action when no product results.
3. Unnecessary steps between product page and checkout.
4. Users often miss adding promo codes.
5. When stock is available in-store, users must visit the store for offline purchase (uncertain if it’s still available upon arrival).
6. Lack of order details.
7. Hard to track shipments.
8. No loyalty information visible.

Problems to Insights

1. How might we provide a better way for users to revise their filter selection while browsing products?

2. How might we provide an alternative action when there is no filter/search result?

3. How might we reduce the user's buying process?

4. How might we guarantee users the item is still available when they arrive?

5. How might we provide better information for post-purchase users?

Ideation

It was a fun part with the stakeholders since we've identified our problems.

Solutions

After discussing with the team, we finalised solutions that could potentially address the problems at each touchpoint.

Priortisation

We all liked the solutions, but we couldn’t ship them all at once. Many required significant design and development effort, and with limited resources, a phased approach made more sense. Even if we could launch everything together, it would be a major shift for users who are accustomed to the current flow, creating a learning curve. Gradual implementation would also help us identify issues more easily if something went wrong.

UX Roadmap

After discussing the impact and development effort with the team, we prioritised our solutions into a UX roadmap.

↑ UX Deliverables Roadmap

Sketching

Based on the preferred solutions from our ideation session, we can start sketching exercise(Crazy 8) to visualise how our solution might take shape.

User Testing

After multiple rounds of design review and iterations with the stakeholders, we ended up a few controversial variations that we can validate via user testing and potentially discover some more insights for design iterations.

Post User Testing Design Iteration

We've gained deep insights through observations, which can contribute to our future design iterations.

MVP

After multiple rounds of design review and iterations with the stakeholders, we have our MVP for 1st drop which that could potentially improve our user’s online purchasing journey.

Final Design

After consolidated the user testing result, I've iterated the design based on user's feedback. Due to urgency of go live, the production version is a before iterated version.

Image of Stripe payment processor website homepage

Design Delivery

Before handing the design to developers, creating a design handoff document is a good idea. Since every developer works, thinks, and codes differently, it's best to discuss it with them first.
After discussions with devs and QAs, we identified 4 key areas for the handoff document.

Responsive design breakpoints with different states

↑ Example: My Account - My Orders
↑ Example: My Account - My Orders

Notes for different scenarios and edge cases

↑ Example: My Account - My Orders

User flow for main interations

↑ Example: My Account - My Orders

A/B Testing Plan

Since we separated different touch points into individual small project and release incrementally,  so we can setup our A/B Testing plan page by page on each touchpoint.

Overall Outcome

Conversion Rate & Revenue

The redesigned online purchase journey has outperformed the existing one in an overall A/B test with a 19.32% increased revenue per visitor with higher average order value and 10.14% increased conversion rate.
We also got the highest revenue in history during Click Frenzy 2024

User's Rating

User’s rating increased 18% from 3.4 to 4.1 out of 5, although we got the most compliant from user is we don’t have their size which require a different project.

Customer Support Calls & Tickets

According to the feedbacks from customer support team, calls & Tickets got reduced significantly, which lead to reducing hiring costs on customer support department.

Back to top

Works

School Works