User Retention & Conversion in Nykaa Fashion App through stories💡

Looks like the “Title” of my case study Hooked you and brought you here 😉

Let me start with why I’m doing this project?🤷‍♂️👇
In this Product Design challenge, we were given some problem statement to chose and then work on it to introduce a feature to target the business metrics.

Okay, I know that it’s difficult to read all the text in a lengthy case study. That’s why I’m here. As a UX designer, I’ll empathize with you, don’t worry! I will help you easily navigate to the important sections in the case study that you might be interested in.

What do you want to see?🤷‍♂️👇

Problem Statement

My problem statement was-

A feature where users will find brands showcasing their latest/upcoming products to increase the user retention and conversion rate in Nykaa Fashion App

- What is Nykaa?

• The company sells beauty, wellness, and fashion products online, on mobile apps, and in 100+ stores.
• Nykaa caters to middle-class and upper-class girls and women who want to feel confident and look stylish — at a party or work.
• The company expanded from an online-only model to an omnichannel one in 2015.
• As of 2022, it sells 2,000 brands and 200,000 products.

Nykaa is a parent company that has different industries catering companies like Nykaa Beauty, Nykaa Men, and Nykaa Fashion.

• Nykaa Beauty is the flagship brand of Nykaa, and it offers a wide range of beauty products, including makeup, skincare, haircare, and fragrances.
• Nykaa Men is a men’s grooming brand that offers a range of products, including shaving, skincare, and fragrances.
• Nykaa Fashion is a fashion brand that offers a range of apparel, footwear, and accessories for men and women {Our Throughout Focus}

- What is Nykaa Fashion?

• Nykaa Fashion is an online fashion retailer that offers a wide range of apparel, footwear, and accessories for men and women.
• As Launched in 2016 and it has since grown to become one of the most popular online fashion retailers in India. The company offers a wide range of products from over 2,000 brands.

Nykaa Fashion’s products are available across a wide range of categories, including — Apparel: Dresses, skirts, tops, shirts, pants, jeans, and more — Footwear: Sneakers, heels, sandals, boots, and more — Accessories: Bags, wallets, jewelry, sunglasses, and more

Nykaa Fashion offers a convenient shopping experience. Customers can shop online or through the Nykaa mobile app.

👩‍👩‍👧‍👧 Who are my users?

When I understood the problem statement a bit, it was time to understand for whom are you building a product. So, I went ahead with doing User Research of who are the particular users of Nykaa Fashion and moreover, The users of Nykaa Fashion who are the intended beneficiaries of the point-based redemption system. I Found out👇

Users/Audience of Nykaa Fashion

• The majority of Nykaa Fashion’s audience is Female (59.94%). Male users make up 40.06% of the audience.
• Age: The largest age group of visitors to Nykaa Fashion are 25–34 year olds (39.21%). Other age groups include 18–24 year olds (37.44%), 35–44 year olds(11.53%), 45–54 year olds(6.76%), 55–64 year olds (3.51%).
• Location: India is the largest market for Nykaa Fashion, with 99.18% of the audience coming from the country. Other countries with significant audiences include the United States (0.44%), the United Kingdom (0.23%), Canada (0.17%), and Australia (0.12%).
• Interests: The most popular interests among Nykaa Fashion’s audience include fashion, beauty, shopping, and lifestyle. Other interests include travel, food, music, and movies.

Final Solution

It’s always important to show what is the end product, because someone would be willing to know details and the process of the product only if they find the product to be interesting.🤷‍♂️

So here’s the prototype of what I made 👇

You’ll be having this doubt in your mind that why did this person made this feature similar to what we see on Instagram and other apps, he is a Product Designer, he should be making something which looks cool and fancy right? Something which no app has done right???

NOOOOOOOOOOOOO!!!!! because as a Product designer you must keep this UX Fundamental in your mind👇

“Users spend most of their time on other platforms as well and they expect your app to work in the same way as they are used to”

it’s important to understand this basic fundamental, and then do research on other products and design something using similar pattern that the user is familiar with, and making changes on the design according to the goals of the business.

Where I placed this Feature👇

How this Helps👇

🙍‍♂️Users — Saves users from frustration of seeing irrelevant products, they see only relevant products to the section they visit (men’s,women’s etc.)
💼Business -Allows business to easily manage the products based on the sections.

Let’s Do UI Breakdown of the Solution🛠️

How this Helps👇

🙍‍♂️Users — Gradient indicates user that there is new/unseen story.
💼Business — Gradient helps grab attention and no preview makes user curious to check.

How this Helps👇

🙍‍♂️Users — Multiple loader Informs user that there are more stories.
💼Business — Makes user curious to check all the stories till the last one.

How this Helps👇

🙍‍♂️Users — indicates user that the product is latest/upcoming.

How this Helps👇

🙍‍♂️Users — User might take decision based on number of likes.
💼Business — Helps algorithm to understand what’s performing better and what the user is interested in seeing.

How this Helps👇

🙍‍♂️Users — User can set reminder of launch and can buy the product he likes once its launched.
💼Business — Increases possibility of good amount of sale on the launch date.

How this Helps👇

🙍‍♂️Users — User can see a particular product he is interested in and can directly buy it or wishlist it.
💼Business — Helps sell particular product even if the user is not interested in all the products therefore increasing chances of selling individual product.

How this Helps👇

🙍‍♂️Users — Allows user to set reminder to add particular product in wishlist and get notified on the launch date.
💼Business — Increases possibility of good amount of sale on the launch date as the user can get notification of the particular product they wishlisted on launch.

How this Helps👇

🙍‍♂️Users — Allows user to see all the products featured in the story.
💼Business — Increases possibility of user ending up buying a product from the catalogue, if he likes any.

How I used Component Properties to ease my work

Critical Decisions

While solving the problem statement, I had to take some important decisions to move forward.🏃‍♂️

I believe those critical decisions are very important for building a product as building a feature/product requires a lot of time, effort and money. Therefore, it’s very important as a product designer to think of the possibilities while making a solution.💡

There were many critical decisions that I took while solving for this problem. But I’ll show 3 most important and impactful critical decisions I took during this Challenge.😮‍💨

1.Deciding Between Reels and Stories: Choosing the Best Feature to Implement🤔

If you’re wondering why I have to make a decision between these two things, then you need to take a look at my problem statement again.👇

A feature where users will find brands showcasing their latest/upcoming products to increase the user retention and conversion rate in Nykaa Fashion App

Yes, I had the option to choose any of the feature. But why did I choose to implement the stories and not the reels even though, I knew that reels section keeps user’s hooked more than stories. That could’ve really helped me to increase the user retention, as users spends much more time on watching reels rather than checking out stories.

According to a study by Statista, the average user spends 60% more time watching Reels than Stories.

You know the power of Hooked Framework 🤷‍♂️

Waitttt!!! I forgot to tell what Hooked Framework is, right??? Let me tell you.👇

Hook Model

The Hooked Framework is a model that helps create habit-forming experiences. It involves triggering users, making actions easy, providing variable rewards, and encouraging user investment. By following this framework, we can design engaging experiences that form lasting habits with users.

And yeah some popular apps like Instagram and TikTok has already made story and vertically scrollable short videos based on Hooked Framework so yeah easy work for me.😉 All I have to do is to use any of these features to increase the user retention.

a. Impact of Implementing Reels Section❌

There were some obvious advantage of implementing Reels Section like 👇

• Reels Section would have brought way more user retention on the app than story.
• Reels section would have resulted in getting better conversion for brands.

But, there were some big reasons why I dropped the idea of implementing reels sections. 🙅‍♂️❌👇

• Distraction- Adding a reels section to the Nykaa Fashion app, while engaging, may divert users’ attention from the core purpose of the app, which is shopping and related activities.
• Disturbance in sections-For adding Reels feature, I would need to create a new and different section just to put this feature. Even if I decide to put it in category wise landing page, still it will take more space than stories. Which would have ultimately disturbed the placements of the other important sections.
• Extra Efforts from Brands-The business would have to invest more time, effort and money for creating videos in order to promote their upcoming/latest products.
• Loss for Low Budget Business-Nykaa tries to provide visibility to the low budget business as well. So, it would be really difficult for them to compete if big brands start putting their reels and that will lead to less visibility of low budget business.

b. Impact of Implementing Stories✅

• Less Distraction- Story section keeps users less engaged than the Reels, which what needed. As a product designer it’s important to remember the ultimate goal of the product, and here it is to sell products, not to entertain users.
• Little to No Disturbance in sections- As the story feature would take up very less space and there is no need for a whole different section to be made to place this.
• Less Efforts from Brands- The business doesn’t need to invest more time, effort and money for creating videos in order to promote their upcoming/latest products.
• Better Visibility to Low Budget Business — With story feature, Low budget brands will get better visibility as they don’t have to spend money on video creation, they can simply put images as story to showcase their upcoming/latest products.

Conclusion (✅I Decided to Implement the Stories Section)

I knew from the beginning that the reels feature is a very good idea but, once I thought about it carefully, I understood how problematic it can be for the business if not implemented properly.

Furthermore, I know that as a Designer we fall in love with our ideas, but being a Product Designer it’s always important to understand the business need and to leave the most favorite idea if it won’t work as required, because in the end you are building the product for the user and the business.

2.Choosing the Optimal Design: Circle or Rectangle for Story Feature Entry

So, after deciding to move ahead with the story section, I got 2 option on what should be the design(Circle or Rectangle) of the story section.

a. Impact of Implementing Rectangular Story UI❌

while doing some research I found that many apps like Facebook and Youtube uses a rectangular box to show stories which have preview of what to expect from the story.

Here are some possible impacts of rectangular UI for Stories in Nykaa Fashion App👇

• Looks Odd from existing UI- The rectangular shape doesn’t blend well with the exsiting UI. This will put more emphasis on this feature, that will lead to distraction from other sections.
• Takes Up More Space- The rectangular shape will occupy more space as compared to circular shape.

• Preview may stop user from checking the story- Suppose a brand uploads two stories. When a user sees the preview of the latest story, they might not be interested in the product shown. However, they could potentially be interested in the product from the previously uploaded story, which they didn’t even check because they were focused on the preview of the latest story.

b. Impact of Implementing Circular Story UI✅

while doing some research I found that many apps like Instagram, TataCliq Palette Whatsapp etc. uses circle to indicate stories.

Here are some possible impacts of circular UI for Stories in Nykaa Fashion App👇

• Looks Consistent with existing UI-The circular shape blends well with the existing UI. This will put less emphasis on this feature, that will lead to less distraction from other sections.
• Takes Less Space-The circular shape will occupy less space as compared to rectangular shape.

• No Preview will attract user to click-The absence of a preview for the circular UI of the story section can provoke or excite users, prompting them to click on it to discover what’s inside the story. This behavior tends to increase the click-through rate (CTR) for the stories.

Conclusion(✅I Decided to Implement the Circular UI)

I decided to implement the Circular UI for the story section as it was aligning properly with the goal of the Nykaa Fashion app i.e. getting more clicks that will ultimately help in better discovery of the brands upcoming/latest products.
And while doing some research I got to know that-

A study by the Nielsen Norman Group found that users were more likely to click on circular buttons than rectangular buttons.

A study by HubSpot found that circular images on social media received more engagement than rectangular images.

A study by Google found that circular thumbnails on YouTube videos resulted in a 12% increase in click-through rates.

Overall, there is evidence to suggest that circular UIs can be more effective than rectangular UIs for stories. This is because they are more visually appealing, dynamic, and efficient. As a result, they can lead to increased click-through rates.

Here’s the final look of it after implementation.👇

3.Choosing Where to Put this feature:Crafting an Intuitive Flow

After finalising the structure of it now it was time to decide on the placement of this feature. There were 3 possible screens for the placement of this feature:-

a. Home Screen
b. Explore Section
c. Section Wise Landing Page

Let’s talk about where I placed the feature and why👇

a. Impact of Placing on Home Screen❌

Here are some reasons why I decided to not put story section there👇

• Difficult to Distinguish Products- If we put the story section in this page, then user would be seeing all categories of products i.e. Men’s, Womens, Kids etc.
  Suppose, he is interested in Men’s Products and he is getting stories of Kids Product then he might get frustrated and leave.
• The Section Looks Odd- The Home Screen of Nykaa Fashion app has horizontal rectangular cards for choosing categories. If I decide to put the Story section there then all the emphasis will go on it because of it’s different shape than other elements according to Gestalt’s Law of Focal Point.

b. Impact of Placing on Explore Section❌

Here are some reasons why I decided to not put story section there👇

• Less Attention- it’s important for brands to be able to create hype for their latest/upcoming product. Therefore, they’ll want to get good attention from the user. My Assumption is that most of the user first goes to section wise page and then spends their time to explore product and they spend more time on exploring products than checking out the explore section.
• Clash of Two Features- There’s already a story and reel mixture feature available in the Explore section, where Nykaa and other Brands Promote their products.
  But there was nothing that can help them to create buzz for upcoming or latest product.
  My Assumption is even If I decide to put the story section there, both of the features would be clashing in terms of grabbing the attention and ultimately frustrating the user.

c. Impact of Placing on Section Wise Landing Page✅

• Easy to Distinguish Products- As user will be first selecting the category and then sees the Brand stories which showcases products related to the section i.e. Mens, Women, Kids etc. the user has selected will prevent them from seeing unwanted products from other categories.
• Easily Blends with the Section- The Story Section will go well in this screen as there is already some elements which are in circular shape.
• Enough Attention- Here the Brands can get enough attention as many user definitely goes through this flow to explore their required products.

Conclusion(✅I Decided to Place it on Section Wise Landing Page)

After Comparing and understanding all the possible placement of this feature I moved ahead with placing it on the every Section wise landing page.

Suppose, user opens the app to look for Men’s Product he selects the men’s section and then sees the story section and already knows that he will find men’s related product on the stories only. Similarly for women’s section and other sections as well.

Here’s the Final Placement👇

You may ask why below the First Fold??🤷‍♂️ We see stories at the top only.

But here’s my reasoning👇

• There’s already category section which is in circular shape, so both features will fight for attention.
• Kept it in the first fold but at the bottom because user gets a sneak peek of it. Which makes him curious to scroll down and check it, therefore, it’s not missing opportunity to be discovered.

The Path I took to reach the solution🏃‍♂️

When I started, I was feeling lost, I mean I was not able to decide what should I do and how should I do. But when I started digging deep into the problem statement and I was able to solve the problem and This is how approached the problem to solve it.👇

Context: Nykaa Fashion App is a leading online fashion destination for women. The app offers a wide range of products from various brands. With the increasing popularity of Instagram and TikTok stories/reels, the idea of adding a similar feature to the app has emerged to enhance user engagement and create a platform for brands to showcase their latest/upcoming products.

Core idea of the feature: 💡

• The feature enables brands to share short videos/images highlighting their latest and upcoming products.
• Users can watch these videos/stories and interact with them through, likes, and shares.
• The feature includes a convenient gestures and interactions, guiding users to the product page for seamless purchasing.
• It provides a platform for brands to effectively showcase their offerings and engage with users in a visually captivating manner.
• Users can stay updated on the latest trends and releases, making informed purchasing decisions.

Impact on business metrics: 💼

• The introduction of this feature aims to enhance user engagement and drive higher sales within the app.
• By providing brands with a platform to showcase their offerings, the feature increases brand visibility and facilitates a more direct connection with their target audience.
• The feature is expected to generate increased revenue for the app through improved user conversions and higher brand engagement.
• Overall, the implementation of this feature holds the potential to significantly enhance the app’s performance, benefiting both users and brands alike.

Assumption🤔

• Users have a strong interest in discovering and learning about new fashion products.
• Users will engage with the feature frequently and consistently.
  The app’s existing user base will be receptive to the introduction of this new feature.
• The app’s current technical infrastructure can support the addition of the feature without significant issues or delays.

Target Users👤

The “Stories/Reels” feature in the Nykaa Fashion app targets female fashion enthusiasts, aged 18–45, who are active on social media and interested in discovering the latest trends and products. These users seek an engaging and personalized shopping experience, with a wide range of fashion options available at their convenience.

The Solution🧠

Incorporating the stories section on each category page, so that the brands can showcase relevant latest and upcoming products.
By incorporating the stories section, Nykaa Fashion is able to provide a more dynamic and interactive experience for users, while also giving brands a platform to showcase their products and connect with potential customers. Users can easily browse through the stories to stay up-to-date on the latest and upcoming products, It also allows them to view products related to the stories shared by brands and it also encourages user to engage with the content by tapping, swiping, and sharing.

Overall, the story section solution is based on the mental model of Instagram Story section. By this way, we don’t have to educate the users about this feature and is following the Jakob’s Law.

Competitor Analysis📈

• Instagram: Instagram is a strong competitor because it has a large user base and a wide range of content creators. Brands can use Instagram Reels to showcase their latest products and offerings, and they can also use the platform to connect with influencers and other users.
• Myntra: Myntra is another strong competitor because it has a large selection of products and a wide range of features. The “Myntra Studio” feature allows brands and influencers to create content to showcase their products, and the “Shop by Trend” section highlights the latest fashion trends.
• AJIO: AJIO is a newer competitor, but it has quickly gained popularity. The “Trending Now” section showcases the latest fashion trends and styles, and the “Brand Stories” section allows brands to showcase their latest collections and offerings.
• TataCliq: TataCliq is a well-established competitor with a large selection of products. The “CliqFeed” feature showcases various products and collections with a mix of user-generated content, influencer content, and brand-created content.
• Amazon Fashion: Amazon Fashion is a major player in the online retail space. The “Curated Stores” section allows users to browse collections from different brands, and the “Fashion Feed” section showcases the latest fashion trends and styles.

Inspirations🖼️

How This Helps User?🛠️

• Stay up-to-date on the latest trends and products: By browsing through the stories section, users can discover new products, collections, and trends from their favorite brands.
• Get inspired and informed: The stories section provides a visually appealing and informative way for users to engage with content. Users can tap, swipe, and explore the stories to get inspired and learn more about the products they are interested in.
• Convenient and enjoyable shopping experience: The stories section is designed to provide a seamless and enjoyable shopping experience for users. By providing a dynamic and interactive way to engage with brands, users are encouraged to explore and shop for products they might not have otherwise discovered.

Overall, the “stories” feature helps users stay informed and engaged, while also providing a convenient and enjoyable way to shop for products.

How This Helps Business?🧑‍💼

• Increased brand visibility: By providing a platform for brands to showcase their products, the “Stories/Reels” feature increases brand visibility and awareness among potential customers.
• Improved user engagement: The dynamic and interactive nature of the stories section encourages users to engage with the content, leading to increased user engagement and retention.
• Higher conversion rates: By showcasing products in a visually appealing and informative way, the “Stories/Reels” feature can lead to higher conversion rates and increased sales.
• Competitive advantage: The “Stories/Reels” feature provides a competitive advantage for Nykaa Fashion by offering a unique and innovative way for brands to connect with potential customers.

Wireframes That Helped Me to Get Started📝

Making wireframe is the best thing to do. I got so much clarity on the structure of my UI.😁
First Wireframe helped me get started.💪
Final UI Wireframe helped me come up with better structure.🙅‍♂️

Existing UI🎨

Redesigned UI (After Implementing Story section)🎨

Usability Testing🙅‍♂️

After doing usability testing with 2 people, here is some insight I got for my UI.👇

Story Section: There was issue with the clear indication related to gradient and copywriting.
Story page interaction: story page interaction was not similar to Instagram and user was confused on the interaction.
Contrast issue: there was contrast issue user had difficulty in differentiating the different elements.

First Iteration of UI (After Usability Testing)🖌️

Final Iteration of UI (After Usability Testing)✨

I was not happy with the first iteration as there were some issues, so I did one more iteration and fixed some issues-

1. Added animation in the gradient to grab attention of the user and changed the color of the gradient.
2. Removed the name of product from the screen and added an overlay popup to show full details.
3. Added option to directly wishlist from the product popup screen.
4. Changed some placements of the elements.

Let me show you the mess 😅

Stories Feature: Accross the Spiderverse🤣🕸️🕸️

What I learnt From this Challenge📚

1. How to work under a particular time constraint.
2. Prioritizing important stuffs.
3. Giving measured input to each stage so that things can be done in a limited time.
4. Doing research according to the time constraint.
5. I learnt how to present my work in a better way.
6. Learnt how to do usability testing for digital product.
7. Learnt the importance of iteration.
8. Learnt the importance of creating components and system, that can save us from a lot of repetitive task.