Brewlog - App Design Project

Description

An app designed for home coffee brewers to log their home brews.

Project duration

5 days

Design Process

Design Thinking

Role in Project

Research, Ideate, Design, Prototype
(personal project)

Background

It is my daily routine to brew coffee every morning, and it is always a journey of trial and error to find the brewing method that tastes just right for a new pack of beans. I used to keep a notebook for writing recipes and records of how the coffee tasted when I first started brewing coffee. But soon I gave it up, and started to look for apps that do this task. However, there were not many available options and the best ones require linking certain physical products to use.

From this experience, I decided to design Brewlog, an app for logging coffee brews as my first personal app design project.

Research

To understand more about people’s behaviour of brewing coffee, I first did some research.

Interview

  • 3 home coffee brewers were interviewed regarding their habit of coffee brewing

  • Questions includes usual routines of brewing coffee, how they look for recipes, whether and how they compare results of brews, what an ideal brew logging app looks like to them

Pen and paper record

  • Interviewers were also invited to do a paper and pen record of their next coffee brew after the interview

  • No instructions were given, for looking at what kind of information they would usually include in a brew log

Then I organised my ideas and the information collected using a virtual post-it wall, and arranged them into different groups.

Persona

Using the information collected, I created a persona for this project.

Ideation

Before ideation on the features, two main themes of the app were identified.

  • Simplicity - The act of brewing coffee itself does not take a lot of time, and the process of logging a brew should hence be short as well. It is important to make sure the flow is simple enough to be achieved in a short period of time.

  • Flexibility - There are a lot of ways to brew coffee. It is important to keep entries flexible and reserve spaces for free notes, to cater the needs of a wider range of users.

From the ideation process, I came up with the three main features of the app.

Design and prototype

Sketches and wireframes were made based on the ideas from the ideation phase.

The sketches were presented to the users for feedback. The main feedback collected was that the icons on the menu bar were not quite intuitive, which might cause confusion.

I then proceed to the interface design, while iterating my designs according to the feedback collected. Below are some screens of the first draft.

Throughout the process, there were certain alternatives design that I was not sure about. I presented the pairs to the users as well for their opinion. One example was the design of the menu.

The feedback on the overall designs included:

  • The contrast between the brown and the black words was low, making them hard to distinguish

  • Recipe page looked pale

  • Would be nicer if the homepage is not plain color

Apart from the interface, the interactions of the first version were also tested by inviting users to try using the prototype file. They were asked to take notes on their thought processes while interacting. Some examples of interactions:

Homepage → add brew log → view brew log → add to recipe

Brew log → menu → bean collection → add bean → view bean → delete bean

Feedback from users:

  • The experience would be nicer and more attractive if the brew log page is more like a diary or a calendar

  • The add shortcut only enables adding the type of entries of the current page, it would be better to have options to select which kind of entries to be added

Several changes were made after the feedback.

Styling:

  • Colors of the words adjusted, increased the contrast between the brown and black words while maintaining a high contrast ratio to ensure readability

  • New recipe page

  • Added image for the homepage

Interactions:

  • Redesigned the brew log page into the format of a timeline, making dates more visible like a diary

  • Relocated the add shortcut from the upper right corner to the lower right corner for accessibility

  • Redesigned the add shortcut with a floating menu for selecting certain type of entries

After further rounds of testing and fine adjustments, the final prototype was done. Using the final prototype, the same tasks as the ones in the first prototype above are shown below.

Homepage → add brew log → view brew log → add to recipe

Brew log → add bean → view bean → delete bean

Learnings

This was my first design sprint project, and it was fun to be able to try different skills and methods during the process. Looking retrospectively, one major thing that I think could be improved is to present an interactive prototype in an earlier stage. After the first interactive prototype, there were several big changes made according to the feedback from users, including the new brew log page and the add shortcut. This could have been avoided if I could better present or help users in visualising the interactions at the stage of the wireframes, or perhaps by using an interactive paper prototype.

Since this was a sprint, there are areas that I think can further be improved or developed. For example a feature for putting beans on shelf that indicates the types of bean being currently used, and archiving the finished ones; or a social feature that allows users to share their brew with their friends.

As for testing, it would be nice to have a prototype where users can really enter information, so that it can be tested with users brewing coffee. The time taken to log a brew can be measured for determining whether the process is simple enough.

Overall, with the limited amount of time in this sprint, I am really glad that I managed to put up a prototype that I am satisfied with, and I had a really great time doing the sprint.