Home Barista

Brewing a better coffee learning experience

Home Barista design

Project Overview

Home Barista is a digital guide to the world of specialty coffee that uses recipe guides and community discussion to help user’s grow in their coffee brewing ability and understanding of coffee.


My Role

On this project, I took the role of sole user experience and user interface designer.

The contents of this case study were completed over a 10 week time period between July - September 2020.

My responsibilities included: User Research, Visual Design, Wireframing, Prototyping, Usability Testing and developing low-high fidelity mockups.


Challenge

Research and design a mobile application to offer coffee brewing instruction material which will serve as the minimum viable product for the Home Barista initial product offering.


Discovery

As a brand new product, I first wanted to learn about how adult specialty coffee drinkers use digital tools to help make and learn about coffee. Through conducting qualitative user interviews with coffee hobbyists, I determined what opportunities and needs might exist for new at-home barista products, and used these findings to help shape the direction in developing this product as detailed in the findings below.

I mapped out user responses with an affinity diagram and grouped them based on needs, pain points and behaviors.

affinity map

Based on the user interviews, I found that current digital solutions often rely on internet searches offering varied sources, which can be jarring for those just getting started due to lack of consistency in recipes using different units of measurement and making different assumptions regarding ingredients and equipment.

Meanwhile those at the intermediate level find they lack understanding of the techniques they are implementing as many recipes do not provide this level of detail and lack discussion sections which provide valuable insights for users such as recipe critiques and rationale.

Additionally, I found that at-home baristas tend to learn just a few recipes and ratios for different kinds of coffee they like to make based on which brewing apparatus they own and stick to those recipes most often.

Ultimately I identified opportunities to build a product with a focus on community discussion, recipe information architecture and consistency, and quick access to most frequently viewed content.


Synethesis & Ideation

From the research I conducted, I organized my notes from the sessions and categorized them into different themes and opportunities. From these, I created a list of feature ideas and ranked them based on value vs complexity.

themes and opportunities
feature prioritization

Due to time constraints, I highlighted 3 of the most important features which provide the core functionality and value add which differentiates the product offering from others currently available. I then took some time to sketch these ideas using the crazy 8’s methodology and focused on a few screens to start out at a low fidelity, first using paper and then digital with Figma displayed respectively below.

crazy 8s ideation
low fidelity sketch 1 low fidelity sketch 2
low fidelity mockup 1 low fidelity mockup 2

Solution

Home Barista allows users to easily discover and save recipes, develop their barista skills, and engage in the specialty coffee community.


home barista home screen

The home screen of the app gives us a snapshot of the available features. Based on the research performed, I decided to display recipe cards categorized by brewing apparatus as that is what most closely reflects users of existing offerings behavior in looking up recipes through search engines. As such, a search feature was also included as this is something users would already be familiar with given their existing task flow.

Another research driven decision was to give users easy access to their saved recipes in the “My Recipes” tab displayed in the bottom navigation bar, as many users tend to use and refer to the same few recipes often.

These core interactions are showcased in the screens below.

search input search results

Demonstrating search input (left) and search results (right).


recipe screen

The recipe screen prominently displays the top user comment with navigation to the discussion section, as this is a core value add of Home Barista. The decision to display this above preparation instructions was driven by the results of usability testing further detailed in the aforementioned section below. Here the user can take advantage of the bookmark and sharing features to save a recipe into the “My Recipes” tab and share a link to this recipe externally using native mobile OS sharing implementation to further engage and invite others to the community.

bookmarked dialog bookmarks screen

Demonstrating bookmarking functionality with disappearing toast message upon selecting the star icon on the top bar (left) and viewing bookmarks by selecting the “My Recipes” tab on the bottom nav bar (right).


discussion section

The discussion section allows users to view and interact with comments from other users. The decision to go with threaded comments was made to encourage users to engage in multi-participant, self contained conversations which are collapsible. This is opposed to single level comments which could lead to hard to follow conversations as comments get lost in the mix between each other. Another feature presented to the user is the ability to vote up or down a comment, which aids to surface the most helpful or insightful comments to the top of the page. This is because the comment’s “score” is used as the default sorting method.


Usability Testing

I conducted remote usability tests with 10 users through lookback.io and received direct feedback from users as they walked through their interaction with the app.

Community discussion is one key value add of the product, allowing users to critique and share tweaks to specialty coffee recipes based on personal taste. This section should be easily accessible and user’s should feel empowered to read the thoughts of others and share their own.

As such, participants were instructed to open a link to the home page within the high fidelity prototype, navigate to a recipe card, open the comments section and upvote the top comment to perform a form of user engagement in the comments section. With their feedback I iterated on my high-fidelity prototype to increase user engagements in the discussion section and improve the overall accessibility of the app.

Key takeaways from the usability testing included:

  • Some users had trouble finding the comments section on the recipe page and took them a few seconds to realize they had to scroll down to access this content.

  • Some users mentioned on the comments screen that they had to make an assumption that the first and highest rated comment was the top comment, as there was no indication of how the comments were sorted.
  • The design was improved as a result of this testing by moving the comments section above the fold so that it is more prevalent and thus drives increased engagement:


    usability testing

    The comment filtering was also modified to clearly state how comments are sorted when viewing the comments shade, so that users did not have to make their own assumptions on how this content was sorted. Users did not often recognize the iconography used in the top right of the previous implementation to denote comment sorting, and this implementation is more pronounced and accompanied by a text descriptor as well as arrow iconography suggesting a dropdown of sorting options:


    usability testing 2

    Additionally, some accessibility improvements made were increasing font sizes on many screens and darkening header text, background color on recipe cards, and background color on pop-up toasts to have greater contrast as shown in the above images.


    Future Considerations

    As an MVP, I imagine the next steps for Home Barista would be to conduct additional rounds of user testing and iteration upon the solution given the feedback from these sessions.

    Additionally, some other key features which significantly increase the value add of the solution should be added in future iterations such as suggested recipe tweaks based on user preferences to be implemented as a user questionnaire during onboarding. Given a longer time horizon this would be the feature I would prioritize most to give the product a further competitive advantage in the market.


    Project Retrospective

    Some things I would have done differently under longer time constraints would be to conduct quantitative user research in addition to the qualitative user interviews performed so that key findings could be further validated and iterated upon prior to the initial design phase.

    Through the Home Barista project, I learned how to conduct user research and translate user needs and pain points into meaningful user flows in a mobile app format. I explored rapid prototyping processes to create solutions that kept the user in mind throughout each iteration. The nuances of incorporating an engaging UI scheme and microinteractions to my final deliverable gave a new perspective for evaluating the details to create a holistic user experience.


    Thank you for reading!