Bloom & Bean
The Problem
★ How do we improve user navigation and content organization for an e-commerce coffee shop platform? ★
The Solution
A redesigned information architecture and prototype for a coffee shop website that streamlines user navigation through intuitive filters, improved categorization, and a personalized experience for browsing and discovering coffee products.
The Team
Solo Project
Alexis Williams
Project Type
Master’s Level Course Work
INF2170 - Information Architecture
Tools used
Timeline
3 Weeks
Overview
Conducted user research with card sorting and competitor analysis.
Synthesized insights into clear navigation strategies and filtering solutions.
Developed and tested two prototypes: a detailed filter page and an interactive quiz.
Created wireframes, user flows, and moodboards for the final design.
Evaluated usability, provided solutions, and presented findings.
Design Process
Phase 1
Competitor Analysis
Background Research
Phase 2
User Research Design
Open Card Sort
Phase 3
Information Architecture Schematics
Phase 4
Wireframes and User Flows
Phase 1
Conducted a competitor analysis of various e-commerce coffee platforms, including GimmeCoffee, Javaworks, BeanWise, and Detour Coffee.
Findings: Sites with detailed filters (e.g., roast level, growing region, and flavor profile) enhanced user experience, while platforms with limited options felt restrictive.
Notable insights: Competitors like GimmeCoffee effectively used "Seasonal Blends" and visual storytelling to highlight featured products. In contrast, platforms like BeanWise lacked comprehensive filters, hindering navigation.
Investigated the role of filtering systems in improving findability and supporting different user types (novices and coffee enthusiasts).
Defined the problem: Clear and accessible filters with intuitive navigation are critical to enhancing the user experience for coffee shopping.
Phase 2
Designed and implemented an open card sort with 7 participants to better understand how users naturally group and categorize coffee-related information (e.g., roast type, region, and preparation methods).
Participants grouped categories like "Nutty," "Chocolate," and "Citrus" under flavor filters, while roast types ("Light," "Medium," "Dark") were clustered separately. Unexpected groupings emerged, such as product sizes ("500g," "250g") being paired with preparation methods.
Insight: Users often associate geographic origins with specific flavor profiles, revealing opportunities for clearer labeling and education on regional differences.
Developed two user personas:
The Coffee Enthusiast: Experienced users who prefer granular control over filters and want to explore products independently.
The Novice Explorer: Users who feel overwhelmed by options and need a more guided, interactive selection process.
Created user journey maps to identify pain points (e.g., lack of advanced filters, overwhelming product listings) and opportunities to improve navigation flow.
Phase 3
During this phase, the focus was on translating research insights into actionable designs through detailed information architecture schematics, user flows, and wireframes.
Information Architecture Schematics:
Developed a clear site structure to streamline navigation for different user needs.
The architecture emphasized two main pathways:
Filter-Driven Navigation: For users with prior knowledge of coffee types, this approach allowed granular control over filters such as roast type, flavour profile, region, and brew method.
Guided Experience (Coffee Guide): A personalized, question-based navigation path for novice users, guiding them through intuitive prompts to recommend products based on preferences (e.g., flavour, roast, and preparation method).
Ensured the schematics reflected IA principles like labeling clarity, hierarchical organization, and intuitive grouping of filters and categories.
Phase 4
Wireframes:
Designed low-fidelity wireframes for the following key pages:
"View All" Product List: Included a flexible grid/list view toggle and detailed filtering options organized hierarchically by roast, flavour, region, and certifications.
"Coffee Guide" Quiz: Simplified decision-making by presenting step-by-step questions (e.g., "What kind of flavours do you prefer?"), dynamically narrowing options based on user responses.
Wireframes incorporated design considerations like whitespace for readability, accessibility, and user-friendly filter placement.
User Flows:
Mapped out detailed user flows for both navigation approaches:
Filter Path: Users can select "View All" and filter coffee products using sidebar filters to find their desired products efficiently.
Quiz Path: Users are guided through a series of preference-based questions, with the flow culminating in a tailored product list matching their inputs.
The flows ensured efficiency (quick navigation for experienced users) and engagement (personalization for new users).
Integrated feedback mechanisms like "Best Match Recommendations" and alternative filter options to encourage further exploration.
Prototypes:
Developed interactive prototypes using Figma:
The "View All" Page prioritized functionality and granularity with robust filter options and dual view settings (grid/list).
The "Coffee Guide" Quiz emphasized a smooth, user-friendly flow with minimal cognitive load by asking one question at a time.
Prototypes were refined based on usability principles like clarity, responsiveness, and hierarchy to improve overall user experience.
View Prototype
Navigation
Novice Explorer Guide
Coffee Enthusiast Navigation
Conclusion
At the core of this project lies the understanding that Information Architecture is fundamental to creating user-friendly, navigable, and engaging digital experiences. By focusing on the organization, labeling, and structuring of content, the IA not only enhanced findability and efficiency but also ensured the platform could meet the diverse needs of its users. A well-structured IA bridges the gap between user expectations and system capabilities, transforming a complex coffee shopping experience into one that feels intuitive and rewarding.
This project demonstrates that when IA principles are applied effectively through research-driven insights, logical site structures, and thoughtful prototypes the result is a platform that improves user satisfaction, supports exploration, and simplifies decision-making. The dual-navigation approach balances functionality with personalization, setting a foundation for future iterations and usability testing.
In conclusion, this work highlights that Information Architecture is not just about structure it is about empowering users to navigate digital spaces with confidence, clarity, and ease.