☕ 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 that delivers a seamless, accessible, and visually rich shopping experience for coffee lovers. With an emphasis on minimalist design and accessibility, this app is crafted to feel both luxurious and functional.

"I wanted users to experience the richness of their favorite brew through an intuitive and elegant interface."

🔍 The Problem

Many coffee store apps/websites suffer from inconsistent UI, cluttered navigation, and low accessibility—especially on mobile.

Design Challenge:

How might we design a clean, modern shopping experience for coffee products that's both accessible and visually appealing?

✏️ Design Approach

💡 Ideation & Wireframes

Focused on a bottom navigation for thumb-friendly access
Ensured product hierarchy through card layouts and spacing
Drafted low-fidelity wireframes and refined based on layout experiments

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

Designing for accessibility requires thinking early about contrast, spacing, and navigation.
UI is not just aesthetics—every pixel affects experience.
Dual themes challenge consistency—but also expand flexibility.

🔮 Next Steps

Add checkout and user profile flows
Perform usability testing with real users
Explore product filters and recommendations

📌 TL;DR (for recruiters)

Coffee App is a short e-commerce design sprint focused on clean visuals, mobile accessibility, and dual theme support. The project taught me how to balance brand aesthetics with usability, especially on mobile screens.