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.
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
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.
SITE MAP
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
.jpg)
Product Page
Product Listing Page v1
Landing Page
Product Page - Backup Outfit
Product Listing Page v2
Cart
INTERFACE DESIGN
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.
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.