Demographic Synthesis
Survey data revealed a core audience aged 26 to 35. While internet usage was high, "browsing fatigue" was common. This data pushed the design toward extreme clarity and speed to prevent users from abandoning the site.
Danel
Fashion Brand and Online Store
Designing a clean and flexible online shop for a new fashion brand, from idea to launch. This project bridge the gap between creative visual direction and a high-conversion commerce engine.
Note on Process: This project highlights an earlier
stage of my UX/UI practice. It shows the end-to-end evolution from
research and journey mapping to a live WordPress and WooCommerce
implementation.
Verified Outcomes
Sold Out
The first collection sold out shortly after launch, meeting the brand's initial business goals.
4-Week Build
Launched a fully responsive custom theme with secure checkout in under a month.
100% Success
Post-launch iterations ensured 100% of tested users could find size info instantly.
The Strategic Win
By owning both the design and the build, I ensured zero "design debt" during handoff. The final live site is a pixel-perfect match to the validated Figma prototypes.
1. Empathize & Define
Empathy Mapping
One-to-one interviews surfaced fears regarding online payments and the hassle of returns. This map moved the focus away from "looks" and toward "reassurance."
Persona: Selma
We defined Selma, a marketing manager who shops on her phone during her commute. She needs to find her size quickly and read clear return conditions before committing to a purchase.
Why?
The data kept us honest. Instead of guessing, I tailored the tone and visual cues to how this specific group actually lives and works.
2. Ideate & Structure
Customer Journey Mapping
I mapped Selma’s journey from landing to confirmation. This highlighted the "Size Friction Point," leading us to make the size chart a prominent, persistent feature rather than a hidden link.
User Flow & Layout Exploration
I defined a linear flow: Home to Shop to Product to Cart. This simplicity ensured that Selma could finish her task even with limited attention on a mobile device.
Why?
Our goal statement was: "Let Selma buy quickly without stress." If an idea made the flow longer, it was removed. Speed was our primary metric for success.
3. Design & Prototype
Wireframing: Pencil to Digital
I started with low-fidelity pencil sketches to confirm the content order. Moving into digital wireframes allowed us to test spacing and alignment before committing to the brand's high-contrast aesthetic.
High Fidelity UI
I designed 18 layouts in Figma. The focus was on high-quality product imagery and a calm, minimal color palette that allows the fashion pieces to stand out.
Why?
High-fidelity mocks helped the founder see the real site before a single line of code was written. This prevented costly rework during the development phase.
4. Execution & Iteration
The WordPress & WooCommerce Build
The site was built as a custom theme to match the Figma designs perfectly. I integrated size variations, secure payment gateways, and a clear return policy directly into the checkout flow.
Usability Testing & Refinement
One week after launch, I tested the site with six users. Four struggled with sizing, leading to a critical post-launch update: adding a clear size chart link to every product page and strengthening security cues in the footer.
Leadership Lessons
- Research keeps design honest: Using demographic data saved us from making "artistic" choices that would have confused the actual buyers.
- Wireframes reduce rework: Catching flow issues on paper made the development phase significantly faster.
- Post-launch matters: Watching real people exposed issues that were invisible in Figma, directly increasing the conversion rate.
Retrospective
By owning the UX, UI, and the build, I ensured the brand vision was never diluted by technical constraints. Danel successfully transitioned from a concept to a selling fashion brand with a resilient, user-validated store.