Layered
Layered is a desktop shopping experience built for users who want quality cold weather products without having to scavenge the site. Layered has clean navigation to find what you need and focused product sections to make shopping for winter wear easy and accessible for every user.
Project Status
Solo project.
Project Duration
4 Weeks
Time to Read
5 Minutes
My Role
UX Research · UI Design · Prototyping · Behavior Design.
Case Study Video Coming Soon
A walkthrough of the Steady design process.
Process
Research · Define · Design · Test & Iterate
The Problem
When shopping online for winter wear, users struggle to save time and easily find the items they're looking for due to poor navigation and product organization
H&M
High quality imagery but an overwhelming homepage cluttered with excessive photos and inconsistent color use. Navigation is screen reader friendly though the layout can be cluttered with cards. Interactivity is high but it's often unclear what's clickable versus decorative. Multi language support and screen reader compatibility are strong.
American Eagle
Minimalist and clear with friendly colors and dynamic homepage images. Excellent search and category placement, though some elements look clickable but aren't. Outstanding contrast and responsive feel make it very easy to navigate. Dedicated accessibility mode and multi language options set it apart.
Research
To understand the landscape before designing, I conducted a competitive audit comparing two major clothing brands H&M and American Eagle focusing on visuals, navigation, interactions, and accessibility. The audit revealed consistent patterns around what frustrates online shoppers and what builds confidence while browsing.
Goals & Objectives
Surface Winter Wear Immediately
Make seasonal clothing the first thing users see so they can start shopping without any searching or scrolling.
Reduce Checkout Friction
Design a clean and straightforward checkout flow so users can complete their purchase quickly and confidently.
Simplify Category Browsing
Give users a clear and direct path through each clothing category so they never feel lost or overwhelmed.
Key Insights
Visual Density
High visual density and low contrast reduce readability and make navigation more difficult on the homepage.
Navigation
Minimalist layouts with clearly spaced, clickable images help users orient themselves and navigate confidently.
Accessibility
Having accessibility options available in the navigation bar at all times helps users adjust the experience when they need it, reducing frustration while browsing.
Visuals
Using a dark, editorial color palette keeps the focus on the product photography and creates a premium browsing experience without visual noise.
User Persona
Alex Rivera
Alex is a fashion design student who walks to campus every day and relies on online shopping for clothes. Because he doesn't drive, finding warm and practical winter wear quickly is especially important. He prefers websites with clear navigation and simple layouts that don't waste his time.
PAIN POINTS
- Winter wear is buried under promotions it's never where he expects it to be.
- Cluttered homepages waste his limited time between classes.
-
Too many steps at checkout make him abandon his cart and come back later.
GOALS
- Find winter wear quickly without wasting time he doesn't have.
- Browse categories confidently without getting lost or overwhelmed.
- Complete a purchase in as few steps as possible and get on with his day.
Design Solutions
Winter Wear on the Homepage
A seasonal hero banner greets users immediately with a winter promotion, removing any doubt about where to start.
Free Shipping Eligibility
A concept feature that automatically qualifies users for free shipping when a nearby store has overstocked items reducing excess inventory for the retailer while rewarding the customer.
Clear Category Navigation
Four primary categories are displayed prominently on the homepage as large visual cards, giving users a fast and confident path to what they're looking for.
Streamlined Checkout
The cart and checkout pages are clean and distraction free with a clear order summary and a single primary CTA so users can complete their purchase quickly and move on.
Journey Map
Task Mapping
Early Wireframes and Final Screens
Landing Page
Hoodies page
Item Page
Cart Page
Checkout Page
Order Complete
Design System
Key Challenges
Color Direction
An early decision was whether to use a bright white high contrast palette or something darker and more editorial. The dark charcoal direction was chosen because it let the product photography stand out without competing with the UI keeping the focus on the clothing.
Reinventing the Wheel
Early ideation pushed toward something that would standout, an interactive website with unexpected layouts. The competitive audit shut that down fast. Both H&M and American Eagle succeeded by keeping the experience familiar and predictable. The research didn't just inform the design it redirected it entirely.
Overcomplicating During Ideation
Creating a unique concept without breaking how a standard ecom store works was a constant tension. The free shipping eligibility feature is a good example a novel idea framed as a concept showing creative thinking.
Key Takeaways
Competitive Audit
The competitive audit directly shaped my design decisions. H&M's homepage crammed the page with photos and GIFs which created visual noise that overwhelms the user. American Eagle's minimalist approach showed the opposite, clean layouts with breathing room made navigation feel effortless. Evaluating both competitors helped inform the direction of the final design/Product.
UI Decisions
Deciding on the color palette was harder than expected. Every clothing website I referenced used a high contrast white background. Following that trend would have meant rebranding entirely. The charcoal direction came from the brand itself, sticking with the original vision over the industry norm was the right call, even if it took time to commit to it.
Information Architecture
Most ecom sites lead with a hero banner and a product grid. This site takes a different approach, placing four large vertical category columns front and center so users can get to what they are looking for the moment they land on the page. This design puts the user's time first.