E-commerce Website Redesign

Website Redesign

KNOBS: Transforming LGBTQ+ Fashion Retail Digital Experience

Redesigned Knobs SF's e-commerce platform, transforming a confusing 15+ category maze into an intuitive 5-category system that reduced task completion time by 60% and increased user confidence in purchasing decisions.

Redesigned Knobs SF's e-commerce platform, transforming a confusing 15+ category maze into an intuitive 5-category system that reduced task completion time by 60% and increased user confidence in purchasing decisions.

UX Designer • UI Designer • Researcher

UX Designer • UI Designer • Researcher

3 weeks

3 weeks

Solo Project

Solo Project

Visit Project

Visit Project

Overview

Overview

When a beloved Castro District fashion retailer's digital presence was failing their loyal community, I stepped in to bridge the gap. As both a customer and UX designer, I had unique insight into the disconnect between their vibrant physical store and frustrating online experience.

When a beloved Castro District fashion retailer's digital presence was failing their loyal community, I stepped in to bridge the gap. As both a customer and UX designer, I had unique insight into the disconnect between their vibrant physical store and frustrating online experience.

This solo project challenged me to balance inclusive design principles with conversion optimization, demonstrating how thoughtful UX research can transform both user satisfaction and business metrics in a niche but passionate market.

This solo project challenged me to balance inclusive design principles with conversion optimization, demonstrating how thoughtful UX research can transform both user satisfaction and business metrics in a niche but passionate market.

Problem

Problem

The core issue wasn't just poor usability, it was a fundamental misalignment between business goals and user needs.

The core issue wasn't just poor usability, it was a fundamental misalignment between business goals and user needs.

Navigation Chaos:

15+ overlapping categories with dead-end links

Brand disconnect:

Outdated visuals failing to capture Castro district energy

Poor product discovery:

No filtering system or clear hierarchy

User frustration:

4/4 usability test participants couldn't complete basic tasks efficiently

Solution

Solution

The result is a shopping experience that’s bold yet intuitive, empowering users to explore, filter, and shop confidently, just like they would in-store.

The result is a shopping experience that’s bold yet intuitive, empowering users to explore, filter, and shop confidently, just like they would in-store.

View Prototype

View Prototype

View Prototype

View Figma File

View Figma File

View Figma File

The Design Journey

To redesign Knobs' digital experience with confidence and empathy, I followed a design process grounded in behavioral insight, UX best practices, and user-centered thinking. Because the original website was functional but frustrating,
I focused on uncovering where and why users were getting stuck.

To redesign Knobs' digital experience with confidence and empathy, I followed a design process grounded in behavioral insight, UX best practices, and user-centered thinking. Because the original website was functional but frustrating,
I focused on uncovering where and why users were getting stuck.

My Research Process included:

My Research Process included:

Heuristic Evaluation

Identified usability issues and interface inconsistencies

Competitive Analysis

Evaluated Knobs against local stores in the area.

Usability Test (4 users)

Observed real users completing key tasks, noting friction points and behaviors.

User Interview (4 users)

Explored motivations, frustrations, and goals while shopping for menswear online.

User Persona

Synthesized findings into a user persona that reflected shared needs and habits.

Card Sorting

Restructured product categories based on how users naturally group and label items.

This combination of approaches and user feedback allowed me to build a redesign strategy rooted in both usability and emotional connection.

This combination of approaches and user feedback allowed me to build a redesign strategy rooted in both usability and emotional connection.

Are similar stores doing this better?

My analysis of 4 local competitors (Entour, Blade + Blue, Rolo, Freeborn) revealed that Knobs was falling behind in usability and brand cohesion.

My analysis of 4 local competitors (Entour, Blade + Blue, Rolo, Freeborn) revealed that Knobs was falling behind in usability and brand cohesion.

Knobs' digital experience failed to capture its vibrant in-store energy. I strategically selected Blade + Blue as my primary benchmark for navigation patterns and page hierarchy

Knobs' digital experience failed to capture its vibrant in-store energy. I strategically selected Blade + Blue as my primary benchmark for navigation patterns and page hierarchy

View Competitive Analysis

View Competitive Analysis

This competitive insight directly informed my Information Architecture restructuring and visual design decisions, ensuring Knobs could compete effectively online while maintaining its authentic market position.

This competitive insight directly informed my Information Architecture restructuring and visual design decisions, ensuring Knobs could compete effectively online while maintaining its authentic market position.

Understanding the boutique: The Original Website

The heuristic evaluation provided a foundational lens for what was blocking users from efficiently completing tasks or enjoying their shopping experience.

The heuristic evaluation provided a foundational lens for what was blocking users from efficiently completing tasks or enjoying their shopping experience.

Visit current site

Visit current site

Visit current site

These findings identified navigation and visual hierarchy as primary conversion blockers, which I validated through subsequent user testing to ensure design solutions addressed real user pain points, not just expert assumptions.

These findings identified navigation and visual hierarchy as primary conversion blockers, which I validated through subsequent user testing to ensure design solutions addressed real user pain points, not just expert assumptions.

Taking a Behavioral Approach

Users were asked to complete 4 core tasks that simulate typical shopping behaviors. Each task was timed and counted by the number of clicks.

Users were asked to complete 4 core tasks that simulate typical shopping behaviors. Each task was timed and counted by the number of clicks.

Task 1

Task 1

Find a black long-sleeve shirt under $50 and add it to the cart

Task 3

Task 3

Proceed to checkout (stop before payment)

Task 2

Task 2

Locate return & exchange

Task 4

Task 4

Explore the "Made in San Francisco" Collection

See overview results

See overview results

See overview results

From this test, several insights became clear:

From this test, several insights became clear:

Navigation is a primary point of friction.
Poorly labeled categories and the absence of filtering slowed task completion.

Navigation is a primary point of friction.
Poorly labeled categories and the absence of filtering slowed task completion.

Product visibility needs work.
There was no indication for sold-out items, which confused users.

Product visibility needs work.
There was no indication for sold-out items, which confused users.

The interface lacks recovery options.
Users noted the absence of a “back” button, which made error correction difficult.

The interface lacks recovery options.
Users noted the absence of a “back” button, which made error correction difficult.

Aesthetics and branding are appreciated, but inconsistent. Requested larger fonts, stronger contrast and "About Us" Section.

Aesthetics and branding are appreciated, but inconsistent. Requested larger fonts, stronger contrast and "About Us" Section.

These insights directly informed my redesign strategy:

These insights directly informed my redesign strategy:

Simplyfing Navigation

Improving Information Architecture

Cohesive visuals

Cohesive visuals

Intuitive shopping flow

Intuitive

shopping

flow

Cohesive

visuals

Improving

information

architecture

Simplifying

Navigation

Getting into the shoppers mindset

My goal was to explore their shopping journey, from browsing to checkout, and uncover pain points, goals, and needs that could inform design decisions.

My goal was to explore their shopping journey, from browsing to checkout, and uncover pain points, goals, and needs that could inform design decisions.

Through 4 in-depth interviews and affinity mapping, I identified critical patterns driving purchase decisions:

Through 4 in-depth interviews and affinity mapping, I identified critical patterns driving purchase decisions:

Shopping promotions: "I'm more likely to buy when I see sales upfront, and recommendations."

Shopping promotions: "I'm more likely to buy when I see sales upfront, and recommendations."

"Recs for complementing items/accessories"

"Seeing sales items upfront definitely makes it easier to make decisions"

"If there is a sale then I am more likely to purchase."

Checkout Experience: "I want a simple, fast checkout with Apple Pay or guest options."

Checkout Experience: "I want a simple, fast checkout with Apple Pay or guest options."

“I want Apple Pay or guest checkout so I don’t have to enter all my info.”

"I definitely want a guest checkout option."

"I feel safer when sites don’t store my information."

"I traditionally don’t give sites my email address because I hate spam."

Navigation Frustrations: "I find too many similar products, confusing categories, and excessive ads frustrating when shopping online."

Navigation Frustrations: "I find too many similar products, confusing categories, and excessive ads frustrating when shopping online."

“Too many overlapping categories make it hard to know where to click.”

"It is difficult when there is an overwhelming amount of the same product. "

"I don’t like too many descriptions or overcomplicating it."

"there are too many categories and they overlap, e.g. outdoor that also has jeans and shorts"

Shopping preferences: "I value curated options based on my style and purchase history."

Shopping preferences: "I value curated options based on my style and purchase history."

“High-quality images and clear sizing guides are a must.”

“I want to see how clothes fit on different body types.”

“I need reviews and real-user photos to feel confident about sizing.”

"I just like pictures and reviews are helpful for sizing and fit."

View Affinity Map

View Affinity Map

View Affinity Map

These qualitative insights helped bridge the gap between user expectations and business goals, serving as a foundation for the persona and future design iterations.

These qualitative insights helped bridge the gap between user expectations and business goals, serving as a foundation for the persona and future design iterations.

Bringing online shoppers to life

Bringing online shoppers to life

I created a persona that reflects the goals, frustrations, and behaviors of a typical user in the men's fashion shopping space.

I created a persona that reflects the goals, frustrations, and behaviors of a typical user in the men's fashion shopping space.

I created a persona that reflects the goals, frustrations, and behaviors of a typical user in the men's fashion shopping space.

Michael West

35 years old • San Francisco, CA | Graphic Designer • Online Shopping Customer

Bio:

Michael West is a 35-year-old designer based in San Francisco, California. He enjoys attending music festivals and participating in social events. He spends time exploring websites with easy navigation and well-designed layouts.

Scenario:

He doesn’t buy when there is an overwhelming amount of the same product or too many overlapping categories. He purchases when there are new products but sold out immediately.

Pain Points:

He's frustrated by limited product variety, intrusive ads, cluttered categories, and missing order confirmation emails.

Needs:

Michael wants curated, trendy options with clear descriptions, high-res visuals on real bodies, easy navigation, and a save-for-later feature.

Goals:

He prefers Apple Pay for speed and privacy, guest checkout for convenience, and upfront access to sale items to simplify decisions.










He prefers Apple Pay for speed and privacy, guest checkout for convenience, and upfront access to sale items to simplify decisions.

Pain Points:

He's frustrated by limited product variety, intrusive ads, cluttered categories, and missing order confirmation emails.

Needs:

Michael wants curated, trendy options with clear descriptions, high-res visuals on real bodies, easy navigation, and a save-for-later feature.

Goals:

He prefers Apple Pay for speed and privacy, guest checkout for convenience, and upfront access to sale items to simplify decisions.

View User Persona

View User Persona

View User Persona

Meet Michael West, a 35-year-old designer based in San Francisco, who enjoys shopping online for men's clothing. He values a fast and secure shopping experience when purchasing stylish outfits. However, the overwhelming number of ads and redundant product categories on current websites make it difficult for him to find what he’s looking for. He needs a better way to discover curated clothing options with detailed visuals to make informed purchasing decisions

Meet Michael West, a 35-year-old designer based in San Francisco, who enjoys shopping online for men's clothing. He values a fast and secure shopping experience when purchasing stylish outfits. However, the overwhelming number of ads and redundant product categories on current websites make it difficult for him to find what he’s looking for. He needs a better way to discover curated clothing options with detailed visuals to make informed purchasing decisions

Meet Michael West, a 35-year-old designer based in San Francisco, who enjoys shopping online for men's clothing. He values a fast and secure shopping experience when purchasing stylish outfits. However, the overwhelming number of ads and redundant product categories on current websites make it difficult for him to find what he’s looking for. He needs a better way to discover curated clothing options with detailed visuals to make informed purchasing decisions

Restructuring Walls for Knobs

My Information Architecture audit revealed a critical conversion blocker: the navigation was a maze of overlapping categories, dead-end links, and ambiguous labels that prevented users from reaching checkout.

My Information Architecture audit revealed a critical conversion blocker: the navigation was a maze of overlapping categories, dead-end links, and ambiguous labels that prevented users from reaching checkout.

The existing sitemap showed 15+ scattered categories with no clear hierarchy, creating decision paralysis instead of guided discovery.

The existing sitemap showed 15+ scattered categories with no clear hierarchy, creating decision paralysis instead of guided discovery.

View current sitemap

View current sitemap

I asked myself:
How should these categories be grouped? What should they be called? How do people naturally search for products, and how do they expect to move through the site?
These weren’t questions I could answer alone. I needed shoppers to help rebuild the walls.

I asked myself:
How should these categories be grouped? What should they be called? How do people naturally search for products, and how do they expect to move through the site?
These weren’t questions I could answer alone. I needed shoppers to help rebuild the walls.

Shoppers sort, I design

Rather than impose designer assumptions, I conducted card sorting with 5 users to rebuild the architecture based on actual mental models.

The existing structure failed to deliver clarity, simplicity, and relevance. Here's what they showed me:

Rather than impose designer assumptions, I conducted card sorting with 5 users to rebuild the architecture based on actual mental models.

The existing structure failed to deliver clarity, simplicity, and relevance. Here's what they showed me:

Participant 1

  • Emphasized underwear as a stand-alone category

  • Used "fetish" as a tag rather than a primary category

Participant 2

  • Preferred searching by item type, not style or vibe

  • Highlighted bright, mesh, and festive tags for filtering rather than navigating.

Participant 3

  • Took a tag-heavy approach, based on visuals or styling themes

  • Proposed tags like bi-color, organic print, sporty and sex party.

Participant 4

  • Categorized by item type, keeping it clean and direct.

  • Reinforced the need for intuitive, recognizable labels

Participant 5

  • Took a unique, visual-first approach; color and style

  • Advocated for visual organization over rigid structures.

View Card Sorting

View Card Sorting

View Card Sorting

This user-centered approach transformed a chaotic structure into:

This user-centered approach transformed a chaotic structure into:

Clear, item-based top categories

Featured, Tops, Bottoms, Underwear and Accessories

Remove empty or inactive pages

that frustrates users.

Event or vibes-based filters

Festival, Night Out, Everyday, Mesh, Metallic, Bright

Featured approach to discovery

Let users explore by theme without being locked into a category path, e.g., Pride Collection

The new IA reduced navigation friction by 60% and aligned digital browsing with how customers naturally shop, turning a checkout barrier into a conversion pathway.

The new IA reduced navigation friction by 60% and aligned digital browsing with how customers naturally shop, turning a checkout barrier into a conversion pathway.

Using Michael West as my north star, a time-conscious shopper seeking "a cute cotton t-shirt for a party," I designed a streamlined 4-step task flow that eliminates decision fatigue.


The redesigned flow reduced his shopping path from 8+ unclear steps to 4 intuitive ones: Browse → Filter → Select → Checkout.

Using Michael West as my north star, a time-conscious shopper seeking "a cute cotton t-shirt for a party," I designed a streamlined 4-step task flow that eliminates decision fatigue.

The redesigned flow reduced his shopping path from 8+ unclear steps to 4 intuitive ones: Browse → Filter → Select → Checkout.

View Task Flow

View Task Flow

View Task Flow

The result? A straightforward and intuitive path that empowers shoppers like Michael to browse with confidence and get what they need effortlessly.

The result? A straightforward and intuitive path that empowers shoppers like Michael to browse with confidence and get what they need effortlessly.

Sketching the Store: From Insights to Interface

I translated user needs into early design concepts for the homepage, PLPs, and PDPs. Using Blade + Blue's clean, intuitive layout as a strategic benchmark.


I sketched solutions that balanced Michael's need for streamlined navigation with Knobs' unique brand personality.

I translated user needs into early design concepts for the homepage, PLPs, and PDPs. Using Blade + Blue's clean, intuitive layout as a strategic benchmark.

I sketched solutions that balanced Michael's need for streamlined navigation with Knobs' unique brand personality.

From pencil and paper to wireframes.

I translated sketches into low-fidelity wireframes to define the structural foundation for Michael's optimal shopping journey. Every element placement was research-informed and intentional.


The wireframing process established core UX principles: simplified navigation architecture, cohesive visual hierarchy, and seamless task flows.

I translated sketches into low-fidelity wireframes to define the structural foundation for Michael's optimal shopping journey. Every element placement was research-informed and intentional.

The wireframing process established core UX principles: simplified navigation architecture, cohesive visual hierarchy, and seamless task flows.

I created a scalable foundation that balanced user needs with technical feasibility, setting the stage for high-fidelity design.

I created a scalable foundation that balanced user needs with technical feasibility, setting the stage for high-fidelity design.

New Visual Identity: Bringing Knobs to Life Online

The big question: How could I bring the playful, colorful energy of the in-store experience, and meet Michael West’s need for clarity and style, into a visually engaging, user-friendly digital space?

I developed a visual system that bridges Knobs' vibrant in-store energy with Michael's need for clarity and usability. I landed on Helvetica Neue, a typeface that's clean, modern, and flexible enough to balance both fashion-forward aesthetics and practical UI needs.

The big question: How could I bring the playful, colorful energy of the in-store experience, and meet Michael West’s need for clarity and style, into a visually engaging, user-friendly digital space?

I developed a visual system that bridges Knobs' vibrant in-store energy with Michael's need for clarity and usability. I landed on Helvetica Neue, a typeface that's clean, modern, and flexible enough to balance both fashion-forward aesthetics and practical UI needs.

A photo-derived color palette using Adobe Color to extract authentic purples and blues from store imagery, and a simplified logo redesign that maintained rainbow energy while improving scalability.

This strategic visual framework preserved Knobs' playful brand personality while creating the clean, trustworthy interface that research showed users needed for confident online shopping.

A photo-derived color palette using Adobe Color to extract authentic purples and blues from store imagery, and a simplified logo redesign that maintained rainbow energy while improving scalability.

This strategic visual framework preserved Knobs' playful brand personality while creating the clean, trustworthy interface that research showed users needed for confident online shopping.

The Final Design

This was where everything- Michael’s journey, the refined navigation, the curated categories, and the bold visual identity- came together in one seamless, interactive experience.

This was where everything- Michael’s journey, the refined navigation, the curated categories, and the bold visual identity- came together in one seamless, interactive experience.

My goal was to create a design that felt authentic to Knobs; playful, stylish, and unapologetically expressive; while still being user-friendly and easy to navigate.

My goal was to create a design that felt authentic to Knobs; playful, stylish, and unapologetically expressive; while still being user-friendly and easy to navigate.

View Prototype

View Prototype

View Prototype

View Figma File

View Figma File

View Figma File

Product Success

After redesigning Knobs’ website with shoppers like Michael West in mind, I was able to deliver a digital experience that better reflects the in-store energy Knobs is known for.

After redesigning Knobs’ website with shoppers like Michael West in mind, I was able to deliver a digital experience that better reflects the in-store energy Knobs is known for.

Clear visual hierarchy enhances product discovery

Eliminated dead-end links improving user confidence

100% of test users successfully completed the checkout flow

60% reduction in task completion time

Next Steps

Immediate Priorities

A/B Testing

Key user flows to validate design decisions

Mobile responsive design

Matching competitor digital strategies

Developer collaboration

Ensuring design implementation fidelity

Future Enhancements

Personalization features

Based on shopping history

Back-in-stock notifications

Addressing online shopping confidence

AR try-on functionality

Enhancing online shopping confidence

Community features

Reflecting LGBTQ+ brand values

What I learned

Design Process Insights

User research is non-negotiable

Every design decision is validated through real user feedback

Information Architecture drives everything

Clear structure enables confident navigation

Brand authencity matters

Visual identity must reflect real-world experience

Personas guide decisions

"Michael West" provided clarity for every design choice

Business Impact Understanding

Reduced friction = increased sales:

Streamlined checkout addresses cart abandonment

Visual identity = brand differentiation:

Bold aesthetic sets Knobs apart from competitors

User confidence = customer loyalty:

Clear product information builds trust

Mettalic shape background image

Contact

Let's Get in Touch

Let's connect and start with your project ASAP.

Book a call

Or email danilosaavedrabi@gmail.com

Mettalic shape background image

Contact

Let's Get in Touch

Let's connect and start with your project ASAP.

Book a call

Or email danilosaavedrabi@gmail.com

Mettalic shape background image

Contact

Let's Get in Touch

Let's connect and start with your project ASAP.

Book a call

Or email danilosaavedrabi@gmail.com

More Projects

iOS Mobile App Design

iOS Mobile App Design

iOS Mobile App Design

Android Mobile App Design

iOS Mobile App Design

iOS Mobile App Design

E-commerce Website Redesign

E-commerce Website Redesign

Knobs:KNOBS: Transforming LGBTQ+ Fashion Retail Digital Experience

Knobs SF is a San Francisco-based retailer specializing in men's fashion, particularly catering to the LGBTQ+ community.

UX Designer • UI Designer • Researcher

2 weeks

Solo Project

Visit Project