Problem
Problem
As a coffee enthusiast living in Barcelona, I noticed that my favourite coffee guide website is cluttered and difficult to navigate. The experience didn’t reflect the city’s vibrant coffee culture.
As a coffee enthusiast living in Barcelona, I noticed that my favourite coffee guide website is cluttered and difficult to navigate. The experience didn’t reflect the city’s vibrant coffee culture.
Executive summary
Executive summary
Role
Role
This was a personal side project where I explored how thoughtful UX and clean UI could improve discoverability and usability in a niche content website.
This was a personal side project where I explored how thoughtful UX and clean UI could improve discoverability and usability in a niche content website.
Impact at a Glance
Impact at a Glance
Improved information architecture for easier discovery of cafés
Redesigned UI for a clean, modern, and trustworthy look
Tested with 4 users — all completed navigation tasks successfully
Served as a learning project to strengthen my UX research and visual design skills
Improved information architecture for easier discovery of cafés
Redesigned UI for a clean, modern, and trustworthy look
Tested with 4 users — all completed navigation tasks successfully
Served as a learning project to strengthen my UX research and visual design skills
context & problem
context & problem
The original BCN Coffee Guide website lacked clarity in its structure and design:
Overloaded menus made it hard to find specific cafés or information
Visual design was inconsistent and uninviting
Users didn’t feel confident relying on the site as a trustworthy source
The original BCN Coffee Guide website lacked clarity in its structure and design:
Overloaded menus made it hard to find specific cafés or information
Visual design was inconsistent and uninviting
Users didn’t feel confident relying on the site as a trustworthy source
old website
research & insights
research & insights
Research Protocol
Participants: 4 coffee enthusiasts from Barcelona
Methods: Card sorting, navigation tasks, think-aloud testing
Tasks: Find a café by neighborhood, search for specific roaster info
key inisghts
key inisghts
Users expected cafés grouped by location and style
Terminology needed simplification (e.g., “brew methods” confused casual users)
Trust improved when photos and ratings were visible alongside names
Card Sorting: Organised website content more logically with feedback from coffee enthusiasts.
process & design decisions
process & design decisions
Information Architecture
Information Architecture
Reorganised navigation into simple categories: map, recommendations, work with us and blog
Reduced menu depth and used clearer, familiar labels.
Reorganised navigation into simple categories: map, recommendations, work with us and blog
Reduced menu depth and used clearer, familiar labels.
Visual Design
Visual Design
Adopted a minimal, content-first UI with strong typography and spacing.
Introduced consistent photo treatments to make the guide feel curated.
Introduced vibrant colours inspired by the brand’s logo and selected modern, minimalistic fonts like Lemon Milk and Montserrat to elevate the site’s appearance.
Adopted a minimal, content-first UI with strong typography and spacing.
Introduced consistent photo treatments to make the guide feel curated.
Introduced vibrant colours inspired by the brand’s logo and selected modern, minimalistic fonts like Lemon Milk and Montserrat to elevate the site’s appearance.
Collaboration & Constraints
Collaboration & Constraints
Solo project completed over evenings/weekends.
Main constraint: lack of collaboration. It was a solo project and I didn't get a chance to work on it with anyone from BCN Coffee Guide, despite the fact that I reached out to them multiple times.
Solo project completed over evenings/weekends.
Main constraint: lack of collaboration. It was a solo project and I didn't get a chance to work on it with anyone from BCN Coffee Guide, despite the fact that I reached out to them multiple times.
Wireframe
Final Design
Testing & Iterations
Testing & Iterations
Tested navigation with 4 users:
All could find cafés by neighborhood without guidance.
Suggested adding filters (price, WiFi, atmosphere) for future iterations.
Iterated on layout spacing and card hierarchy to improve scannability.
Changed the order for the web. Users didnt had the need to search based on location, but based on other filters.
Tested navigation with 4 users:
All could find cafés by neighborhood without guidance.
Suggested adding filters (price, WiFi, atmosphere) for future iterations.
Iterated on layout spacing and card hierarchy to improve scannability.
Changed the order for the web. Users didnt had the need to search based on location, but based on other filters.
Before
Wireframe
Final Design
results & impact
results & impact
Task success: 100% (n=4 users, navigation tasks)
Time-on-task: Average task completion reduced by ~40% compared to old site
Perceived trust: Users described the new UI as “cleaner” and “more reliable”
Personal growth: Strengthened my process in IA design, user testing, and side-project ownership
Task success: 100% (n=4 users, navigation tasks)
Time-on-task: Average task completion reduced by ~40% compared to old site
Perceived trust: Users described the new UI as “cleaner” and “more reliable”
Personal growth: Strengthened my process in IA design, user testing, and side-project ownership
reflection & learnings
reflection & learnings
Even small, personal projects can be powerful UX exercises.
Clarity and simplicity in IA make a huge difference, even in content-driven sites.
Working alone reinforced the value of scoping tightly to deliver something usable within free time.
Even small, personal projects can be powerful UX exercises.
Clarity and simplicity in IA make a huge difference, even in content-driven sites.
Working alone reinforced the value of scoping tightly to deliver something usable within free time.
takeaways
takeaways
BCN Coffee Guide wasn’t a commercial project, but it allowed me to practice end-to-end design in a low-stakes environment. It demonstrates my ability to spot UX opportunities in everyday experiences and apply structured design thinking — even outside of formal client work.
BCN Coffee Guide wasn’t a commercial project, but it allowed me to practice end-to-end design in a low-stakes environment. It demonstrates my ability to spot UX opportunities in everyday experiences and apply structured design thinking — even outside of formal client work.