Increasing Customer
Retention & Engagement
Duration
3 Months | April 2024 - June 2024
Brief
To build a dedicated editorial section for Tira Beauty, a subsidiary of Reliance Industries, India’s largest conglomerate. Enhance user engagement by delivering expert-led content that informs, inspires, and drives beauty discovery.
The Team
PRODUCT DESIGN
Mehak Garg
Dipayan Das
Design Director
Wais Akbari
Product Manager
Neha Adiga
Software Developer
Saiempu Stephy (iOS)
Anupam Gautam (Android)
Company
Tira Beauty
(Reliance Industries Limited)
TopShelf saw a low 0.8% CTR, but 92% of those clicks led to purchases —
showing high intent among engaged users.
This insight led to a dedicated TopShelf section.
Problems with Old Topshelf section (Backed by data)
•
The widget was placed on 12th position, ~6th scroll on the homepage. Most users never scrolled that far.
•
Articles in the widget were refreshed twice a week, and once replaced, there was no way to access them.
•
The widget wasn’t linked to a centralized TopShelf section, so users couldn’t browse or return to past content. There was no structure for exploration, bookmarking, or filtering.
Designing with Clarity
We began our process by reviewing – the Business Requirements Document (BRD) and the Product Requirements Document (PRD). The BRD outlined the overarching goals while the PRD detailed the platform’s capabilities. We ensured that every design decision — from information architecture to interaction patterns — was anchored in both business intent and product feasibility.
Key Wireframes
We explored wireframes in depth to map the entire user flow, accounting for the complexity of navigation, tagging, and content structure. Scalability was a key consideration throughout the design process.
Article Card
Layered Content Filteration
The TopShelf filtering system uses a two-tier structure:
•
L1 Filters serve as the first layer of segmentation, presented as tabs like Tira Loves or Rituals. These define the overarching theme of the content being browsed.
•
L2 Filters, accessed via a floating icon, can be layered on top to further refine results by interests such as Skincare, Fragrance, or Men.
Users can apply multiple L2 filters simultaneously within a selected L1 category.
This layered approach gives users control over their browsing experience — starting broad and narrowing down seamlessly, without adding friction to the interface.
Designing the 'All Articles' Section for Flexibility and Scale
The 'All Articles' section was designed to serve as a comprehensive feed of editorial content, striking a careful balance between editorial richness and scalability across web and app. One of the key design decisions we made during this phase was to intentionally differentiate the layouts for desktop and mobile.
On desktop, the available real estate allowed us greater creative freedom. We leveraged this to craft a more dynamic, visually layered feed — enabling richer storytelling through varied card sizes and flexible grid arrangements. In contrast, the mobile version prioritized clarity and scroll efficiency, using a more linear layout to support quick browsing and readability.
End Note: Designing for Impact at Scale
TopShelf was envisioned as more than just a content archive — it was a strategic product that needed to scale across devices, support multiple content formats, and drive meaningful engagement. Throughout the process, our focus remained on:
•
Designing systems that could scale across web and app
•
Balancing creativity with practicality
What I Learned
The biggest takeaway was understanding how scalability and performance are deeply connected. Collaborating with UX and data teams allowed us to translate user behavior into design choices — a process that now reflects in how TopShelf contributes to a measurable percentage of platform sales. Building systems that are both thoughtful and scalable proved essential to delivering long-term value.
View More Work
Customer Retention for Tira Beauty
Space Exploration with Astr