top of page

Project Overview

Client: Urban Legend (Streetwear Clothing Brand)
Industry: Fashion / E-commerce
Project Duration: 6 weeks
Role: UX/UI Designer, Researcher, Content Creator
Tools: Figma, Mockup

Objective:
Design a responsive e-commerce website for Urban Legend that balances edgy, trend-driven visuals with intuitive, frictionless shopping experiences.

Problem Statement

Streetwear customers want to browse and buy quickly, but many small fashion sites suffer from:

  • Overdesigned layouts that hurt usability

  • Slow or clunky mobile shopping flows

  • Poor product organization and searchability

  • Lack of visual cohesion between brand and interface

Urban Legend needed a site that felt as iconic and rebellious as its brand—without compromising user experience.

Research & Discovery

Methods:

  • Target Audience Interviews: Conducted informal interviews with Gen Z and Millennial streetwear fans

  • User Surveys: Focused on shopping habits, device usage, and frustrations with online fashion sites

  • Competitive Audit: Compared top streetwear brands (e.g., Supreme, Kith, Stussy)

Key Insights:

  • Users want fast-loading pages and clear product shots

  • Mobile-first design is essential—90% browse on phones

  • Cart abandonment is often caused by unclear sizing info or slow checkouts

UX Design Process

User Persona:
Jordan, 22 – Streetwear enthusiast who shops drops weekly and cares about both function and hype aesthetics.

User Journey:

  • Homepage → Drop Collection → Product Page → Size Chart → Add to Cart → Checkout

Wireframes & Prototyping:

  • Built low-fidelity wireframes for navigation, product filtering, and mobile carts

  • Iterated on high-fidelity designs with brand visuals, using feedback from test users

Usability Testing:

  • Remote testing via Maze on both desktop and mobile

  • Improvements made to the navigation bar, product page layout, and checkout clarity

UI Design

Visual Identity:

  • Color Palette: Monochrome foundation with neon accents (edgy but clean)

  • Typography: Bold, condensed headers paired with sleek body text

  • Imagery: Large, high-contrast model shots and product close-ups

  • Logo: Custom graffiti-style type for brand recognition

E-Commerce Elements:

  • Product filtering by size, category, and collection

  • Hover-over product previews

  • Sticky add-to-cart button for mobile users

  • Interactive lookbook/gallery for styling inspiration

Accessibility:

  • Color contrast compliant (AA)

  • Descriptive alt text for all product imagery

  • Touch-friendly buttons and inputs

Content Creation

  • Product Descriptions: Focused on material, fit, and styling tips

  • Homepage Hero: Engaging taglines like “Your style. Your myth.”

  • Size Guides & FAQ: Wrote helpful support content to reduce buyer hesitation

Outcomes

  • Bounce rate decreased by 41% in mobile testing

  • Session length increased by 2.2 minutes

  • Testers reported: “This feels like a site I’d actually shop from.”

Lessons Learned

  • Minimalism ≠ boring: Simplicity and style can coexist

  • Every tap matters on mobile: One extra step is one step too many

  • Your brand vibe should live in every detail: Fonts, buttons, and CTAs should feel like the brand

BARBARA PHILLIPS (6).png
bottom of page