☕ Coffee App – A Premium Shopping Experience

Project Type: Personal UX/UI project

Role: UX & UI Designer

Tools: Figma | Duration: 2 weeks

🧭 Overview

The Coffee App is an e-commerce concept delivering a seamless, accessible, and visually refined shopping experience for coffee enthusiasts. Built with minimalist design principles and accessibility at its core, the app balances premium aesthetics with intuitive functionality.

"My goal was to translate the sensory richness of specialty coffee into a digital experience that feels both elevated and effortless."

🔍 The Challenge

Existing coffee retail apps often suffer from inconsistent interfaces, cluttered navigation, and poor mobile accessibility—creating friction in what should be an enjoyable discovery experience.

Design Challenge:

How might we create a modern, accessible shopping experience that elevates coffee products while reducing cognitive load for mobile users?

✏️ Design Approach

💡 Ideation & Wireframes

Implemented bottom navigation to optimize thumb-reach ergonomics on mobile devices
Established clear product hierarchy through strategic card layouts and intentional spacing
Developed low-fidelity wireframes, iterating based on layout performance and visual balance

Coffee app wireframe showing bottom navigation

Coffee app wireframe showing product hierarchy

Coffee app wireframe showing card layouts

Coffee app wireframe showing spacing experiments

🎨 Visual Language

Typography: Elegant, readable typeface with good hierarchy
Color Palette: Neutral tones + rich accents for premium feel
Themes: Full Light and Dark mode support for accessibility and user preference

📱 Final Designs

Dual Themes – toggle between light & dark modes
Simplified UX – clean bottom tab navigation
Consistent UI – reusable cards, spacing, and imagery
Mobile First – responsive & touch-friendly

♿ Accessibility Considerations

High contrast for both themes
Touch target optimization
Clear, scannable layout
Icons with text labels

✨ Key Learnings

Accessibility-first design demands early consideration of contrast ratios, spatial relationships, and navigation patterns.
UI extends beyond aesthetics—every design decision directly impacts user experience and conversion.
Dual-theme implementation challenges design consistency but significantly enhances user preference and accessibility.

🔮 Next Steps

Expand flows to include checkout process and user profile management
Conduct usability testing with target users to validate design decisions
Implement product filtering and personalized recommendation features

📌 Summary

A focused e-commerce design sprint emphasizing clean visual hierarchy, mobile-first accessibility, and dual-theme support. This project strengthened my ability to balance brand identity with usability requirements, particularly within mobile constraints.