Danel: Fashion Brand and Online Store
Designing a clean and flexible e-commerce store for a new fashion brand, from concept to launch.
Disclaimer: This case study serves as a portfolio presentation and may contain some inaccuracies in data or events.
Who
Danel is a new fashion label led by a creative director with a strong personal style. She came with a clear visual direction and needed support turning it into a working online store.
What
My job was to design the full e-commerce experience, from structure and layout to user flow and interface. I also helped with brand basics like naming and visual identity to make sure the design felt consistent.
Why
The goal was to create a simple, elegant shopping experience that works across devices and can scale with the brand. It had to look good, feel effortless to use, and be ready for real customers on day one.
My Role & Scope
I led the UX and visual design process for both the brand and the online store. My work followed a design thinking approach, adapted to a fast-moving solo project:
- Worked closely with the founder to understand her vision, audience, and values. Researched fashion industry trends and user habits around online shopping.
- Focused on core user needs, clear product display, simple navigation, mobile usability, trust in payments, and sizing confidence.
- Created early layout ideas for key pages based on research and style direction.
- Designed the full e-commerce experience in Figma, desktop and mobile screens,with a clean, minimal UI.
- After launch, I ran a usability study with users. Based on findings, I did further adjustments, refined visual elements, and improved customer's purchase flow.
Key Metrics & Outcomes
- Website launched on time with full desktop and mobile layouts
- First collection sold out shortly after launch
- Post-launch usability study led to key UX improvements:
- Added detailed size chart
- Reworked footer for easier access to shipping and returns
- Improved trust through clearer payment and security icons
The final product was clean, fast, and ready for international customers, matching the founder’s vision and delivering a smooth shopping experience.
Design Philosophy
- Empathise: I start by listening. Understanding real needs and behaviors shapes every decision.
- Define: I clarify the problem so each element has a role. If it doesn’t serve users and business needs, it doesn’t stay.
- Ideate: I explore many ideas, then strip away excess to make it simple but functional
- Design: I make interfaces that look and feel on-brand, yet stay clear and easy to use.
- Test: I gather feedback during the usability test to refine the design until it meets the high standard
Good design feels invisible. You get what you need without thinking about the interface.
Process Breakdown
1. Empathize & Define
We began by mapping out who we were designing for and why that guided every decision:
Demographic Charts
We ran an online survey (n=30) and plotted age, gender, and location. Over half (52 %) fell into the 25–34 age bracket, and 68 % were women, so we knew early on to focus on an experience that felt approachable and trustworthy to that group.
Why? The charts kept us honest about our audience. Instead of guessing who is keen fashion follower, we knew exactly who we were targeting and could tailor layouts, language, and visual cues to their habits.
Empathy Map
From one-on-one calls and survey comments, we captured what users said (“How do I find size that fits me”; "I always compare prices and quality"), thinks ("online orders can be hustle"; "Am I dumb for missing something"?), did (shops around to compare prices; uses her phone for online shopping), and feels (confused about online payments in the Balkans; feeling anxious about delivery).
Why? The empathy map surfaced unspoken needs, like sizing confidence and clear return info, helped us align on the most critical pain points before sketching anything.
Personas, User Stories, & Journey
From survey data (30 paricipants) and user interviews, I crafted a detailed persona: Selma, 29, Marketing Manager. Her goals included “find my size in under 10 seconds” and “feel confident about returns,” while her frustrations were “unclear security cues” and “hidden size charts.” The persona card showed her daily routines, preferred devices, and shopping habits, backed by percentages (52 % in her age bracket, 68 % female).
Why? Having Selma in mind kept design decisions grounded. Whenever I debated adding a content block or banner, I asked, “Would this help Selma meet her goal faster?” That filter prevented distractions and kept the experience lean.
- Arrive on homepage
- Filter products by size and style
- Arrive Inspect product details and size chart
- Add to cart with confidence
- Checkout using saved payment info
Each step included notes on her motivations (“quick decision”), pain points (“return worries”), and emotional state (“excited but cautious”).
Why? Turning the persona into a story sequence made it easy to spot where she might hesitate or loop back—so we could design solutions (like a persistent size chart link) before development even began.
Using Selma’s story, I plotted her journey across touchpoints: landing, browsing, product view, cart, and checkout. For each stage, the map visualized her actions, thoughts, and emotions, and highlighted opportunities (e.g., adding trust icons at checkout) and risks (e.g., complex filters).
Why? The journey map surfaced gaps that a flat flowchart misses. By seeing her emotional highs and lows, I knew exactly where to reinforce confidence and where to streamline steps—making the path from landing page to order confirmation as smooth as possible.
2. Ideate & Structure
With a clear picture of our users, we moved into solution space:
Goals Statement
“Enable Selma to find, select, and buy a product in three clicks or fewer on any device.”
Why? This one-line goal focused the team on speed and simplicity. Any design that didn’t shave clicks got dropped.
User Flow
We drafted a 5-node flow (Homepage → Shop → Product → Cart → Checkout) and validated it against Selma’s journey map.
Why? Plotting that flow revealed a missing “Size chart” step, users were looping back to the homepage when they couldn’t see size info. Catching it early saved hours of redesign later.
Sketches & Big-Picture Comps
We produced over 20 pencil sketches, both big-picture and close-ups, to explore hierarchy and focus areas.
Why? Sketching at this scale let us test many ideas with almost zero investment. For instance, we realised that a users like to see new high quality fashion items right after the landing on home page, a finding we then translated into wireframes.
Wireframes (Pencil → Digital)
First, rough pencil frames confirmed the overall layout.
Why? Pencil wireframes let us see the structure, identify early issues and organise the content before worrying about styling.
After, I rebuilt the wireframes in Figma as clickable wireframes to check spacing, proximity, alignmentand repetition of elements in addition to the flow, and content hierarchy.
Why? The digital wireframes then served as an early blueprint. Stakeholders could imagine using the interace and flow and flag issues before any visual design began. Also, the usability testing would be good idea, but the stakeholders decided that they are happy what they have so far and asked for design visuals
3. Design & Build
I translated approved wireframes into a fully functioning shop:
High-Fidelity Screens
Designed 18 polished desktop and mobile layouts in Figma, applying the brand’s logo, typography, and color palette.
Why? Creating high-fidelity screens made the design tangible for both the founder and end users. Seeing polished layouts in Figma helped the founder visualize the live site, gave clear guidance for the WordPress theme build, and allowed us to spot visual inconsistencies early, ensuring the final product felt cohesive and on-brand without surprises during development.
WordPress & WooCommerce Development
I Developed the live site on WordPress with WooCommerce:
- Created a custom theme from scratch to match the Figma designs
- Configured products, size variations, and payment gateways
- Integrated return policy and trust icons for security cues
- Tested the site across devices and browsers, checked responsive breakpoints, and fine-tuned load times and accessibility settings.
Why?Using WordPress + WooCommerce let you launch in under 4 weeks and gave the client a familiar, easy-to-use CMS for managing products and orders.
4. Usability Study & Iterate
Within the first week after launch, I ran a usability study with six real users. Among other findings, these stand out: Four out of six struggled to find the size details, and five voiced concerns about returns and payment security (all users looked at footer at some point to find return info). Using these insights, I added a prominent size chart link on every product page, reorganized the footer to surface shipping and returns information, and enhanced the security icons next to payment fields. A follow-up check with four users showed that three of them found size information immediately, and all four felt more confident completing their checkout.
Why? Testing with actual users revealed issues we couldn’t see in the design phase. By acting on concrete data—like 4/6 users missing size info—we made targeted fixes that improved clarity and trust, directly boosting the chances that visitors convert into buyers.
Based on feedback, I:
- Added a prominent size chart
- Reorganized footer links for shipping & returns
- Enhanced security icons next to payment fields
Lessons Learned and Reflection
Early Research Drives Focus
Mapping demographics and building an empathy map helped us spot key needs—like sizing confidence—before any design work. Investing time in research meant we avoided guessing and kept the design on target.
Wireframes Save Time
Sketching 20+ layouts by hand and moving into digital wireframes before visual design let us catch flow issues early. This cut rework later and made the high-fidelity stage smoother.
Post-Launch Testing Is Essential
Running a usability study with 6 users led to changes that boosted sizing findability from 2/6 to 3/4 users and resolved trust concerns for all participants. Small tweaks (size chart, footer reorg, icons) had a big impact on conversion readiness.
Full-Stack Ownership Speeds Delivery
Handling UX, UI, and the WordPress + WooCommerce build yourself let you launch in under 4 weeks. End-to-end control meant faster decisions and a cohesive final product.