PETITE AVE

Redesigning a web solution to decrease drop offs during purchasing stage

My Role

UX Designer and UX Researcher

Project Team

2 UX Designer, 1 UX Researcher / Project Lead

Key Skills

Competitive Analysis, Prototyping, Wireframing, Usability Testing

Tools

Sketch, Adobe XD, Invision, Photoshop, Paper and Pen

Duration

3 Weeks

Deliverables

Website Redesign

Process

DEFINE

The Overview

The Problem

The Deliverables

Petite Ave is a one stop shopping destination (an e-commerce website) for petite sized women. The mission of Petite Ave is to simplify the shopping experience for women under 5'5'' by aggregating petite size clothing from different retailers.

The major challenge faced by the client was that there was high percentage drop off by the customers just before making the purchase. We were asked to find the major reason of customer drop off and design a solution that would cater to the their pain points and overall create a pleasant user experience.

The deliverables decided upon were related to design a smooth checkout process

  • A chart to show the type of body shape. A guide which helps the user to choose the right kind of design and cuts which is suitable to their body types

  • Solution showcasing out of stock / availability of the products

  • Solution to show the shipping cost up and direct as mostly it comes under hidden charges

SOLUTION

A final set of high fidelity designs were delivered along with prototypes, well researched plan and usability test results

Discover

User Persona | Research Methods (Interview, Competitive Analysis, Usability Test, Affinity Mapping, Motivation Factors and Pain Point Factors)

User Persona

Research Methods

User research was quintessential. In order to understand the user needs better, various research methods were used which helped us with great insights to make smooth and hassle free user experience for our users.

Interview

Our start point of the research was by interviewing the CEO of Petite Ave, Vanessa Youshaei. This gave us the basic clarity of some functionalities and needs which the client was looking for. Below are the points and needs mentioned by her during our first meeting with her.

Competitive Analysis

Competitive analysis was done of the other competitor websites which serves petite women. The analysis was done in order to get an insight of the feature sets and the overall user experience. This analysis helped us in figuring out which features are a must have in order for Petite Ave to be a successful brand in the market.


Usability Test and Affinity Mapping

Usability testing  was conducted on the current Petite Ave website. This analysis was done in order to get an insight of the feature sets and the overall user experience. This analysis helped us in figuring out which features are a must have in order for Petite Ave to be a successful brand in the market and also there is decrease in the percentage of drop offs. 

Due to time constraints we were able to find 4 users who were petite and opted mostly to shop from Petite Ave. Tasks given to each participants were as follows:

  • Purchase 3 items and put it into the cart

  • Give an overall feedback on the flow, how intuitive was it to navigate the site

  • The users were told to voice out their opinion on the overall functionality of the current website

Once the insights were collected, all the points were separated from what was liked vs what pain points each of them faced while performing the task. We created affinity mapping for the following

Motivation Factor

Based on all the research done and insights collected, next we analysed what were the factors which contributed to motivation of the users. 

Pain Points

Based on all the research done and insights collected, next we analysed what were the factors which contributed to the pain points of the users.

After the whole research and analysis process was done, we realised the main reasons for the high percentage drop off were the following

  • Some actions lacked clear system feedback (i.e. adding items to the cart)

  • Users found difficulty in finding promotions and discount deals of the brands 

  • Shipping costs and policies involved were unclear to the users

  • Users wanted to know their body type before making the purchase for a good fit

IDEATE

User Goals | Paper Sketches | High Fidelity Mockups

User Goals

In the ideation process we summarized the user goals based on our above research as follows:

  • User wants to know about the deals and promotions upfront

  • User would like to get an overview of the total cost in their cart

  • User would like to know upfront about shipping policies, shipping cost so there are no surprises at the checkout.

  • Users would like to navigate the website efficiently and shop easily

Paper Sketches

Before designing high fidelity mockups, I did a bit of an ideation through paper wireframes to understand the flow better.

Promotion Banner and Pop - Up

Item Added Notification

Body Shape Information

High Fidelity Mockups

SCREENS : Promotion Banner and Pop Up | Item Added Notifications | Body Shape Information

| Size Chart On The Product Page

Promotion Banner and Pop Up
One of the first and major feature which we added to the website was Global Promotion Banner.
This feature was essential for the following reasons:-​

  • Global promotion banner will help the user to view all the promotions and deals on all the brands across the website. This makes it easier and convenient for them to view deals from any page of the website.

  • While we always wanted the users to be updated with the deals and promotions, we also wanted to not be distracting them from their main focus on the website, i.e 'Shopping / checking out the products'.

  • We did not want to give a very flashy ad kind of approach to them. Therefore Global banner solution was perfect idea and it also gives a very comprehensive and efficient view to the users without taking away all their attention when they don't need it.


Item Added Notification
A notification window pop up is a feature designed from the cart tab. Whenever an item is successfully added to the cart, a notification window pop ups by letting the users know that their item is successfully added in the cart. This feature is designed for the following reasons:

  • To create a pleasant user experience having a clear system feedback whenever a user performs an action is crucial and helpful

  • Informing the users that their items is successfully added in the cart gives them a sense of relief and satisfaction that their actions were received successfully

  • Important information details like summary of the items, total cost of the items, shipping cost and also how the user is qualified to get a discount  all these information is included within the pop-up window

  • This approach opens up an honest dialogue with the users which helps them to build the trust with the brand and they also get user friendly experience while shopping on Petite Ave

Body Shape Information
A notification window pop up is a feature designed from the cart tab. Whenever an item is successfully added to the cart, a notification window pop ups by letting the users know that their item is successfully added in the cart. This feature is designed for the following reasons:

  • To create a pleasant user experience having a clear system feedback whenever a user performs an action is crucial and helpful

  • Informing the users that their items is successfully added in the cart gives them a sense of relief and satisfaction that their actions were received successfully

  • Important information details like summary of the items, total cost of the items, shipping cost and also how the user is qualified to get a discount  all these information is included within the pop-up window

  • This approach opens up an honest dialogue with the users which helps them to build the trust with the brand and they also get user friendly experience while shopping on Petite Ave

Petite Ave - 4.png

Size Chart On The Product Page

Size chart on the product page gives the customers the size chart guide which is very useful to them while making the purchase of the product.

Petite Size Chart.png

Other Minor Design Solution Recommendations

In addition to the four major design solutions, we also provided two other minor design recommendations to the client for a smooth user experience on the website. These solutions are as follows:

  • Adding size chart details on the product detail page

  • Creating a fixed order on the product page, so that its not random every time if it is refreshed

TEST

Feedback on the new design solution

We saw less confusion and higher shopping experience on the Petite Ave website with the implementation of the new design.

Client Feedback

"Chandani did an outstanding job at providing UX recommendations for my website, Petite Ave. She proposed well-researched ideas which she then tested thru multiple feedback sessions and summarized for me on a weekly basis. I'm excited to implement her recommendations and very confident that it'll lead to higher engagement and conversion rates."

- Vanessa Youshaei - CEO

Project Learning

Working on this project was a great learning curve for me. I got an opportunity to dig up deeply in research areas which helped me to design the solutions. Lot of feedback was given on the regularly basis by our client. Getting feedbacks taught me how to deal with it in constructive way rather than getting defensive, which is usually the case with new designers in the making.

Update

Since this reskin effort, the start up has changed their marketing scope and redesigned their website. However, they still utilized many of our design recommendations and insights for good 1.5 years before changing their scope again.

Previous
Previous

XFund - C

Next
Next

Smiota - r