Fashion Monger
Improving the browsing and checkout experience for a Retail Product to increase sales conversion.
Role : UX Designer & Researcher
Timeline : 1 Week Design Sprint
Team : Individual
Tools : Figma, Miro
Problem
Data shows in an e-commerce platform, 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. Additionally, 70% of users who place an item in the cart do not purchase. Most of the time users abandon the cart at the registration page.
Overview
With the hit of Coronavirus Pandemic, going to shopping malls was next to impossible in 2020 due to lockdown around the world. People preferred buying online than offline. According to survey online shopping will increase tremendously in next 5 years. Hence addressing the common hurdles faced by the users is paramount.
Fashion Monger is a Voguish , trustworthy and contemporary fashion platform which sells women’s clothing & accessories on their mobile-web experience. They offer very latest trends and best products related to women’s fashion. Now they need to enhance their browsing and checkout experience to greatly improve their product’s usability & sales conversion.
Business Goals
Improve the conversion from browse to completion of checkout to increase revenue on the product’s mobile-web experience.
Target Audience
-
16 – 40 years old
-
User base is women who are mostly active on laptop and phones
-
Good earners
-
They love fashion and styling.
-
They want to stay updated in fashion trends and make a statement wherever they go.
Market Research
I started my journey with quantitative research (surveys) followed by qualitative research (user interviews). Some highlights of user surveys are shown below.
Affinity Mapping
I interviewed 6 users who loves to shop online to understand their common pain points and frustrations.
Affinity Mapping or clustering exercise helped me in grouping information collected during the interviews to find out certain themes in the data.
_page-0001.jpg)
Experience Mapping
The interview insights resulted in an experience map depicting generic touchpoints of user pain points and frustrations during online shopping cycle.
Proto Personas
I could roughly categorize my users into two kinds of groups : One who loves to spend on fashion and the other who is more calculative and frugal but loves fashion.
Describe your image
Describe your image
Describe your image
Competitor Analysis
Once I identified the pain points and problem areas of users, I started researching about the competitors ( both direct & indirect ) and tried to find out how they have solved the similar problems. Discovery phase is time consuming however I still made sure that apart from home grown brands, I peruse some International Global Brands as well like Chanel, Gucci, Prada, etc.
How Might We
-
How might we help customers stay in trend with fashion ?
-
How might we encourage customers to shop with appropriate buying guide ?
-
How might allow a smooth onboarding & checkout process for the users without overwhelming them ?
-
How might we keep the customers informed throughout the shopping experience ?
Solution
After the discovery phase, I started brainstorming some ideas to solve the HMW questions. I compared all the competitor products and tried to understand how they study user buying patterns with the help of google analytics and heatmaps. Apart from security & good UI, proper navigation, smooth guest checkout & exciting offers such as AR services were required to boost engagement. Moreover both web and mobile experience was required. Monetization of the product was essential along with best in class usability.
User Flow Diagram
In order to implement the solution and ideated concepts I had to create a workflow where I categorized some of the key phases of a online shopping cycle and how the interaction would take place in the product.
Describe your image
Describe your image
Describe your image
Describe your image
Wireframes
After the discovery phase , I had good enough ideas and explorations to ensure that users find a purpose while visiting Fashion Monger. The platform should excite the users in a certain way that they would love to browse and buy the items with a hassle-free checkout experience. Hence I quickly turned my ideas into clickable wireframes.
Usability Test 1 Results
I went ahead and tested the clickable wireframes with the users who happened to provide some value added feedback. Some of those findings are shared below along with my solution towards fixing it.
-
Users could not find body shape details on the items listing page.
-
Capturing address for first time users.
-
Confirmation page required
-
Wishlist option absent for Try On Jewellery
-
Same Backdrop for pictures to keep consistency
-
Designing for zero state.
-
What happened after Placing order. Checkout flow missing.
-
How should I know if this website is secured ?
Brand Guidelines
_page-0001.jpg)
Design Opportunity 1
How might we help customers stay in trend with fashion ?
Homepage
-
I decided to include those topics in the homepage that would interest the users. For example Bestsellers Trending or Popular or Pinterest Picks are few of those options that intrigued the users and prompted them to browse.​​These sections offered them latest content in fashion.
-
The footer provides quick help and support features in case a new user is exploring Fashion Monger. It also features AR for trying on jewellery.
Pinterest Picks
-
The Pinterest Picks offers them the latest and trending products. Each item card displays informed solutions like few left , ratings, reviews and what body shape the product will look best on.
-
Good amount of filters to narrow down the search has been added.
-
Most of the time its mobile first approach however I designed web first because I wanted to exhaust all the ideas onto a larger canvas first and then adjust those features into small device experience because I could think freely in web first without having to get bothered by device size.
-
All important features like categories on top, Bestsellers, bottom navigation with quick options like wishlist, 3D try on are placed in the mobile experience.
-
Various categories were adjusted together in a compact view of the mobile experience.
​
​
-
They are designed in a way that its
looks more approachable
and intuitive.
-
I have given maximum flexibility to the users to apply search either by clicking a photo or voice search.
-
Also the search view offers a history view of recently searched items as well as showing the trending products at the same time.
Design Opportunity 2
How might we encourage customers to shop with appropriate buying guide ?
Buying Guide
-
Usually in an e-commerce platform, users find it very difficult to match a certain item for example like a dress with a handbag. So to achieve this they open several tabs and switch between them. Hence to solve this problem I thought of including a video of a fashion expert in item detail page.
-
It will help the users in understanding the product and receiving expert advice on how to style the product with other cloth items or accessories like makeup, jewellery, handbag or footwear.
More Reviews More Reward Points
-
In the detail item page, the customer reviews is further going to help the users decide whether to add the item in the cart or not. Moreover Fashion Monger encourages the user to write a review for the item they bought so that once review is approved they get reward points
-
Bringing AR in the Jewellery section was essential to bring delight among users as well as engage them to boost sales conversion.
Design Opportunity 3
How might we allow a smooth onboarding & checkout process for the customers without overwhelming them ?
-
The Login screen remains the same
irrespective of the type of user - Returning or New user. Also New users would be able to guest checkout ie; they can browse the entire collection, add to cart and then while checking out they would be asked to enter mobile no.
-
The use of progress tracker gives clarity to the users about the shopping status.
-
There is clear call to action for placing the order with complete cost breakup.
-
I have also provided gift card options in the checkout screen. This gives them an added advantage if they are buying for someone else.
Capturing Address
-
For New Customers, ideally shipping & billing address is captured during the checkout process.
-
I have designed an intuitive and clean form design to capture new customer's shipping address and a default view for returning customer.
Describe your image
Describe your image
Describe your image
Describe your image
Unlimited Payment Options
-
For smooth checkout users should be given a flexibility to choose any payment mode such as netbanking, credit/debit card, wallets UPI or COD options. I have addressed zero state for new users.
Design Opportunity 4
How might we keep the customers informed throughout the shopping experience ?
Security is Paramount
-
During the checkout phase, customers look for secure payment gateway. Hence OTP authentication, secure symbol is essential to win customers trust.
_page-0001.jpg)
Keeping Customers Informed
-
A final confirmation is essential for the user along with link to view the order for future tracking.
Future Scope & Monetization
How might we think of product strategy and growth ?
-
Thinking about the product strategy, the company can grow by collaborating extensively with popular home grown brands, famous Style bloggers and Fashion Stylists. They can also partner with NGOs who can use old clothes sold by customers on Fashion Monger.
-
After conducting one more round of usability testing, I felt that I could further bring some more feature innovation to engage customers & increase revenue.
