Flow Good Coffee
Flow Good Coffee is a pop-up coffee shop based in LA & OC that specializes in delivering unique coffee experiences to a wide range of events, including personal gatherings, work functions, pop-ups, and neighborhood markets.
Challenges: The lack of a dedicated website makes it challenging for customers to easily access essential information regarding Flow Good Coffee, such as menu options, event bookings, and contact details.
Target Users: The problem was solved for event planners and organizers, as well as coffee connoisseurs who were looking to book a mobile coffee vendor for their events.
Time frame: 80 hours for essential screens (ongoing project).
My roles: end-to-end UX/UI designer (branding, visual design, interaction design, prototype, user interviews).
Project scope: Responsive Website
Goals:
Market Analysis
User Interviews
Empathy Map
User Persona
01 Research
Assumptions
The target audience prefers to access information and engage with vendors through websites rather than solely relying on social media platforms.
Users are interested in learning about vendor's brand story, product sourcing practices, and educational content related to their brand.
User feedback will guide the design decisions to create an intuitive and user-friendly website.
Methodologies
Secondary Research: Market Analysis
Primary Research: User Interviews
Secondary Research
Market Analysis
“Lattes on Location”
Strengths:
Have been in business for a long time
Have a trustworthy reputation
Easy booking access
Variety of coffee items
“Coffee Cart Boys”
Strengths:
Support non-profit organizations
Give a clear pricing directly on the website and allow personalizations.
Target very specific events like craft services for TV and film production
Weakness:
The least affordable selection
Coffee bean quality is not a priority
Weakness:
Website navigation needs improvement
“GoodHeart Coffee”
Strengths:
Offer custom branding
Can check the approximative quote right away
Weakness:
Limited menu selection
Does not present uniqueness in branding
Primary Research
User Interviews
Using the Interview Guide that was prepared in advance, I conducted remote interviews with event planers and those who plan to book a coffee vendor asking questions about their vendor selection process and what factors influenced their decision-making.
Research Synthesis
Empathy Map
Assumptions Validation:
The target audience prefers to access information and engage with vendors through websites rather than solely relying on social media platforms. Partially Validated: one of the 5 users prefers using social media to understand the business’ audience and overall aesthetics.
Users are interested in learning about vendor's brand story, product sourcing practices, and educational content related to their brand. Validated: users are interested in learning more abut the coffee brewing and other coffee related content on the website.
User feedback will guide the design decisions to create an intuitive and user-friendly website. Validated: Users want to be able to view packages and find the booking information easily.
Organizing the results of the interviews:
Insights:
-Customers consider experience, testimonials, and flexibility when choosing vendors.
-Visual representation of the business, including how food is served, is important to customers.
-Customers want details about vendor history, ratings, stock, pricing, and the type of beans used.
Needs:
-Create a website with clear sections for introduction, a slideshow with photos, educational content, pricing details, and information about vendors.
-Provide contact options like contact forms, email, and phone numbers.
-Cater to various types of events, aligning with the event's theme or purpose.
User Persona
02 Strategy
Goals:
Site Map
Sitemap
In order to ensure a clear and intuitive user experience, I created a comprehensive sitemap to map out the navigation and structure of the app's features. The sitemap served as a visual guide, outlining the hierarchy and relationships between different screens and functionalities.
Goals:
Task Flow
User Flow
Wireframes
Responsive UI
UI Kit
Visual Design
03 Design
Task Flow & User Flow
In order to ensure a clear and intuitive user experience, I created a comprehensive sitemap to map out the navigation and structure of the app's features. The sitemap served as a visual guide, outlining the hierarchy and relationships between different screens and functionalities.
Wireframes & Responsive UI
Lo-fi Desktop
Lo-fi Mobile
Mid-Fi Desktop & Mobile
Visual Design
To enhance the user experience further, while designing the high-fidelity screens, I included the option for users to explore pricing packages directly on the home page.
I opted to forego a gallery at the top of the page, as I found that the Instagram gallery at the bottom sufficed for showcasing visual content.
Goals:
High Fidelity
Usability Testing
Results
Iteration
04 Prototype & Testing
High-Fidelity
Usability Testing
I was able to perform an unmoderated usability test using Maze.
Five people participated in 2 tasks:
booking catering and contacting the vendor with the starting point on the home screen.
After presenting the design in our team meeting, I decided to change the background color of the review boxes, event packages, action buttons and booking form to create a more consistent look for the website page.
This cohesive color scheme will help users easily find necessary information without the distraction of varying colors while maintaining brand identity. By using consistent colors, we can emphasize the hierarchy of elements on the page, ensuring important information stands out. Additionally, the increased contrast enhances text readability, improving the overall user experience. These color modifications have been carefully selected to create a more user-friendly and visually appealing website interface.
Review Boxes
New card design for Increased readability.
Event packages
Task 1 performance score:
80% of the users performed the task of booking catering with success.
Task 2 performance score:
100% of the users performed the task of contacting the vendor with success.
User friendliness score:
60% of the users found the tasks being very easy to perform.
Iteration
Changed appearance of the Packages cards for a better visual contrast and easy reading.
Action Buttons
Resized and renamed the Action Buttons to match the overall UI and follow the page’s hierarchy.
Booking Card
The primary color of the card has been updated to a softer shade of blue, providing better contrast with the text for improved legibility.
Ending notes
As I wrap up my first project for Flow Good Coffee, I am proud of the progress we've made in creating an engaging and user-friendly experience. This journey has deepened my understanding of UX/UI principles and the importance of a cohesive design. By focusing on consistent branding and intuitive navigation, we’ve laid the foundation for a strong online presence that reflects the vibrant essence of the coffee pop-up community in Los Angeles and Orange County areas.
I look forward to seeing how our design evolves and enhances customer interaction with Flow Good Coffee. Thank you to everyone involved for their support and collaboration throughout this project. Here’s to brewing success together!