PROJECT TITLE
Wooosh™ — Hat Retail eCommerce Web Design
Duration
March - Present
Role
User Experience Design
User Interface Design
Tools
Figma
Adobe Illustrator
Shopify
Framer
Design Highlights
Clean grid layout showcasing bold product photography.
Mobile-first design ensuring seamless shopping from any device.
Custom product pages with detailed descriptions, size options, and easy add-to-cart functionality.
Brand-first UI that keeps Wooosh’s identity front and centre, blending fashion-forward energy with premium streetwear vibes.
Dynamic filtering & collections system to help users explore exclusive drops with ease.
OVERVIEW
Description
Wooosh is a start-up founded by close friends, specialising in exclusive headwear from classic snapbacks and fitted caps to rare tuckers. The brand curates high-end collections from premium labels like New Era, with a focus on sourcing limited drops and rare finds.
Problem
Wooosh launched as a passion project among friends, with a sharp eye for rare and high-end headwear, but no digital platform to match the quality of their finds. Operating solely through social media limited their reach and made it difficult for customers to browse collections or make purchases efficiently. There was a clear disconnect between the exclusivity of the products and the accessibility of the brand experience, which lacked the structure and visual identity needed to grow.
Goals
The objective was to design a streamlined, responsive eCommerce platform that would elevate Wooosh’s presence and make rare headwear feel both premium and personal. The site needed to reflect the uniqueness of the collection, prioritise smooth navigation, and work beautifully across devices. Beyond functionality, it was important to craft a visual language that captured Wooosh’s identity minimal, confident, and rooted in streetwear culture while building trust through clarity and design.
BACKGROUND
Vision
Wooosh isn’t just selling hats, it’s selling access to a culture. The vision was to create a space where every product drop feels intentional, rare, and exciting. From the first interaction, users should feel like they’ve stepped into something curated, modern, and rooted in community. The design had to mirror the brand’s energy: clean, confident, and collector-worthy. We wanted it to feel like streetwear luxury, just great design and great product.
Process
1
Research
Founder Chats
Competitor Scan
2
Discovery
User Persona
User Journey
3
Definition
Moodboard
Low Fidelity
Mid Fidelity
4
Final Design
Responsive UI
RESEARCH
Founder Chats
Before jumping into Figma, I sat down with the Wooosh team to understand what they were really trying to build. Their goal was clear: create a clean, premium platform that reflected their love for rare streetwear, without losing that “built-by-us” energy.
Competitor Scan
I reviewed popular hat-focused eCommerce sites. New Era, Hat Club, and streetwear boutiques to evaluate how they use layout, product hierarchy, and branding. Most leaned either too corporate or too chaotic. Wooosh needed to land right in the middle.
DISCOVERY
User Personas
Jamal, 24
London, UK
Jamal is deep into streetwear culture. He’s constantly tracking rare drops, follows resell pages, and treats his hat collection like art. He’s loyal to brands like New Era and is always on the hunt for limited editions.
Goals
Find rare or exclusive hats
Get notified on drops
View product shots before buying
Ines, 22
Coventry, UK
Ines is not a collector, but she likes throwing on a hat as part of her fit. She shops mostly on her phone, values style over brand, and needs things to be easy and fast.
Goals
Find trendy hats without digging too much
Understand fit/sizing easily
Confidence buying from a new brand
User Journey
Jamal, 24
Discovery
Sees an Instagram ad from Wooosh featuring a rare drop.
Landing
Clicks through to the homepage, drawn in by the bold visuals.
Browse
Uses the “Collections” filter to find New Era collabs.
Engage
Zooms in on product shots, checks available sizes.
Convert
Adds to cart and checks out quickly without distractions.
Ines, 22
Discovery
Taps through a friend’s IG story tagging Wooosh
Landing
Arrives on product page directly via link
Browse
Checks sizing info and color options
Trust
Scrolls to find product reviews or shipping info
Convert
Adds to cart and uses Apple Pay for quick checkout
DEFINITION
Moodboard
Inspired by premium streetwear, music culture, and collector energy, I curated a visual direction that felt clean but bold. Think black and white as a base, with bursts of colour from the product itself. The goal: let the hats do the talking.
Inspiration
Fonts & Typography
Low Fidelity
I sketched early layouts around clarity and flow: strong product hierarchy, minimal navigation, and a fast scroll from discovery to checkout. Wireframes focused on keeping things lean.
Mid Fidelity
I designed a full set of mid-fidelity wireframes to lock in structure, layout, and flow before moving into high-fidelity design. The goal was to keep things intuitive, with a strong focus on product visibility and user flow from homepage to checkout.
Homepage
Login Overlay
Register Overlay
Product List
Product Page
Checkout Overlay
Final Designs
Mock Up & Responsive UI
With the structure and flow locked in, I moved into high-fidelity mockups to bring Wooosh to life visually. The design blends bold streetwear energy with a clean, product-first layout.
I designed for responsiveness from the start, building layouts that scale across desktop, tablet, and mobile without losing hierarchy or clarity. Whether browsing on the go or exploring at home, users get the same focused experience.
👋 Thanks for stopping by! Let’s Get in Touch!
CREATED BY WESLEY NOSA