Website Design

Website Design

Website Design

Love DepotWebsite

Love DepotWebsite

Love DepotWebsite

MY ROLE

MY ROLE

MY ROLE

  • Research

  • Stakeholder Interview

  • Consumer Survey

  • Conceptualisation

  • Website Design

TEAM

TEAM

TEAM

  • Design manager

  • Team of Developers

  • Visual Designer

DURATION

DURATION

DURATION

5 months

CONTEXT

Redesigning Website

Redesigning Website

Love Depot recognized the need for a comprehensive website redesign after years of incremental updates that, while keeping the site functional, had resulted in a fragmented digital experience. The existing platform, though regularly maintained with small feature additions, lacked a cohesive visual language and intuitive user flow.

But what is Love Depot?

Love Depot is India's premier sexual wellness marketplace, offering a curated collection of intimate products and accessories. As a pioneering brand in the wellness space, they focus on creating an inclusive shopping experience that prioritizes sexual health and personal wellbeing.

QUANTITATIVE ANALYSIS

Customer Survey & Stakeholder Interview

Customer Survey & Stakeholder Interview

To refine our results we did a survey over 50+ customers to understand their shopping preferences, approach and pain points. We also held a 4-hour workshop with key stakeholders to deep dive into the brand's goals and personality. The main points which needed to be addressed were:

PROBLEM BREAKDOWN

Designing for Better Discoverability

Designing for Better Discoverability

The client sought to develop a custom-coded Shopify website that would facilitate seamless product discovery, establish a unified brand aesthetic, and rebuild customer trust through a more intentional and strategic design approach.


The culmination of the quantitative research and problem analysis revealed key areas for improvement to better serve the brand's customers and business objectives. The core goals of the website redesign project were to:

Mobile First
Approach

Google Analytics results showed that 80% of website users were making purchases via mobile. It was key to optimize the website for mobile use cases.

Improved Website


Architecture

The website architecture had become fragmented as new functionality and sections were added, making the navigation and information architecture unclear.

Improving Product
Usage Information

Customers wanted clearer, more comprehensive product usage instructions to support their purchasing decisions.

UNDERSTANDING THE MARKET

How are the others doing it?

How are the others doing it?

I studied competitor brands like Roam, Lelo, Smile Makers etc to understand how they talk about their product and their categories. Since this website was a marketplace and was not catering to products of just from one brand, the next step was to research other websites like Naturismo, Nykaa, etc.

THE NEXT STEPS

Brainstorming and Prioritisation

Brainstorming and Prioritisation

After all the research and possible solutions, we plotted and segregated the updates/additions into four categories. The ones marked with green were taken ahead.

LET'S BEGIN!

Before creating wireframes

Before creating wireframes

Before diving into design, we collaborated with stakeholders and developers to document all required assets, sections, and functionalities for each page. This systematic approach helped understand technical limitations and align expectations. As the platform needed to balance marketplace functionality with educational content for multiple brands, we opted for carefully curated sections rather than a template-based approach.

DESIGN PROCESS

Deep dive in Medium Fidelity

Deep dive in Medium Fidelity

The medium fidelity wireframing phase was the most time-intensive yet crucial stage of our design process. This phase demanded extensive collaboration with the brand manager and development team as we worked to establish the foundational structure of the website. Following a mobile-first approach, we designed and optimized the mobile experience before scaling to desktop versions.

The medium fidelity wireframes were essential in defining the website's core structure and key functionality, serving as a blueprint for the entire user experience.

The medium fidelity wireframes were essential in defining the website's core structure and key functionality, serving as a blueprint for the entire user experience.

The medium fidelity wireframes were essential in defining the website's core structure and key functionality, serving as a blueprint for the entire user experience.

Early collaboration with developers provided critical insights into plug-in integration and load time considerations, enabling us to make informed design decisions throughout the process.

Early collaboration with developers provided critical insights into plug-in integration and load time considerations, enabling us to make informed design decisions throughout the process.

Early collaboration with developers provided critical insights into plug-in integration and load time considerations, enabling us to make informed design decisions throughout the process.

Regular coordination with the brand manager helped streamline website priorities and ensure alignment between business goals and user needs, particularly in handling sensitive content and educational resources.

Regular coordination with the brand manager helped streamline website priorities and ensure alignment between business goals and user needs, particularly in handling sensitive content and educational resources.

Regular coordination with the brand manager helped streamline website priorities and ensure alignment between business goals and user needs, particularly in handling sensitive content and educational resources.

FINAL SCREENS

TRUST . USABILITY . EDUCATION

TRUST . USABILITY . EDUCATION

The Home Page followed the principal of creating a brand trustworthy and giving options catering to everyone’s needs. The flow made sure the user has options clear marked categories and options according to their price range.

  • Home Page

  • Home Page

  • Home Page

  • Home Page

  • Home Page

  • Product Page

  • Product Page

  • Product Page

  • Product Page

  • Product Page

Design Process Insight Medium-fidelity wireframes helped establish stakeholder alignment early in the process, resulting in significantly fewer revisions during the high-fidelity design phase.

Design Process Insight Medium-fidelity wireframes helped establish stakeholder alignment early in the process, resulting in significantly fewer revisions during the high-fidelity design phase.

Design Process Insight Medium-fidelity wireframes helped establish stakeholder alignment early in the process, resulting in significantly fewer revisions during the high-fidelity design phase.

01

Mobile-First Benefits Designing for mobile first naturally pushed us to create simpler, more focused solutions, leading to a cleaner user experience that scaled effectively across all devices.

Mobile-First Benefits Designing for mobile first naturally pushed us to create simpler, more focused solutions, leading to a cleaner user experience that scaled effectively across all devices.

Mobile-First Benefits Designing for mobile first naturally pushed us to create simpler, more focused solutions, leading to a cleaner user experience that scaled effectively across all devices.

02

Content Management Strategy Using accordions and "read more" features proved effective in managing information density, reducing cognitive overload while keeping detailed product information easily accessible to interested users.

Content Management Strategy Using accordions and "read more" features proved effective in managing information density, reducing cognitive overload while keeping detailed product information easily accessible to interested users.

Content Management Strategy Using accordions and "read more" features proved effective in managing information density, reducing cognitive overload while keeping detailed product information easily accessible to interested users.

03

LOOKING AHEAD

What's next?

What's next?

Following the redesign, the brand saw dramatic improvements in key metrics: session conversion rates increased nearly 8x from 0.38% to 3%, while user engagement grew by 68%. These numbers validated that the brand refresh successfully resonated with users.

Project Learnings

Having a stakeholder with a crystal-clear vision of their brand's needs made the design process flow naturally. This clarity helped us lock in designs efficiently and effectively.

Seamless Integration — The development phase was remarkably smooth - seeing the designs translate from Figma to the live site with such precision was a memorable first. The final result matched our vision perfectly.

Having a stakeholder with a crystal-clear vision of their brand's needs made the design process flow naturally. This clarity helped us lock in designs efficiently and effectively.

View Next Project

View Next Project