Cakes & Sweets E-Commerce Website
Cakes & Sweets
E-Commerce Website
Type: E-Commerce Web / Bootcamp Project
Tools: Figma, FigJam, Google Forms, Zoom
Role: UX/UI Designer
Type: E-Commerce website / Bootcamp Project
Tools: Figma, FigJam, Google Forms, Zoom
Role: UX/UI Designer
Role: UX/UI Designer
"The easiest way to shop for your favorite cakes and sweets"
"The easiest way to shop for your favorite cakes and sweets"
Project Overview
Project Overview
This project involves designing an E-Commerce website for a cake and sweets business, aimed at improving how users find, filter, purchase, and customize cakes and sweet products online. The goal was to create a delightful online shopping experience that solves user pain points around search, filtering, personalization, and checkout.
This project involves designing an E-Commerce website for a cake and sweets business, aimed at improving how users find, filter, purchase, and customize cakes and sweet products online. The goal was to create a delightful online shopping experience that solves user pain points around search, filtering, personalization, and checkout.
My Role
My Role
I worked with a team of designers to handle both UX and UI aspects of the project from research to visual delivery:
I worked with a team of designers to handle both UX and UI aspects of the project from research to visual delivery:
UX Responsibilities
UX Responsibilities
Conducted user interviews with 5 potential customers
Interviewed 4 stakeholders (business owners)
Performed competitor analysis and feature mapping
Ran card sorting (35 responses) to define how
products should be categorized
Conducted tree testing (30 responses) to validate navigation structure
Built site maps and wireframes
Conducted user interviews with 5 potential customers
Interviewed 4 stakeholders (business owners)
Performed competitor analysis and feature mapping
Ran card sorting (35 responses) to define how
products should be categorized
Conducted tree testing (30 responses) to validate navigation structure
Built site maps and wireframes
UI Responsibilities
UI Responsibilities
Designed visual style (colors, typography, layout)
Created both desktop and mobile high-fidelity screens
Built interactive prototypes
Designed visual style (colors, typography, layout)
Created both desktop and mobile high-fidelity screens
Built interactive prototypes
Design Process
Design Process
Research: Interviews with customers and stakeholders > to understand shopping behaviors and business needs.
Competitive Analysis: Studied competitor features and market patterns.
Card Sorting: Collected 35 responses to organize product categories logically.
Tree Testing: Got ~30 responses to validate site structure and labeling.
Sitemap & Wireframes: Defined the navigation flow and content layout.
Usability Testing: Tested flows for search, filtering, and checkout.
Prototype: Built interactive demo for both desktop and mobile.
Research: Interviews with customers and stakeholders > to understand shopping behaviors and business needs.
Competitive Analysis: Studied competitor features and market patterns.
Card Sorting: Collected 35 responses to organize product categories logically.
Tree Testing: Got ~30 responses to validate site structure and labeling.
Sitemap & Wireframes: Defined the navigation flow and content layout.
Usability Testing: Tested flows for search, filtering, and checkout.
Prototype: Built interactive demo for both desktop and mobile.
Usability Testing & Metrics
Usability Testing & Metrics
✲. Based on tree testing and prototype feedback:
35 card sorting responses helped organize product categories intuitively.
~30 tree test responses ensured logical navigation paths for users.
Users found the filtering experience clearer and reduced browsing time by ~25% (estimated).
Checkout flow had over 80% completion rate during prototype testing (estimated).
✲ Note: These figures are based on usability insights collected through testing phases.
✲ Testing Method: Task-based usability testing.
✲ Participants: 7 users
Key Metrics:
90% of users found opportunities more relevant after filtering by skills
80% reported that browsing opportunities felt easier and more meaningful
Visual clarity and navigation confidence improved as a result of iterations
Outcome
Outcome
Created a user-centered E-Commerce experience for sweets and cakes shopping.
Improved product discovery with intuitive categories and filters.
Ensured a smooth checkout process suitable for both desktop and mobile.
Delivered a complete interactive prototype ready for development or stakeholder review.
Echo successfully provided a volunteer experience that is:
Relevant: Opportunities tailored to individual skills
Easy to discover: Clear filters by date, location, and field
Actionable: Users can navigate upcoming events and select based on real preferences
Responsive user interface design
Responsive user interface design
Prototype
Prototype
✴︎ Final Result: The project solved key business and user problems by building a structured, efficient, and delightful shopping experience, backed by research, testing, and data-driven design decisions.
✴︎ Final Result: The project solved key business and user problems by building a structured, efficient, and delightful shopping experience, backed by research, testing, and data-driven design decisions.