BCN Coffee guide
OVERVIEW
As an expat in Barcelona with a growing passion for coffee, I stumbled upon the BarcelonaCoffeeGuide. While their website was informative, it was challenging to navigate. This inspired me to embark on a UX/UI redesign project aimed at improving clarity and usability.
IMPACT
Improved Navigation: Simplified the navigation by enhancing the visibility of the subscribe button and removing unnecessary features, making the site easier to use.
Streamlined Event Access: Redesigned the events section to allow users to find details quickly without excessive scrolling.
Cleaner Landing Page: Reduced clutter and added a clear call-to-action for newsletter subscriptions, making the page more focused and user-friendly.
Enhanced Coffee Place Pages: Organised the coffee place listings with better alignment and imagery, that would lead to a more engaging and visually appealing experience.
Stronger Branding: Used vibrant colours and modern fonts to refresh the site’s look, aligning it with the brand’s identity while maintaining simplicity.
GOALS
RESEARCH AND ANALYSIS
I conducted user testing with four individuals to assess how easily they could find specific information. While all users could locate coffee places and media features, they encountered issues with navigation, excessive scrolling, and unclear business offerings. For example, although all participants could find Orval Barcelona using the search bar, most were frustrated by the need to scroll through numerous tags. Similarly, half of the users struggled to fully understand the business offerings, and finding media information was not always straightforward.
DESIGN CHALLENGES
PLANNING
Sitemap Creation: Developed to guide the redesign process.
Card Sorting: Organised website content more logically with feedback from coffee enthusiasts.
Mid-fidelity Designs: Created designs that balanced aesthetics with functionality, adhering to the business owner’s preference for simplicity and cost-effectiveness.
DESIGN ENHANCEMENTS
High-Fidelity Designs: Crafted key screens showcasing the improved user interface.
UI Changes: 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.
Font
AaBbCcDdEeFfGgHh
AaBbCcDdEeFfGgHh
Colors
Accent colour, Font colour, colour block, background:
REFLECTIONS
In future projects, I plan to engage directly with site owners from the start to better understand their business goals and incorporate their feedback earlier in the design process. This approach will help refine the information architecture and ensure the redesign aligns more closely with their needs.