Trove: Reimagine eCommerce Navigation
Industry
Intimate Apparel
Client
College Project
Role
UI/UX Designer
Duration
3 Months
This project tackles the complex yet often ignored issue of eCommerce navigation, aiming to enhance user experience by optimizing top-bar navigation with clear, accessible sub-options for seamless browsing.
Overview
“Trove” evokes the concept of a hidden treasure—an extensive, valuable collection awaiting discovery. This project brings that spirit to life on a brand-new lingerie eCommerce platform, where the goal was to craft an elegant, user-centric experience that not only resolves major navigation issues but also reshapes how lingerie shopping is perceived in the digital space. Unlike traditional eCommerce approaches, which often rely on bold and direct promotions, this design introduces a refined, understated shopping experience that seamlessly fits the aesthetics of today’s social media landscape.
The primary focus was to address the frustrating, overlooked problem of top-bar navigation, where users are forced to maneuver with precision, resulting in disrupted and tedious browsing. I developed a fresh, intuitive navigation that eliminates these pain points, providing users with a smooth, uninterrupted journey. This new design framework blends effortlessly with the platform’s minimalist, content-driven approach, allowing users to discover products and resources naturally and without intrusive marketing. Ultimately, the project offers a modern, user-friendly experience that transforms the digital lingerie shopping experience into something uniquely enjoyable and aligned with contemporary expectations.
The Problem
Many eCommerce sites, including top brands, suffer from frustrating navigation issues that make browsing feel like a constant struggle. Just a slight move of the cursor can close menus or disrupt the user’s flow, forcing them to navigate with pinpoint accuracy. This overlooked flaw creates an unnecessarily difficult experience, making users feel rushed and unwelcome. This project directly tackles this pain point, reimagining the navigation for a lingerie eCommerce platform to deliver a seamless, intuitive experience that respects the user’s time and enhances their journey.
The Goal
To streamline the navigation process, making it intuitive and easy to use, with a focus on the lingerie eCommerce industry and adaptability for broader applications. Additionally, to provide a shopping experience that feels relatable and inviting, without overt, in-your-face promotions.
User Research
The user research was conducted in three phases: Survey, Interview, and Benchmarking. This structured approach allowed us to explore user pain points, validate assumptions, and gain targeted insights into the navigation issues faced within the lingerie eCommerce experience. Here’s a breakdown of each phase:
Research Phases
Survey: Conducted an online survey targeting both new and experienced users of lingerie eCommerce platforms. This survey helped gather quantitative data on common frustrations, navigation preferences, and perceived usability issues, specifically focusing on navigation and advertisement impact.
Interview: In-depth interviews were held with a selected group of participants to explore their experiences in greater detail. The interviews provided qualitative insights into user frustrations with navigation and popup ads and gathered feedback on ideal navigation improvements.
Benchmarking: Analyzed popular eCommerce websites in the lingerie industry, including Clovia and similar platforms, to understand standard navigation patterns, filter usage, and popup strategies. Benchmarking helped pinpoint common design pitfalls and best practices.
Initial Assumptions
Before beginning the research, I made a few assumptions:
Users struggle with traditional navigation systems, which feel cumbersome and unintuitive.
Frequent promotional popups create a disruptive experience, leading to user frustration.
Overly bold, “in-your-face” advertisements contribute to a negative shopping experience.
Key Insights
Following the research, I captured the following insights:
Navigation Challenges: Users consistently struggled with navigation on both the web and app versions of certain eCommerce sites, especially Clovia. The excessive number of options led to information overload, making it difficult for users to find desired items efficiently.
Frustration with Popups: Promotional popups were a major pain point. Users reported feeling overwhelmed by repeated ads interrupting their browsing flow, adding to overall frustration.
Preference for Layout Consistency: While navigation methods were challenging, users appreciated the layout and positioning of navigation elements. They felt that these elements were generally well-placed and did not want drastic changes to the layout but preferred enhancements to make the process smoother.
Need for Subtle Navigation Enhancements: Users suggested that navigation improvements should focus on ease of access rather than overhauling the user flow. Small changes to the accessibility of filters and navigation options could address user frustrations without disrupting familiar patterns.
Takeaway
The research confirmed that users experience high levels of frustration with traditional navigation and disruptive popups. By refining the method of accessing navigation elements without altering their positioning, we could improve the user journey, creating a more fluid and enjoyable shopping experience that respects the user’s browsing flow. This approach will ensure a seamless, intuitive experience while maintaining the familiarity of the current layout.
Pain Points
Overwhelming Navigation Complexity
Users expressed frustration with navigating through a maze of categories, subcategories, and filters on the platform. The sheer volume of options made finding specific items feel like a chore, leaving users feeling lost and overwhelmed as they tried to browse or find a particular product.Constant Disruption by Popups
Frequent promotional popups disrupted the shopping flow, making users feel bombarded and pressured rather than welcomed. This relentless stream of ads forced users to repeatedly close popups, breaking their concentration and ultimately leading to a sense of frustration and impatience.Lack of Streamlined Filtering
Filtering products felt cumbersome and unintuitive, especially when users wanted to refine their search. They found the current filter options challenging to use, and the experience felt tedious and time-consuming. This lack of easy, effective filtering made it harder to locate items quickly, testing users' patience.Navigational Consistency with Improved Accessibility
While users valued the overall layout of navigation elements, they struggled with accessing them quickly and efficiently. Many expressed a desire for a simplified, more accessible navigation method that wouldn’t disrupt the familiar flow but would prevent the need to be overly precise or rushed. This delicate balance between familiarity and ease was something users felt strongly about.
User Persona
The target group for this lingerie eCommerce project primarily consists of two key demographics: young college students aged 18-24 and working women aged 25-35, all of whom are urban, fashion-conscious, and digitally active. These women seek stylish, comfortable, and affordable lingerie options suited to their diverse lifestyles—from college campuses to professional workplaces. While the younger segment leans towards trendy, budget-friendly options and values a quick, engaging shopping experience, the working professionals prioritize quality, durability, and efficiency, often shopping during limited free time. Both groups are frustrated by cluttered interfaces and intrusive advertisements, preferring a streamlined, user-friendly platform that caters to their needs with minimal friction and distraction.
User Journey Map
In the user journey map, I focused on creating a seamless experience for users like Ritika. Key areas of improvement included simplifying navigation and reducing interruptions like popups. The goal was to make the browsing and checkout process quick and intuitive, ensuring a smooth, distraction-free experience tailored to her busy schedule.
Wireframes
Redesigning the navigation system was a complex and iterative process. While these wireframes capture only a fraction of the journey, they represent extensive exploration and refinement. This redesign aimed to enhance usability and reduce friction, all while preserving familiar user behaviors and intuitive patterns. By implementing an E-pattern navigation flow, we ensured faster and more natural navigation, allowing users to achieve their goals with ease. The process began with low-fidelity sketches on paper, progressed through multiple rounds of testing and refinement, and concluded with detailed wireframes in Figma, grounded in rigorous user research and interaction studies.
UI Development
Following multiple iterations during the wireframing phase, the UI development process was strategically planned and executed. These iterations allowed us to identify and address potential barriers to a seamless user flow, ensuring that the final design provided an intuitive and frustration-free experience.
The UI development encompassed the entire website, from the landing page to the final step of successfully placing an order. During this process, subtle but impactful adjustments were made to enhance usability and align the design with user expectations. The implementation of these changes significantly improved the navigation experience and overall functionality.
The development phase involved coding the entire interface using **HTML, CSS, and JavaScript**, ensuring responsiveness and visual consistency across devices. The branding for the project, which added a cohesive and professional aesthetic, was meticulously crafted by Subhanshi Kesarwani.
Below, I have outlined the primary UI enhancements, including detailed views of different states within the flow, to showcase how each step contributes to an efficient and user-centric experience. This documentation highlights the thoughtfulness and precision embedded in the design process.
Learnings
This project was a deep dive into understanding how user experience (UX) directly influences consumer behavior and purchasing patterns. A key takeaway was recognizing that improving an already widely accepted navigation system requires a delicate balance between innovation and familiarity. The goal is not to overwhelm users with an entirely new system but to present an enhanced experience that feels intuitive and effortless.
The solution I developed retained the familiarity of a top-bar navigation system while incorporating an F-pattern scanning approach, a user behavior observed in eye-tracking studies. This allowed for quicker, more organized navigation, aligning with how users naturally browse websites. User reviews confirmed that this approach significantly reduced frustration and made product discovery faster and easier.
Additionally, I learned that iterative wireframing is essential to the design process. Each iteration brought new insights into how users interacted with the navigation system, ultimately leading to a more polished and effective solution. For instance, feedback revealed that users found it challenging to locate products without accompanying images. Addressing this issue by prioritizing visual aids and categorization improved the time taken to find a product and enhanced overall satisfaction.
This project emphasized that effective redesigns are not about drastic changes but about thoughtful improvements that respect and build upon existing user behaviors. The experience reinforced the importance of user testing, iterative design, and empathy in crafting solutions that genuinely meet user needs.
