Brewology: E-Commerce Platform & Community

A UI/UX Case Study

We designed Brewology, an e-commerce platform, that redefines the online coffee shopping experience, offering detailed flavor profiles, expert brewing guides, and a vibrant community of global coffee roasters' information, ratings, and user reviews. Allowing our coffee enthusiasts to confidently explore and savor fresh roasted coffee, for a better connection and access to the world of fresh coffee beans.

View Slide Deck

Introduction:

  • This case study serves as a testament to the skills acquired during our program. It showcases our ability to tackle complex design challenges, with a focus on designing an e-commerce platform for coffee products. The project aimed to address issues such as inaccurate product descriptions and other painpoints revealed in User Research.

  • Brewology is of particular significance because it addresses a design challenge that has persisted since the 70s - improving coffee flavor descriptors. This case study demonstrates our expertise in user experience (UX) and user interface (UI) design and our ability to create innovative solutions.

Problem Definition:

flavor wheel source link

  • The overarching Problem we identified is the lack of accessible and comprehensive information about coffee brands and flavors, resulting in uncertainty and hesitation among online shoppers.

  • Our goal was to enhance coffee flavor profile descriptions and create a visually compelling e-commerce platform capable of competing with industry leaders.

  • The user research phase unveiled five critical pain points:

    • concerns about product quality

    • the need for clear product information

    • shipping costs

    • payment security

    • ease of checkout

    Our design efforts were guided by these user needs.

  • Our platform enhances online shopping by providing detailed flavor profiles, sourcing information, and genuine customer reviews, fostering transparent and personalized experiences that encourage users to explore a diverse array of coffee brands and flavors.

User Research:

  • To gain valuable insights, we employed a comprehensive approach, including interviews, surveys, and user tests. Qualitative and quantitative surveys, as well as interviews with coffee enthusiasts and an experienced local coffee roastery owner, provided essential data.

  • Our research unveiled users' concerns about product quality, the necessity for clear product information, transparent shipping costs, secure payment options, and intuitive checkout process.

    These findings served as the foundation for our design decisions.

Ideation & Conceptualization:

  • Our collaborative brainstorming sessions were conducted with meticulous attention to detail. These sessions led to the identification of innovative features, including a unique site architecture, a flavor profile quiz, and integrated payment options. We approached this phase with a focus on combining creativity and practicality.

  • Our design concepts were born out of a thorough competitive analysis and in-depth user research. We placed a strong emphasis on aligning these concepts with the identified pain points and user needs. Our goal was to create solutions that were both innovative and user-centric.

Wireframing & Prototyping:

  • Our transition from design concepts to wireframes and prototypes was marked by enthusiastic collaboration and attention to detail. We sketched low fidelity artifacts of features we ideated, and surprisingly we were all inline with each others vision.

  • We leveraged tools like Sketch, Figma, and Miro to create low fidelity artifacts.

  • The iterative process was central to our design approach. We actively sought and incorporated feedback from team members, survey respondents, and our network, ensuring that our designs evolved in response to real-world insights.

  • Link to Figma Design File

User Testing and Iteration:

  • We conducted user testing by sharing clickable prototypes and gathering user feedback.

  • Valuable user feedback highlighted areas where navigation and user experience needed improvement. We identified challenges such as users' difficulties in finding the flavor profile quiz button and concerns about product descriptions.

  • Taking into consideration the responses to User Testing, we adjusted the size of the nav bar items, selected a higher contrast and brighter color for the quiz buttons, and placed them in similar places as other e-commerce platforms.

Visual Design:

  • Our approach to visual aesthetics was marked by a blend of creativity and practicality. We meticulously transitioned from sketches to low-fidelity wireframes, enhancing the site architecture.

  • Our choice of colors, typography, and imagery aimed to convey warmth and coziness. We selected a palette inspired by earthy tones and coffee beverages, and typography that was both elegant and bold when needed. The result was a visual design that resonated with users, allowing them to "smell the coffee" while browsing the prototype.

Final Prototyping:

  • Our journey toward a high-fidelity prototype involved careful consideration of user feedback. We adjusted elements such as the size of navigation bar items and the color of quiz buttons to enhance user experience.

  • The website featured a plethora of expanding and responsive elements. Users found the charming animations during the flavor profile quiz and the enhanced side menu states to be particularly engaging.

  • By adhering to best practices and providing familiar layouts, we minimized user friction. We ensured the inclusion of essential filter and sorting options to facilitate product discovery and minimize frustration.

Results & Conclusions:

  • Link to Figma Prototype

  • Our UI/UX design efforts culminated in the creation of a highly interactive e-commerce platform. This platform not only featured a blog but also introduced a groundbreaking flavor description graphic.

  • Our designs successfully addressed the top three concerns of users: the Flavor Chart, site copy, and streamlined checkout processes. Our service not only served as an e-commerce portal but also aimed to educate users on coffee flavors.

  • User testing revealed that users appreciated the blog content and recognized the value of filters for educated coffee drinkers. The design also showcased the potential to educate users about coffee products, thus increasing their willingness to explore and purchase other products.

Lessons Learned:

  • This project provided valuable insights into the nuances of the coffee industry and the intricacies of flavor descriptions. It shed light on the purchasing habits and concerns of online shoppers. This understanding will inform our future projects.

  • Looking ahead, we recognize the need for more extensive research and problem definition at the project's outset. Addressing issues related to product descriptions earlier in the design process is a lesson learned. Effective communication within the team will also be a key focus to prevent similar challenges.

  • This case study has contributed to our growth as UI/UX designers by strengthening our design skills, analytical abilities, and interaction design. It has also emphasized the importance of articulating design decisions effectively.

Future Directions:

  • Future iterations of the design will focus on enhancing the UI for the blog and creating an onboarding flow for users to achieve higher ranks within the coffee connoisseur community.

  • We have identified areas for improvement based on feedback. These include addressing issues related to animation and further enhancing the blog interface to provide an optimal user experience.

  • This case study will inform our approach to future projects by emphasizing the importance of collaboration, user research, and effective communication. It has underscored the value of addressing user concerns early in the design process.

Acknowledgments & Credits:

  • - Jason Daniel Lutz - UI / UX Designer / Researcher

    LinkedIn: Connect with Me

    Email: jason.lutz@du.edu

    - Hua Zhang- UI/UX Designer / Researcher

    - Nicole Banks - UI/UX Designer / Researcher

    - Ian Evarts - UI/UX Designer / Researcher

  • We would like to express our gratitude to Mark Overly from Kaladi Coffee for valuable insights and delightful coffee.

    We also extend our thanks to the University of Denver and the academic staff, including our instructor Sean Keating, and TAs Sergei and Zoey.

Next

Better: Connecting Patients to the resources they need.