Café Colomer
My Role
Lead UX Researcher & Designer
Timeline
July 2024
Refined in August 2024
Responsibilities
-
Stakeholder Collaboration
-
User Research & Analysis
-
Information Architecture
-
Wireframing & Prototyping
-
Usability Testing
-
Development Support & Launch
Project Vision
Challenges
The vision for the Café Colomer website redesign was to create a user-centric, visually appealing, and intuitive online platform that not only reflects the identity of the specialty coffee shop but also embodies the café’s unique character.
The goal was to guide visitors through the site, allowing them to easily discover products, learn about services, and connect with the café's brand, ultimately driving customer engagement and business growth.
1. Unintuitive Navigation
The existing website had a complex and unclear navigation structure, making it difficult for users to find the information they needed.
2. Balancing Aesthetics with Usability
Striking the right balance between a visually attractive design and a highly functional, user-friendly interface was a key challenge.
3. Ensuring Responsiveness
The redesign needed to be fully responsive, providing an optimal experience across different devices and screen sizes.
4. Stakeholder Expectations
Aligning the redesign with the owners' business objectives while also addressing user needs.
Challenges
Kickoff
I used a goal-directed design approach to align with business objectives and user needs, balancing functionality and aesthetics. Key to this process was qualitative research: I analyzed competitors to understand industry trends and created user personas to ensure the design met Café Colomer’s target audience’s needs effectively.
I started by asking myself the following questions:
What are the primary needs and pain points of Café Colomer’s target audience?
How can the website reflect the unique character of Café Colomer while staying user-friendly?
Who are our key competitors, and what can we learn from their digital strategies?
01
Stakeholder Meetings
Site Audit
Competitor Analysis
RESEARCH
02
Ideation
Persona Creation
User Feedback
Wireframing
Hi-fi Prototyping
DESIGN
03
Cognitive Walkthrough
Usability Testing
Website Launch & Evaluation
EVALUATE
Approach
As the Lead UX Designer and Researcher for the Café Colomer website redesign, I managed the entire design process to align the site with user needs and business goals.
I began with thorough research, including competitor analysis and user persona development, to inform the design strategy. This groundwork was essential in addressing user needs and refining the site’s approach.
I directed the creation of the website, from initial wireframes to high-fidelity designs. The prototypes served as the final web iterations, crucial for gathering user feedback and conducting usability tests, which led to ongoing improvements and an optimized user experience.
My Contribution
01
RESEARCH
Interviews & Affinity Mapping
To gain insights into how users interact with websites for specialty coffee shops and to identify potential issues, I started by conducting user interviews. This approach helped me understand how users find and engage with information about coffee shops online before diving into design solutions.
To efficiently analyze the feedback, I utilized affinity mapping. This method allowed me to categorize and identify recurring themes from user observations, helping to highlight key challenges and preferences for the Café Colomer website.
I interviewed five users of specialty coffee shop websites to understand their challenges in finding and interacting with key information online. Despite their familiarity with browsing coffee shop sites, many users struggle to locate details about menu items, hours, and location, often having to navigate multiple pages or sources.
Users showed a strong preference for visual tools, such as clearly organized menus and prominent contact information. They also expressed a need for personalized features, such as recommendations based on their preferences or previous visits.
Many users found complex website layouts frustrating, especially when trying to quickly access or update information. This frustration can lead them to abandon the site or stick to simpler methods, like visiting in person or using less interactive sites.
There is a clear need for a user-friendly, mobile-optimized website that allows for easy navigation and quick access to essential information, as users often browse while multitasking or on the go.
Personas
To better inform our design process and help the team empathize with our users, I synthesized the interview findings and developed the following personas:
As a result, we identified the main pain points:
Pain Points
Tom is tech-savvy and enjoys discovering new coffee spots during his travels or on weekends. He values a well-designed website that offers detailed and engaging information about cafés.
Sarah is a busy professional managing a demanding job and a family. Her days are filled with work meetings, school runs, and family activities. She values efficiency and simplicity in the tools she uses and often needs to make quick decisions.
Needs:
-
Visual aids like highlighted menu items and prominent call-to-action buttons.
-
A mobile-optimized design for convenient browsing and decision-making on the go.
Needs:
-
An aesthetically pleasing and easy-to-navigate website with detailed information.
-
Interactive elements such as a dynamic menu and clear, concise content
Frustrations:
-
Finds websites with cluttered or complex navigation challenging.
-
Struggles to quickly locate specific details on current café websites.
Frustrations:
-
Dislikes outdated or difficult-to-navigate website designs.
-
Finds it annoying when key details are hard to find or poorly presented.
Persona 1: Sarah Johnson
Persona 2: Tom Patel
Age: 32
Occupation: Marketing Manager
Family: Married with two young children
Age: 45
Occupation: IT Specialist
Family: Single with an active social life
Background
Background
-
Initial Discussions: Engaged with the café’s owners (Lola & Carmen) to gather insights into their vision, goals, and challenges.
-
Requirement Gathering: Collected detailed information on the desired features, design elements, and any specific needs.
-
Feedback Loops: Presented design concepts and prototypes to stakeholders for feedback and made adjustments based on their input.
These meetings ensured that the redesign aligned with Café Colomer’s brand identity and business goals, fostering a collaborative approach throughout the project.
Stakeholder meetings were conducted to understand Café Colomer’s business objectives, design requirements, and expectations for the website redesign.
Stakeholder Meetings
Outcome
Competitive Audit
Complex Navigation
Both Sarah and Tom find it challenging to use websites with convoluted or cluttered navigation, which makes it difficult to quickly find important information about the café.
Both personas struggle with websites that aren’t optimized for mobile devices, leading to frustrations when trying to access details like menu items or café hours on the go.
Both Sarah and Tom are annoyed by websites that feature outdated or incorrect information, which affects their ability to make informed decisions about visiting the café.
A poorly designed interface with slow load times negatively impacts both personas’ experiences, making it hard for them to enjoy a smooth and efficient browsing experience.
To ensure the Café Colomer website stands out, I conducted a competitive audit of similar cafés and coffee shops. This involved analyzing competitors’ websites to identify industry trends, strengths, and areas for improvement. Here’s how this audit influenced our design:
By examining competitors' navigation, layout, and content, I established a benchmark for user experience, identifying best practices and common pain points to address in our design.
I reviewed features like online ordering and menu displays to guide the inclusion of similar or enhanced functionalities on Café Colomer's site, ensuring we offer a competitive edge.
Analyzing visual elements such as color schemes and typography helped us align with current trends, resulting in a modern and appealing design.
Mobile Usability Issues
Inaccurate Information
Visual Design and Load Times
02
DESIGN
For Café Colomer’s website redesign, I focused on conveying professionalism through a refined and sophisticated color palette. Inspired by the deep, rich tones of specialty coffee, the design emphasizes a sense of elegance and trustworthiness. The selected colors create a polished, professional atmosphere, ensuring that the website not only attracts but also instills confidence in users.
This approach enhances the user experience by reflecting Café Colomer's commitment to quality and excellence, aligning with the café's reputation and distinctive identity in the market.
Style Guide
Ideation
With the research findings and personas in mind, I used the ‘How might we’ methodology to translate the user problems, needs, and pain points into opportunities for design.
Here are some examples:
HMW
Questions
HMW
HMW
HMW
HMW
HMW
HMW
Design a visually appealing site that remains user-friendly?
Ensure the website works seamlessly on all devices?
Integrate interactive elements that match the café’s brand?
Streamline the ordering process for quick and easy use?
Balance stakeholder goals with user needs in the redesign?
Simplify navigation for easy access to coffee products?
As a result, I come up with as many ideas as possible and settled on the following core functionalities:
User Journey Map
In this section, we explore the user journey for a typical visitor to the Café Colomer website.
The goal is to understand the entire experience from initial discovery to post-purchase interaction. By mapping out each stage of the user’s journey, we can identify key touchpoints, actions, thoughts, and emotions, as well as pain points and opportunities for improvement. This insight will help us enhance the website’s usability and effectiveness in meeting both user needs and business objectives.
Sketches & Wireframes
User Feedback & Revised Design Goals
Simplified Navigation
Responsive Design
Interactive Elements
Ordering System
1
2
4
3
A streamlined navigation process to help users find coffe products quickly and easily.
Seamless experience across all devices, including desktops, tablets, and smartphones.
Engaging features, such as interactive menus or virtual tours, that enhance user experience and reflect the café’s brand.
Easy-to-use interface for placing orders or making reservations, with minimal steps required.
To evaluate the prototype for the Café Colomer website, we developed the following task scenario for users:
Task Scenario:
You’re planning a visit to Café Colomer for the first time and want to find out more about their coffee offerings and menu. You’re interested in learning about their specialty coffees and checking the café’s opening hours. Use the website to explore the menu, find information on the different coffee varieties, and locate the café’s hours of operation.
During each evaluation session, I first introduced users to the redesigned website and asked a few screening questions to ensure they were typical café-goers. I then explained the task scenario and guided them through the website as they completed the tasks. After users finished, I asked follow-up questions and encouraged them to provide feedback on their experience with the design.
.png)
These digital wireframes lay the groundwork for the Café Colomer website's design and functionality. They ensure that each page is thoughtfully structured to support a seamless user experience, from browsing to purchasing. The feedback gathered from these wireframes will guide the development of high-fidelity designs and prototypes, leading to a polished and effective final product.
HERO SECTION
CONTACT
FOOTER
SOCIAL PROOF
SERVICES
CTA
HOW WE WORK
ORIGINAL DESIGN
FINAL DESIGN
ORIGINAL DESIGN
FINAL DESIGN
03
EVALUATE
To ensure the user flow of the Café Colomer website was intuitive and user-friendly, I conducted a cognitive walkthrough on my own during the design process. My goal was to make sure that users could easily navigate the site and find what they were looking for, whether it was the café’s menu, location, or contact details.
Cognitive Walkthrough
I approached the site as a first-time visitor, walking through key tasks such as exploring the menu, finding the café’s opening hours, and learning more about the café’s story. At each step, I asked myself:
-
Is this what I would expect to see?
-
Am I making progress toward my goal?
-
What would my next action be?
-
What do I expect to see next?
Personal Takeaways
Working on the Café Colomer website redesign was a deeply enriching experience that profoundly shaped my approach to UX design. Embracing the philosophy of putting user needs at the heart of the design process, I learned to blend functionality with aesthetic appeal in a way that truly resonated with both the café’s brand and its customers. Conducting research and creating user personas were eye-opening, allowing me to see how thoughtful design can solve real problems and enhance user satisfaction.
The iterative nature of the project, with its focus on testing and refining prototypes, taught me the value of ongoing feedback and adaptation. I found great satisfaction in addressing design challenges and seeing how small adjustments could significantly improve the user experience. This project not only honed my technical skills but also reinforced my commitment to designing with empathy and purpose, making me even more passionate about creating meaningful, user-centered solutions.
Key Insights:
-
The navigation menu needed to be more intuitive to help users quickly find what they were looking for.
-
The "Order Online" button wasn’t prominent enough, risking that users might miss it.
-
The site needed clearer visual cues to show users they were progressing through their tasks, such as finding information or making an order.
-
Ensuring that contact information was easily accessible from every page was crucial for a smooth user experience.
These insights guided the final adjustments to the design, ensuring that the Café Colomer website provided a seamless and enjoyable experience for all visitors.
Usability Testing
To ensure the Café Colomer website was user-friendly, I conducted in-person, moderated usability testing sessions with potential users. The goal was to observe how users interacted with the site and to gather feedback for improvements.
After introducing users to the redesigned website, I gave them the following task:
"Imagine you're planning a visit to Café Colomer for the first time. Your goal is to find the café's menu, learn about their specialty coffees, and check the opening hours. As you explore the site, please share your thoughts and any questions you may have. Remember, this is not a test of your abilities; we're gathering feedback to improve the website."
Users completed the task while thinking aloud, allowing me to gain insights into their thought processes and any difficulties they encountered. Afterward, I asked them if they found the website easy to use and whether it met their expectations.
Key Findings:
-
Navigation: Some users found it challenging to locate the menu quickly, suggesting that the navigation structure could be more intuitive.
-
Visual Content: A few users mentioned that they didn’t immediately notice the section about the café’s specialty coffees, indicating the need for more prominent visual cues.
-
Information Accessibility: Users appreciated the detailed information about the café, but some struggled to find the opening hours, suggesting that key details should be more accessible.
-
Overall Usability: The feedback was generally positive, with most users finding the website visually appealing and easy to navigate. However, a few noted that the ordering process could be more streamlined.
Design Iterations
Note: An interactive prototype of the final design will be available soon. The main UI screens can be found below.
Based on the insights gained from cognitive walkthroughs and usability testing, I finalized the design of the Café Colomer website using Figma. These adjustments aimed to improve clarity and user experience.
To minimize confusion, I streamlined the landing page by including only one entry point to key content via a prominent call-to-action button
LANDING PAGE
To minimize confusion, I streamlined the landing page by including only one entry point to key content via a prominent call-to-action button.
Based on the insights gained from cognitive walkthroughs and usability testing, I finalized the design of the Café Colomer website using Sketch.
PRODUCT PAGE
For the product page, I made several adjustments to improve clarity and usability:
Wording: I revised the product descriptions to ensure clarity and highlight the unique features of each item.
Layout Adjustments:
- I placed brief explanations about the specialty of each product directly below the product name, making it easier for users to understand what makes each item special. Previously, this information was less noticeable.
- The progress indicator was enhanced to clearly show which product categories the user has browsed, helping them track their shopping journey.
Filtering and Navigation:
- The product filters and options are now always visible on the page. As users make selections, the available products are dynamically narrowed down, allowing for a more personalized shopping experience.
- I made the navigation buttons (e.g., "Previous/Next") more prominent to facilitate smoother browsing between different product categories.
Font Size: The font size was increased for better readability, ensuring that all product details are easily accessible to all users.
Adressing Key Challenges
Unintuitive Navigation
I simplified the navigation by creating a clear, hierarchical menu. Key sections, such as the menu, about us, and contact information, were prominently displayed with intuitive labels.
Balancing Aesthetics with Usability
I created a clean, modern website that blends aesthetics with functionality, reflecting the café's brand. By using consistent typography, color schemes, and imagery, I enhanced the visual appeal while keeping the design user-friendly and accessible. I also incorporated user feedback to balance style and usability effectively.
Ensuring Responsiveness
I employed a responsive design framework that adapts the layout and content to fit different screens, from desktops to mobile phones. This involved flexible grid layouts, scalable images, and adaptive text sizes to ensure that the site remains visually appealing and functional regardless of the device used.
Aligning with Stakeholder Expectations
I worked closely with the stakeholders to understand their goals, such as increasing product visibility.Regular updates and feedback sessions with the stakeholders ensured that their vision was incorporated into the design, resulting in a final product that aligns with both user expectations and business objectives.
.png)