liberent_new.jpg
Website design for an Indian based e-commerce service that provides rentable fashion for women.

Team
 

Co-founders

Marketing Consultant

Full Stack Developer

Tools
 

Balsamiq

Invision

Illustrator

Photoshop

Launch Date
 

June 2016

My Role

  • Analyzed customer care conversations to identify pain points and find use cases.

  • Worked with the founding team to identify key UX metrics to reach business goals.

  • Ideated features of the e-commerce platform to ensure customer satisfaction.

  • Sketched and wireframed screens based on the user flow.

  • Worked closely with the developer to make sure the designs are implemented as per the style guide.

PROJECT BRIEF

When I started working with Liberent, they were running the business out of Facebook, Whatsapp and a chat assistant (operated by the Co-Founder). They had a basic black and white website and barely any user traffic.

I was the sole designer responsible to redesign the website. 

PROJECT GOALS

  • Improve online customer experience to ensure more time spent on the website. More time spent on the website would lead to an increase in returning users.

  • Design the website to ensure a good experience for new, existing and returning users.

  • Ensure a seamless and fast checkout.

PRODUCT FEATURES

Designing beyond the screen

Liberent's customer satisfaction was beyond just navigating seamlessly through the website. It was about the customer feeling happy and confident about the apparel. So, the strategy for customer satisfaction and retention was to make them feel that. The important business features we came up with to address the pain points are:

Home Trial

Option to choose up to 3 outfits to try at home before booking one for the event. 

Backup Dress

Backup Dress was introduced to accommodate the last minute uncertainty of wearing the picked dress.

Perfect Fit

Ensure a perfect fitting of the outfit by seamlessly getting their measurements. 

CHOOSING AN OUTFIT

DESIGN PROCESS

To consistently increase user traffic on the website, we decided to launch MVPs to be able to market the website and test and iterate the design. This happened twice in the span of 4 months. 

Process_3x.png

TARGET USERS

The target users of Liberent are Indian women attending college or working professionally(age range 19 - 35). They are avid users of social media who do not like to post pictures of the same outfits. At the same time, they are also price-conscious and cannot afford Indian traditional clothing that is priced at a minimum of Rs 10,000 ($150). 

USER RESEARCH  

"Finding" scenarios and analyzing customer care conversations

We collected a database of conversations, over phone and Whatsapp, as these women spoke to us while using Liberent’s earlier website, trying to rent clothes. We invited people to navigate through the website at our marketing stalls at events around Hyderabad, India. I gave a sample of 20 women tasks to perform on the website and narrate their thoughts.

USER PERSONA

User Persona_3x-100.jpg

IDENTIFYING KEY USER TASKS 

The main constraint I had to work with was the time to MVP. So, wherever the grand plan of design took time I brainstormed alternate ideas. 

For example, to book a home trial we just had a page asking for customers' mobile number to contact them for the booking instead of having a page with a booking form and process explanation.

 

INITIAL SKETCHES 

I did some initial sketches on paper using pencils and coloured pens. After some review and iterations, I used Balsamiq and photoshop to create detailed wireframes. I then created clickable prototypes on inVision to share with the team, discuss further, and iterate on the design. 

 

WIREFRAMES

1. Landing Page-1 (1).jpg
1.6 Backup Filter.jpg
Product Page.png

Product Page

Product Listing Page v1

Landing Page

Backup Product Page.png

Product Page - Backup Outfit

Product Listing Page v2

Cart Side popup.png

Cart

INTERFACE DESIGN

product listing v2.jpg

Product Listing Page and Filters

In India, tailors are women's best friends. Their clothes fit you rightly and can be altered instantly. To keep relevance to the accustomed ritual, the website has an advanced size filter of Bust size, rather than the conventional S, M, L variants. Reset option lets them reset all the filters in one click. Product Listing page has an infinite scroll to present users with "endless" options and to minimize user action to view more. 

Product Page 

Products photographs are given 70% of the page and have a white background to channel user's attention to the products. I displayed struck out retail price to give users another reason(rate of rent < rate of buy) to rent the clothes and pilot them to click on "Add to Bag". Graphics of how to navigate through the product page in 4steps was again included to ease the intimidation of giving all the information required to rent a dress. 

RESPONSIVE DESIGN

Since the target users of Liberent were avid users of mobile devices, I gave utmost importance to designing for mobile devices. I took a mobile-first approach and designed by following the bootstrap grid format. Filters on the Product Listing page and navigation menu was re-designed to be intuitive and clean on the mobile device and assets were re-sized depending on the screen width among others. 

Artboard 1 copy.jpg

RESULTS

From Google Analytics and heat maps

UI ITERATIONS

Based on learnings from heat maps and users feedback, I iterated on the visual and UI design. Since this was my first ever web design project(I was a motion designer and engineer before this), I learned a lot of lessons from the first design. The final iteration had more negative space for easy recognition, a better choice of complementing fonts, and a better visual in general. I also redesigned the filters and navigation menu based on findings from testing the previous design. 

Iteration 1

Iteration 3.2

How It Works

Product Listing Page

Product Page

Product Page- Choose Backup

TAKE AWAYS

I had a lot of learnings from this project since this was the first website I designed and delivered. I will share a few of them here.

  • I learnt that the first design is never the final one, iterations are inevitable.

  • The process of handing off designs with accurate style guide and assets is time-consuming but extremely important for efficiency.

  • Negative space is crucial in making a web page usable and intuitive.