top of page
logo2.png
activebasic cover.png
Enhancing Product Discovery and Boosting Customer Satisfaction for Wholesale Fashion Buyers

Intro

Active Basic USA (also called ACTIVE BASIC) is a fashion wholesaler specializing in contemporary young women's fashion, catering primarily to business owners, such as boutique and store owners. The company offers two main apparel categories: basics and trendy fashion styles.

My Contribution

As an in-house designer, I redesigned the website to improve product discovery and better differentiate between the basics and fashion categories, simplifying site navigation and enhancing mobile optimization. By focusing on improving product discoverability and enhancing mobile responsiveness, I helped increase user engagement and ultimately supported the company’s sales growth. I also worked on updating web banners and social media marketing collaterals.

The company-wide website was not responsive on mobile devices, and users found it difficult and time-consuming to discover products, resulting in an increase in customer inquiries and phone calls. There was a lack of clear distinction between the "basics" and "trendy fashion" categories, making it hard for customers to navigate the site and easily find the products they were looking for.

The Problem

End-to-End Web Design Workflow

flow chart.png

Main Updates

Old
MacBook Pro 16_ - 2.png

Outdated carousel and cluttered mega menu, with a single-brand structure causing confusion.

New
MacBook Pro 16_ - 1.png

Redesigned carousel, integrated mega menu banners, and dual-brand structure for improved product discovery and clarity.

Old
MacBook Pro 16_ - 2 (1).png

Homepage lacked a clear CTA and quick access to trending categories, making it difficult for users to discover new products and engage with the brand.

New
MacBook Pro 16_ - 1 (1).png

Added a 'Newsletter Sign-Up' to boost retention and FTC, and trending category cards with quick shop for easier discovery.

Old Mobile Site
iPhone 16 Pro Max - 2.png
active basic mobile proto.png
New Mobile Site
iPhone 16 Pro Max - 3.png
active new mobile.png

Empathize

Our users, typically busy professionals, reported difficulty navigating the website and relied heavily on customer support for recommendations due to unclear product categorization and limited usability. 

 

To better understand user needs, I collaborated with the Ecommerce and Customer Service teams to gather user complaints and identify the most frequently asked questions via phone and email. Additionally, the teams analyzed feedback related to navigation and mobile responsiveness, pinpointing specific areas where users encountered challenges.

Understanding Users

Common Customer Questions on Our Site

"Is this item categorized as trendy fashion or basic apparel?"

"Can you recommend similar styles to this item I see online?"

"Mobile font size is way too small to read! Can I order via phone?"

"What are the color options for the items on the main banner?"

Understanding Product Discovery & Mobile Shopping Preferences

I conducted interviews with 10 business owners to understand their challenges with product discovery and mobile shopping. Key areas of focus included streamlining product discovery, improving navigation by distinguishing 'basics' from 'trendy fashion,' and addressing issues that lead to increased customer inquiries.

I aimed to gather feedback to enhance the website's functionality and create a more user-friendly shopping experience for Active Basic USA’s customers.

Below are the user interview questions:
 

  • What are the biggest challenges you face when trying to find products on our shopping site?

  • What prompts you to reach out for customer support while using our shopping site?

  • What aspects of the current mobile shopping experience do you find frustrating or confusing?

Through user interviews and analysis of complaints, we identified the following key insights to enhance the user experience.

User Insight #1

Users desired a quick way to discover new trends and arrivals directly from the landing page.

User Insight #2

Users wanted a clear distinction between the BASIC and TRENDY product lines.

User Insight #3

Users found the website outdated and inconsistent with the brand’s trendy image.

Define

active basic venn.png

Website Improvement Priorities

Based on user insights, the current website feels cluttered and outdated, lacking essential features like a modern mega menu and an announcement bar, which are standard on competitor fashion wholesaler sites. Additionally since our customers are frequently on the go, the poor mobile responsiveness has led them to frustration. As the company expands from a focus on basics to also offering trendy styles, stakeholders have emphasized the need for clear divisions between these categories to enhance navigation and streamline the shopping experience.

Website Annotation
Group 2.png
Mobile Site
active basic mobile proto.png

The mobile site mirrors the desktop version, resulting in a non-mobile-friendly experience. Fonts are too small, and navigation, including the menu and checkout, is nearly impossible. The layout needs optimization for smaller screens to improve usability.

Ideate

Brand Clarity

To reduce confusion and enhance brand clarity, I decided to reconstruct company website into two distinct entities: ACTIVE BASIC, focused on essential styles, and ACTIVE USA, showcasing trendy fashion. Each line is represented by a unique logo, reinforcing their individual identities while maintaining a cohesive brand presence.

Old Logo
active basic usa old log.png
New Logos

Lo-Fi Prototypes and IT Collaboration

I presented my design ideas to the IT team, who handled the website updates, using a low-fidelity prototype created with Balsamiq. I focused on key features like the new mega menu, product categorization, and mobile-responsive layout, explaining how these improvements would enhance product discovery and user functionality. I also shared the design rationale, such as simplifying navigation and improving user flows.

 

This approach was applied to both the desktop and mobile website redesigns, ensuring a seamless experience that aligned with user needs and business goals, even though we didn’t work directly with developers.

New Wireframe 2.png
Graphic Tees.png

From Prototype to Reality

old design gif.gif
Old Website
new design gif.gif
Updated Web Design
active basic mobile final proto.gif
Updated Mobile Web Design

Banner Design

After understanding the needs of our target audience, which consisted of fashion business owners purchasing in bulk, I shifted my approach to web banner design. I was tasked with creating banners that not only looked appealing but also resonated with users. Instead of focusing solely on aesthetics, I took a user-centered approach, prioritizing clear, concise messaging that highlighted key product traits, such as color choices and product style numbers, to make discovery easier for users.

 

The banners were designed to be easy to navigate, and also served as CTA, guiding users toward quick decisions. This approach helped increase engagement and supported business goals, aligning the design with both user needs and the company’s objectives.

Final Result

Lesson

This experience emphasized the importance of aligning design goals with available technical resources early in the process. Working directly with the IT team, rather than developers, taught me how to prioritize design features and explore alternative solutions when faced with limitations.

Additionally, although Active Basic USA operated in a B2B space, the web design challenges were very similar to those seen in B2C environments. It reinforced the significance of product discovery, visual appeal, and user-friendliness in driving engagement and improving the overall user experience.

Impact

​Despite these challenges, the redesign was a success. The core layout remained intact, resulting in a 40% reduction in customer inquiries about product discovery and a 35% increase in weekly sales. The results validated the overall strategy, while leaving room for future refinements.

The Struggle

During the redesign process, I collaborated with the IT team to improve the website’s navigation and product discoverability. However, there were limitations in development capacity, which meant some smaller design details and interactive elements from the low-fidelity prototype couldn’t be fully implemented. This required adjusting expectations and finding compromises.

Thank you for reading!

bottom of page