— From research to usability-tested e-commerce UX/UI

_{🗓️ Developed in January 2026}

This project consists of the full UX/UI design process of a mobile-first organic food e-commerce application.
It covers the complete design system lifecycle - from market research and user studies to interactive prototypes and usability testing - structured across three consecutive phases.

📁 Repository Structure

01_research/             ← Phase 1: Benchmarking & target audience study
02_ux_design/            ← Phase 2: Information architecture, flow & wireframes
03_final_ui_design/      ← Phase 3: Visual design, interactive prototype & usability tests

🔍 01 — Benchmarking & Target Audience Study

_{🗓️ October 2025}

What's inside

Competitive analysis of 5 organic food platforms and a user research study (survey + empathy map + user personas).

Benchmarking

Five platforms were analysed: Veritas, Ametller Origen, Naturitas, Planeta Huerto and Original Market. Each was evaluated on visual design, responsiveness, and whether it fulfilled 7 key user stories (home page, shop, filters, product detail, cart, checkout, post-purchase confirmation).

Target Audience Study

A survey of 30 respondents was designed and distributed via WhatsApp and Instagram, with a 76–73% response rate respectively. Questions covered buying habits, attitudes towards organic food, platform preferences and pain points.

Four user segments were identified: Committed (35%), Undecided (45%), Negative (10%), Neutral (10%).

Files

Research report (PDF)
Empathy map (Canva)
FigJam board with annotated screenshots of all 5 platforms (Figma)
2 User Personas (Canva)
Survey results (Google Forms)

🧩 02 — Experience Design

_{🗓️ November 2025}

What's inside

Information architecture (card sorting + sitemap), user flow diagram, and mobile-first wireframes with desktop adaptation.

Card Sorting

An open card sorting session was conducted in person with 4 participants (later simulated in Miro), using 30 product cards. Participants sorted them freely into self-defined categories over 60 minutes.

Sitemap

A full sitemap was designed in Miro, representing all screens and their hierarchy, including secondary navigation systems (search, filters, sorting, recommendations, related products, keywords, dropdowns).

User Flow

A complete user flow was designed for the main task: purchasing a product from home to order confirmation, including all decision points and merge points.

Wireframes

Low-fidelity wireframes were designed in Figma using a mobile-first approach (iPhone 13/14 frame), then adapted to desktop. Pages covered:

Screen	Mobile	Desktop
Home	✅	✅
Search results	✅	✅
Product details	✅	✅
Create account	✅	✅
Checkout	✅	✅
Post-purchase	✅	✅
Sidebar	✅	❌
Search results (with modal)	✅	❌

Files

UX design report (PDF)
Card sorting board (Miro)
Sitemap (Miro)
User flow diagram (Miro)
Mobile-first wireframes (Figma)
Desktop wireframes (Figma)

🎨 03 — Final Interface Design

_{🗓️ December 2026}

What's inside

Full visual design system (with color gamut, typography, iconography, layout, elements, usability guidelines, accessibility,...), high-fidelity final mobile prototypes and interactive flow.

High-Fidelity Mockups

All previous wireframes were rebuilt as high-fidelity prototypes in Figma with full visual styling. Additional screens added: Search results (with filters), Search results (with no results) and FAQs.

Interactive Prototype

The previous user flow was rebuilt with all interactive connections in Figma, allowing full navigation simulation from Home to post-purchase confirmation.

Usability Tests

Three usability tests were conducted with participants matching the target audience profile (ages 24, 38 and 49). Each session included screen recording and face recording, following a structured script.

5 tasks tested:

Category exploration and return to home
Filtering by rating and Best Seller label
Product detail, favourites and add to cart
Checkout flow with cart editing
Post-purchase help and FAQs access

Key conclusions:

Design is clear, intuitive and visually appropriate for the product category.
Users successfully related components across the interface (footer ↔ sidebar, filters ↔ product list).
Some key elements (checkboxes, secondary CTAs, text-heavy sections) were skipped or overlooked under task pressure.
Users interpreted screens differently from each other — flexibility and error tolerance are priorities for improvement.

Proposed improvements:

Redesign key components to be more visually prominent.
Increase flexibility for different user profiles and abilities.
Expand product variety and content depth for a realistic implementation.

🎥 A Recorded Demo is also available.

Files

UI design report (PDF)
Full design system with high-fidelity mobile prototypes and interactive design (Figma)
Updated user flow with prototype screens (Miro)
Usability test recording (Dropbox)