Overview
Stio, a premium outdoor wear brand wanted to improve the way their users shopped for outfits while improving conversion. The result was a feature that allows users to visualize complete outfits including top and bottoms across multiple categories making purchase decision easier. We ensured the experience could scale with new product categories over time.
My Role
- UX and visual design of the feature.
- Identified and tracked metrics alongside UX Research to define success.
- Collaborated with client to align on requirements and resolve ambiguity.
- Collaborated with development and QA teams for handoff and launch.
Duration
1 month
Team
1 Designer
1 Developer
Stio - Website Manager
Stio - Brand team lead
Stio - Merchandize team lead
Tools
Figma
Shopify
The Challenge
- Users wanted cohesive outfits for their outdoor adventures.
- Allow dynamic price visibility for both individual products and the full outfit.
- Design for winter outfits with a scalable structure to easily support future seasons and collections.
Key Research Insights
1
Existing experience grouped items by usage, which didn’t match users' shopping behavior.
2
Product information was missing which lead to confusion and made purchase decision harder.
3
Existing experience lacked visibility into the full product range, making browsing tedious.
The Solution
Style Pairing at a Glance
Users can view the top and bottom stacked vertically, making it easy to judge how well the pieces coordinate in terms of style and color.
Tabbed navigation for Ease of Use & Scalability
Products are categorized by layers to match how users shop. Tabs help users focus on one layer at a time and allow easy expansion for future categories.
Full Outfit Preview and Easy Checkout
"View Selections" drawer lets users preview their full outfit, see individual and total prices, and add items to cart—helping them make confident, faster purchase decisions.
Quick Access to Product Details
Providing essential product information helps users feel confident in their purchase decisions. A side drawer allows them to view details and select sizes without navigating away.
Designing for multiple devices
Learnings
1
Technical feasibility can be limited by dev team's approach. Having system knowledge can help recommend better solutions.
2
Stakeholder expectations and technical feasibility does not always match. Educating the stakeholders is needed.
3
Recommending one primary design while framing others as alternatives, made decision-making faster and more focused.