OVERVIEW

Scope: Responsive e-commerce design

Client: Top Stitch Clothing Company

The Challenge: Led the complete digital transformation and rebranding for Top Stitch, a global retail company with 400+ stores across 32 countries. The project involved creating a scalable e-commerce platform that would unify their digital and physical retail experiences while establishing a new brand identity

The Result:

1. Allows for easy browsing and quick checkout

2. Learns the user’s clothing taste with every interaction to recommend future buys

3. Easy usability whether on web, mobile or tablet

4. Rebranding that reflects affordable good quality clothing for all

Tools used: Board and markers, Nikon camera, Figma, Marvel Prototype, Adobe Photoshop, Adobe XD

TARGET USER

Online shoppers that seek quality clothing at value prices.

Business Challenge

Top Stitch needed to:

• The transition from purely physical retail to omnichannel commerce

• Create consistency between digital and in-store experiences

• Build a scalable e-commerce platform for global markets

• Establish new brand positioning without disrupting existing customer base

my Role & APPRoach

As Lead Designer:

• Managed end-to-end design process

• Conducted user research

• Created design system

• Led usability testing

• Prepared development handoff

Strategic Approach

Research & Discovery

Conducted comprehensive analysis including:

• Competitive analysis of direct/indirect competitors

• User interviews across demographics

• Shopping behavior pattern analysis

• Brand perception study

• Technical capability assessment

Key Findings:

• Two distinct shopping behaviors identified:

• Browse-first shoppers (43% of users)

• Direct-purchase shoppers (57% of users)

• 65% of users switch between online/offline shopping

• Primary pain points in existing e-commerce experiences

• Critical features for conversion

Design Strategy

Developed three-tiered approach:

1. Brand Evolution

• Modern, inclusive visual identity

• Value-focused messaging

• Cross-channel consistency

2. User Experience

• Personalized product recommendations

• Streamlined checkout process

• Responsive design system

• Intuitive navigation structure

3. Technical Foundation

• Scalable information architecture

• Performance optimization

• Global commerce capabilities

• Analytics implementation

Solution

Information Architecture

• Developed taxonomy based on card sorting data

• Created scalable category structure

• Implemented intuitive product filtering

• Designed search optimization system

User Interface

• Built comprehensive UI component library

• Created responsive design system

• Implemented personalization framework

• Developed micro-interaction system

Key Features

1. Smart Product Recommendations

• Machine learning integration

• Behavioral tracking

• Preference analysis

• Personalized suggestions

2. Streamlined Checkout

• One-page checkout option

• Guest checkout flow

• Multiple payment methods

• Order tracking integration

3. Responsive Design

• Device-specific optimizations

• Touch-friendly interfaces

• Performance optimization

• Cross-browser compatibility

After outlining the features, products and categorization it was time to understand the task flows (or paths) a user could take within the Top Stitch site and how different users would interact differently given those tasks.  A task flow was created around the key task of completing checkout. It was important that we continued to empathize and understand the user’s journey to build out a more usable and delightful product. A user flow was created for persona Sam given the task of checking out.

Once the architecture was in place, the desktop and mobile homepages were sketched out prior to digitizing. This freed up time and allowed the loose quality to free up attachment to any one design.  These designs were based on competitor analysis, mood boards and the information architecture data gathered.

After revising a few iterations of the low-fidelity wireframes it was time to gather the UI elements. I brainstormed the attributes that would define the brand— trendy, inclusive, dependable and affordable. The following visual identity and UI kit were designed to represent the Top Stitch brand.

Testing & Iteration

Usability Testing

• 5 rounds of user testing

• In-context testing in users' homes

• Multi-device testing

• Task completion analysis

Key Improvements

Based on testing insights:

• Redesigned cart modal for better visibility

• Added modal dismissal options

• Made newsletter signup optional

• Enhanced loading states

• Improved error handling

Results

Quantitative Impact

• 92% task completion rate

• 3.2 second average page load

• 87% user satisfaction score

• 95% mobile usability score

Qualitative Feedback

• "Intuitive navigation structure"

• "Easy to find products"

• "Smooth checkout process"

• "Professional brand impression"

Based on the feedback received I improved the screens that would cause the most user frustration or would potentially cause a user to not complete the checkout process. The prototype underwent another round of usability testing to check the progress, so I could smooth out details before handing off for development.

-Scroll down for more projects-

NEXT STEPS

1. Enhanced Analytics

• Implement advanced tracking

• Set up A/B testing

• Create conversion funnels

• Establish KPI dashboard

2. Feature Expansion

• Loyalty program integration

• Advanced personalization

• International shipping

• AR product visualization

3. Continuous Improvement

• Regular usability testing

• Performance optimization

• Conversion optimization

• Feature enhancement