top of page

NYKAA

WEB OPTIMISATION

UI Design . UX research . Design Strategy 

CLIENT

Nykaa.com

INDUSTRY

TEAM

TOOLS

Beauty & Lifestyle

Shachi Kaul (UI-UX)

Neha Sharma (PM)

Sketch, Zeplin

Invision, Jira

​

PROJECT

OVERVIEW

Nykaa.com is one of the largest E-commerce beauty destination in India with half a million customers depending on not just for their favourite makeup brands, but also for advice, updates, expert tips and videos on how to look and feel gorgeous always. With almost 850+ curated, well priced and 100% genuine brands and 1 lakh products, Nykaa prides themselves for offering a comprehensive selection of beauty and wellness products for women and men. Following is the story of my contribution towards redesigning and optimising Nykaa.com’s responsive website to enable them to reach out to tier 3 towns as efficiently as the metro cities of India.

UI - UX LEAD

MY ROLE

I led the project right from the first kick-off meeting with the stakeholders till its development stage. I was responsible for the UX-UI design of the responsive website as well as guiding the development team on the implementation of the design. 

CHALLENGE

NYKAA.COM SITE REFRESH & OPTIMISATION

Even though Nykaa had been successful in maintaining a decent conversion rate on desktop, their mobile conversion rate had remained stagnant since its inception in 2012. Thus, in 2016 they approached us to redesign their responsive website. The challenge was to undertake research, analyse the current user data and understand the problem areas to help optimise the responsive website of Nykaa.com. We were briefed to focus only on the essential UX changes and do a UI overhaul. A lot of user research had already been conducted by Nykaa themselves which helped us in understanding the users quickly.

APPROACH

WATERFALL MANAGEMENT PROCESS

Since this was a 3 month long project with a lot of stakeholders involved at different levels, Neha and I opted for the waterfall management approach which emphasised product development in a highly structured and linear way.

As Nykaa’s office was in a different city (Mumbai), we thought it would be best to take this route as the involvement of the stakeholders would be limited. This approach helped us in having the entire scope in place early on and finishing the project on time. 

The design would start with a stakeholder workshop, high-level research and synthesis, concepts, moving to low-fidelity sketches and finally to visual design compositions for every screen. There would be quick iterations on each task flow with the stakeholders. The visual prototype would be informally validated with actual or pseudo-users at key points during the design process. After the completion of design, we would continue to support the development effort through assets production, quality checks, transitions feedback on builds and fine tuning the design deliverables.

 

MOBILE FIRST APPROACH

I decided to go with the mobile first approach for designing the responsive website and then working my way up. This was to ensure that I don’t miss out on the essential features required for optimising the website. I would then subsequently add more features and details to the desktop version for an enhanced user experience.

 

STAKEHOLDERS AS GUIDES

Nykaa’s team (which consisted of the founders, product managers, development team) over a span of 4 years had done enough user research to guide us throughout the project. It was also important for us to use the knowledge of the stakeholders about the beauty industry at every step as they had already been in the business for very long. 

THE DISCOVERY

FINDING THE SKELETONS-2 DAY WORKSHOP

Neha & I flew to Mumbai to conduct a two day stakeholder UX workshop to understand the user research that had already been conducted, and to understand our client’s vision, challenges and expectations. The workshop findings were translated into high-level expectations, persona, journey and success metrics document. Then the current demographic and usage data was reviewed to understand the detailed user behaviour. We started the workshop by gathering all facts and factoids on posits from the stakeholders that would help us understand company background, customers, goals, metrics etc. I did affinity mapping to analyse categories of these findings to understand the product strategy. The product strategy helped us understand their future positioning and therefore why we would be redesigning the mobile and Desktop responsive website for NYKAA. 

In our second activity, I made each of the stakeholders sketch out personas to understand their views on the users. This activity was key to understanding the current users as we were dependent on the stakeholders for this information. In the last activity I made the stakeholders individually sketch/write the users’ current journey as it was an important way to understand the pain points users face while making a purchase on Nykaa.com

DIGGING DEEP

After gathering and organising the information we got from the stakeholders, I dug deeper for some more. The second phase of discovery was a quick, high‐intensity effort that allowed me to define project milestones, audit the existing work, review the competitor landscape and get a deeper understanding into user needs. I also kicked off a technical discovery phase to understand feasibility and constraints.

​

CALL RECORDING FINDINGS

I listened to about 50 incoming and outgoing calls that were made from Nykaa to the users and vice versa through customer care. This helped me understand the grievances of users and problems in the current purchase cycle. The main insights I gathered from this part of research were:

Outgoing: (From Nykaa to users)

  • Incomplete or incorrect address is not caught at the form level

  • Order review and confirmation was made again 

  • Customers took a few moments to recognise the brand name nykaa.com

​

Incoming (From users to Nykaa)

  • Users mostly called to check order status as delays were not communicated

  • Users called to cancel the order 

  • Users wanted to understand the rules of damaged delivery

​

SITE ANALYTICS

Google Analytics of Nykaa.com (desktop and mobile website) helped me establish the actual user behaviour.

This quantitive method of research gave us the following insights:

  • Makeup products were bought more in North India

  • Skin care products were bought in South India

  • West India is more experimental, ready to try new stuff

  • West India is more knowledgeable w.r.t. brand knowledge

  • Mobile traffic is 2 times more than desktop, but conversion is 1/4th of  desktop

  • Search is used 10% on desktop, on mobile it is 5%

  • Top header has the least number of clicks on desktop

  • Tier 3 customers find it harder to use mobile for making purchases

  • More people purchase products through the product detail page,  both on desktop & mobile

USER INTERVIEWS

​

8

Pains

  • Need More international brands

  • Not able to search for products easily

  • Cluttered Visuals

  • Mobile site is very slow

  • No clear return or cancellation policy

  • Unable to track product

Requirements

  • Highlight deals and what’s new/trending

  • Wishlist

Gains

  • Categorisation of products in the menu is good

  • Variety of shades available within each product

When

  • During sales

  • Friend recommendations

  • Need based

  • Delivery time based on convenience

Where

  • Browse on mobile while travelling

  • Purchase on desktop

How and how often

  • Cash on delivery/Debit card

  • Add products to cart- once a week

  • Purchase-once in two month

SITE AUDIT

I audited the mobile and desktop website in terms of the look and feel and basic usability issues. Site audit gave me an in-depth understanding of what existing functionality & content would be useful, what tasks needed supporting, what opportunities were available to innovate and also what could be discarded from the existing website.

  • Both desktop and mobile website design appeared to be cluttered & non-attractive

  • Category labels within the header were scattered in terms of their positioning

  • The fonts used were illegible and very stark

  • Imagery used throughout the website looked busy and of low quality

  • Brand colours made the website appear overtly feminine 

WHAT ELSE IS OUT THERE?

+
–

PURPLLE​

  • Delightful detailing in UX design

  • Unique system to filter reviews

  • Clean User Interface

 

​

​​

​

​

​

BIRCH BOX

  • Offers customised products based on user preferences

  • Focuses on End-to-end purchase cycle

  • Very clean User Interface

 

  • Offers limited products & brands

  • Doesn't offer any beauty advice

  • Doesn't sell worldwide- limited to USA​

​

​

​

  • Offers fewer brands than Nykaa

  • Doesn't offer beauty advice

  • Offers few discounts

  • Doesn't sell to men

​

​

​

KEY INSIGHTS

These varied research techniques helped me to quickly gain insights into the needs of the users and gave me a concrete understanding of the environment and workflows. My research revealed the following key insights

Mobile Site Observation

  • Mobile web traffic is 2 times that of desktop

  • Low mobile conversions because of low internet speed in tier 2 & 3 cities and lack of payment gateway integration

  • Lengthy checkout process which affects the conversion as well

  • A lot of redundant pages 

  • Inefficient user experience

  • Cluttered Interface design

  • Mobile site: search utilised is 5%

Desktop Site Observation

  • Consumers are not exploring the brands page

  • Top header with least clicks

  • 10% search is utilized on desktop

Low content engagement

  • Beauty book (content not engaging)

  • Content layout is uninviting

No content integration within products

  • e-commerce preferred over content

  • content drives decisions

Desktop & Mobile Site Requirement

Prominence of top selling products

  • Home page to drive top selling products

  • Products sell more in combinations 

Making collections prominent

  • More purchases are made through customer recommendations + combos within the product details

  • Users also make more purchases through product detail page as compared to the direct CTA on product listings page

Customer personalisation

  • Improvise sign in

  • Get more consumer data

  • Notifications

Improvement of basic usability issues

  • Checkout process is broken and lengthy 

  • Wishlist as a feature is required

  • Lack of clarity on return & cancellation policy

  • Hard to track purchased products

  • Intuitive search of products is required

PERSONA DEVELOPMENT

Key insights helped me in designating persona types. I used personas constantly throughout the project to guide design decisions, priorities, and create empathy amongst the client and my team. My persona hypothesis consisted of two different archetypes which I used to facilitate discussions about our users needs, desires and varying contexts of use. Through careful analysis of my research, I identified sufficient behavioural variables to segment our user audience. These variables could be categorised into activities such as the awareness level of beauty products and the nature of purchase pattern (impulsive/need based). I discussed the personas with the client to develop a clear picture of who the design of the website would target in the current phase.

MAPPING THE JOURNEY

Once I was done defining the personas, I used experience mapping techniques to visualise and communicate the users end‐to‐end experience across various touch‐points while making a purchase on Nykaa.com. This allowed meto represent user pain‐points and see where I needed to focus our attention. Mapping out the users emotions was key to setting client expectations about the aspirational emotional state I was aiming to design for.

DESIGN PITCH

THE PROBLEM

Our client,Nykaa, has a problem with an extremely low conversion rate of Nykaa Mobile website (it being 1/3rd that of desktop) as the traffic on mobile is 2 times more than desktop and can potentially generate way more sales. 

THE SOLUTION

My idea to address this problem is to provide a mobile website experience which is light to download, offers customised experience, focuses on high content engagement and improves the user experience by removing redundant flows. It is also important to continue the same responsive mobile design across Desktop & Tablet.

PRIMARY USER 

The main groups of people who will benefit from our solution are women and men who frequently purchase beauty and wellness products online.

PRIMARY BUSINESS GOAL

The primary business goal our solution addresses is to increase over all sales on Nykaa.com and to establish Nykaa as the pioneer in the E-Commerce makeup and beauty industry.

PRIMARY USER GOAL SUPPORTED

The primary user goal our solution supports is satisfying their purchasing experience on Nykaa.

MINIMUM VIABLE PRODUCT

By defining the exact problem, I was able to identify the essentials that would help users to easily and efficiently make purchases on Nykaa.com. The user journey helped me breakdown the tasks that are taken up by the user before, during and after the purchase. This gave me a way to visualise what existing tasks would be useful, which one needed supporting, what opportunities were available to innovate and also what could be discarded from the existing design. This helped shape the user stories as well as minimum viable product offerings as seen below.

MUST

  • Build a responsive design for mobile and desktop

  • Fast and efficient User experience on mobile

  • Remove redundant pages & features from Mobile

  • Make the checkout process efficient

  • Make tracking, return & cancellation easy 

  • Modern & de-cluttered UI

  • Make product searching easy and intuitive

  • Give more prominence to products and brands that sell more

SHOULD

  • Content integration within products

  • Improve the experience of buying make-up products

  • Improve imagery

COULD

  • Personalise the experience further

  • Improve customer service 

  • Improve the product rating & review system 

WON'T

  • Won't imitate the Nykaa App

SETTING THE DESIGN DIRECTION

Since the problem I was trying to solve was increasing conversions for the NYKAA mobile site, I decided to go mobile first and subsequently design a responsive website for desktop. It was also important to keep the mobile design as light as possible to cater to the users living in tier 3 cities and add more/secondary features on desktop for an enhanced user experience. I started with defining a basic structure (Design Concept) for the key flow of the mobile website - which gave the stakeholder an insight in to how the elements would be arranged/ positioned in the website pages as the user proceeds along with the layout of the app,. These were in the form of sketches. The purpose of this was to provide a visual understanding of the pages early in the project before the creative phase would start and to ensure content and functionality are positioned correctly based on user needs. 

I presented two concepts for the key flow: 

The first concept revolved around the integration of content related to beauty advice with products.

The idea behind this concept was to project NYKAA’s image as a beauty expert rather than an e-commerce platform for cosmetics. 

​

The second concept was more linear and focused mainly on the top selling/trending products and brands along with deals and offers. The stakeholders liked both the approaches and asked us to merge the two concepts into one. The final concept focused on the popular products and brands along with beauty tips integrated within the pages.

USER FLOW

Building the user flow for the system was imperative to understand the overlapping of information in the existing design and how items relate to each other within the system. The user flow helped me focus on organising, structuring, and labelling content in an effective and sustainable way. 

DETAILED DESIGN

As the design concepts got approved, I started working on the User Interface. Due to time limitation, detailed wireframes were not created and the UX flows were taken care of while designing the UI. The most important aspect of redesigning the UI both for mobile and desktop was to make the it look premium and not cluttered and sub- standard. It had to look modern, clean and fresh. The colour pink was used heavily in the original design which was not only taking the focus away from the products, but it was also making the website appear very feminine and not gender neutral. Since Nykaa was aiming to increase their male customer base as well, it was important that I  go with a primary colour palette which is was warm, yet subdued. To make the layout consistent and easily adaptable to responsive design, I decided to go ahead with the card format. This would not only keep the image size consistent, but would also make the layout flexible. For typography I used the font Gotham as it is sharp and edgy and denotes confidence. I chose coral as the primary colour.

MOBILE SCREENS

  • The homepage was made to look clutter free. The product image and its description were laid out separately within a card. Card format was used to keep the layout flexible. The purpose of the design was to make the website look premium.

  • Global Navigation was inspired by material design. It was categorised into Categories, Brands and Offers

DESKTOP SCREENS

DELIVERY OF DESIGN FOR DEVELOPMENT USING ZEPLIN

The final screens were delivered in the development phase to the development team using Zeplin which really aided us in building a style sheet, maintaining a repository of all the screens and marking comments on any changes made. Zeplin also helped in guiding the design to the developers by giving the exact details of all the UI elements that were used.

IMPACT

Increase in conversion by 13.5% on Mobile site in a span of 6 months.

With the help of improved backend technology and the optimised design, Nykaa saw a great improvement BOTH in sales and conversion rate on mobile and on desktop within a span of 6 months. The jump was more evident in tier 2 and 3 towns of India.  Users responded well to the mobile website’s simplistic and fast checkout process whereas on desktop, it was the intuitive search and improved filters that made a positive difference.

USABILITY TESTING

I went over 11 design iterations while the 3 usability testings were conducted by the NYKAA team during different stages of the project. Due to cost limitations, Nykaa chose to conduct these tests with the help of their in-house research team.

bottom of page