Designed a women’s fashion e-commerce website from audience research and catalog structure to UI, user flows and responsive layouts. Created more than 20 pages, including the catalog, product page, cart, checkout and personal account.
Role
UX/UI Designer
Key E-commerce Challenges
The challenge was to combine a bold brand expression with a simple purchase flow
Researched the target audience and competitor websites to understand how users shop for clothing online and what information they need at different stages of the purchase journey. Based on these insights, defined the key user flows and requirements for the store structure.
01
A Large Catalog Can Be Overwhelming
Solution
Introduce categories, filters and sorting to help users find relevant products faster
02
Strong Visuals Shouldn’t Get in the Way of Product Selection
Solution
Preserve the brand’s expressive visual style while creating a clear hierarchy of information and actions
03
The Path to Purchase Should Be Clear
Solution
Connect the product page, cart and checkout into a clear, sequential flow without unnecessary steps
From Catalog to Product Selection
A bold brand experience doesn’t get in the way of finding and evaluating products
Designed the catalog to reflect the brand’s character while remaining easy to browse. The unconventional grid and large imagery draw attention to the products, while categories, filters and sorting help users narrow down their choices faster.
Catalog
The unconventional grid supports the brand’s character, while large product imagery makes items easier to explore. On hover, users can save products to favorites and view available colors
Product Page
Images, color and size options, price and key actions are available at the first level, so everything users need to make a decision is immediately accessible
Homepage as a Brand Showcase
The first screens should communicate the brand clearly and guide users toward the next step
Brought together the brand’s visual identity, main categories, new collections and links to key store sections on the homepage. Large imagery and expressive typography establish StyleHaven’s character, while the structure helps users move quickly from discovering the brand to browsing products.
Brand Character
Large visuals and expressive typography create a recognizable and bold brand presence
Path to Shopping
Categories and product selections help users move quickly from browsing to the catalog
Cart Before Checkout
Users can review and adjust their order before proceeding to checkout
Brought selected products, options and the total price together in the cart so users can quickly review everything before checkout. They can also change quantities, remove items or return to a product without unnecessary steps.
Order Review
Products, sizes, quantities and prices are visible before users proceed to checkout
Changes Without Extra Steps
Items can be adjusted or removed directly in the cart
From Cart to Checkout
The checkout journey is broken into clear steps without unnecessary information
Designed checkout as a sequential flow after the cart, so users always understand what they need to complete and what happens next. Information and actions are distributed across clear steps while keeping the focus on completing the purchase.
Clear Sequence
Each step follows naturally from the previous one and guides users toward completing the order
Focus on Checkout
Each screen contains only the necessary information and key actions
A Page That Introduces the Brand
The brand’s story, values and visual identity help users better understand StyleHaven
Brought together the brand story and its core values on the About page. Preserved the visual character of the store so that learning about the company feels like a natural continuation of the StyleHaven experience and helps build trust.
Brand Character
The story and visual presentation communicate the brand’s mood and positioning
Building Trust
Company information helps users better understand who stands behind the store
Settings and Purchases in One Place
Users can manage their profile, orders and favorites without switching between multiple sections
Brought the main post-purchase actions together in the personal account, including profile details, order history, favorites and account settings. Organized the information by purpose so users can quickly find the section they need.
Profile and Settings
Personal details and key account settings are grouped in one section
Orders and Favorites
Purchase history and saved products are available side by side, making it easy to return to them
Returns Without Unnecessary Complexity
Users understand what to do and what information is required at each step
Designed a dedicated return flow so users can complete the process independently without contacting support for basic information. Structured the steps and required data sequentially to keep the process clear and predictable.
Clear Return Flow
The process is divided into sequential steps so users always understand what to do next
Everything About the Return in One Place
Required information and actions are kept within one flow without unnecessary transitions
Easy Access to Contact Information
The main contact options and company information are available on a single page
Brought all contact information together in one place so users can quickly choose a convenient way to get in touch and find the details they need without searching through the website.
Easy Access to Contact Information
The main contact options and company information are available on a single page
Brought all contact information together in one place so users can quickly choose a convenient way to get in touch and find the details they need without searching through the website.
Validated Key User Flows
Testing helped identify navigation issues before developer handoff
Tested the menu, catalog and personal account with users. Observed how they completed key scenarios, identified friction points and refined the solutions. After making changes, retested the areas where users had experienced difficulties.
Navigation
Checked how easily users could find the right sections through the menu
Catalog
Observed how easily users could browse products and make selections
Validated Key User Flows
Testing helped identify navigation issues before developer handoff
Tested the menu, catalog and personal account with users. Observed how they completed key scenarios, identified friction points and refined the solutions. After making changes, retested the areas where users had experienced difficulties.
Navigation
Checked how easily users could find the right sections through the menu
Catalog
Observed how easily users could browse products and make selections
Design Outcome
Designed a complete e-commerce journey from brand discovery to purchase and post-purchase interactions
Created a complete e-commerce website with more than 20 pages and the core purchase flows. Developed the structure and key user journeys, conducted usability testing, prepared responsive layouts and a UI Kit, and organized the final designs for developer handoff.
Complete Purchase Journey
The catalog, product page, cart, checkout, personal account and returns are connected into one consistent user journey
Validated Solutions
Tested key flows with users, refined the designs based on findings and retested problematic areas
Ready for Development
Prepared responsive layouts, built a UI Kit and organized the final designs for developer handoff