UX/UI Coffee E-commerce Website
Project Overview
🔹 Project Name: UX/UI Design for a Roasted Coffee Bean E-commerce Website
🔹 Project Goal: To create a simple, engaging, and specialized user experience for online coffee shopping
🔹 My Role: Research, wireframing, UI design, testing, and optimization
Research & Discovery
✅ User Personas:
• Coffee Enthusiasts: Users who care deeply about quality and flavor
• Casual Buyers: People looking for a quick and easy purchase
• Café Owners & Baristas: Buyers who purchase in bulk
✅ User Pain Points:
❌ Difficulty choosing the right coffee beans
❌ Lack of detailed descriptions about flavor and brewing methods
❌ Complicated and lengthy purchase process
✅ Competitive Analysis:
🔍 Reviewed similar websites like Blue Bottle Coffee, Onyx Coffee Lab, and Starbucks
🔍 Compared UI/UX elements and purchase flows
UX Design Process
✅ Information Architecture (IA)
📌 Defined key pages:
• Home Page → Featured products and special offers
• Shop Page → Advanced filters for selecting coffee
• Product Page → Complete coffee details + easy purchase button
• Blog Page → Educational articles about coffee and brewing techniques
✅ Wireframing
✅ Prototyping (High-Fidelity)
🎨 Designed UI with warm tones and legible typography for a minimalist and luxurious feel
✅ User Testing & Iteration
📊 Conducted tests with multiple users and refined the purchase process
UI Design (User Interface Design)
🎨 Color Palette: Dark brown + beige + cream for a premium feel
🔤 Typography: Modern, readable fonts
📸 High-quality imagery showcasing coffee beans and brewing methods
🛒 Strong CTA buttons to increase conversions
Final Outcome
📌 Improved User Experience:
✔️ Faster and more intuitive checkout process
✔️ Simplified coffee selection for users
✔️ Increased conversion rates due to a well-structured product presentation
📌 Prototype