Bruklok Coffee Timer App

details

Client
N/A
Project Type
UX/UI Design
Project Year
2022

OVERVIEW

Based on a prompt from the Google UX Design course on Coursera, I designed an audio tour app for art galleries and museums. Users can engage with audio content in a variety of ways: Exploring the Map, Typing in Search, or Scanning a QR code. This way, users can seamlessly interact with the gallery space and learn more about the artworks around them. Audio content can be saved for later listening or return trips to the museum. Additionally, users can purchase tickets and access information about events and special exhibitions at the museum.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The Product

Served in cafés and home kitchens around the world, many people enjoy the process of making pour-over coffee. This app offers a tool for home brewers and baristas to improve their brewing process and simplify a number of steps required to make a pour-over brew.

The Problem

Pour-over coffee requires precise timing, weight, and calculation

The Goal

Design an app that simplifies the brewing process by reducing the mental strain involved in calculation and sequencing of steps

User Research

Interviews

In order to further understand the needs of potential users, I conducted interviews with people who brew coffee at home (3 users) or work in a café (2 users). I also created personas and user journey maps that allowed me to think more deeply about issues of accessibility and inclusiveness.

A strong trend in the interviews was that people often used different apps that are not intended for brewing, such as the calculator app and the timer app that come standard on a smart phone. Most users were interested in using an app that combined all of these functions.

Pain Points

  • Calculation- most users dislike having to calculate coffee-water ratio
  • Sequencing - Users need to remember the sequence of steps and be alerted to a new step
  • Visibility - Users may not always be able to see the phone while brewing, if they have to move around the kitchen

Personas

I created two user Personas by using problem statements based on my research.

Wireframes

Paper Wireframes

I used paper wireframes to iterate quickly and decide what pieces of information are the most important to display on the home screen

Digital Wireframes

I focused on applying the insights gained from user research to the digital wireframes. Users wanted better contrast colors, so I made sure everything meets WCAG compliance.

Refining the Design

Usability Study Findings

Round 1 findings

  • Users wanted more scrolling elements, and wanted to scroll through more information when reading about volunteer opportunities
  • Users need full control over date, time, and location settings to find an opportunity that suits their schedule

Round 2 findings

  • Users want more information about what to expect once they have scheduled a volunteer opportunity
  • Saved opportunities should be easier to access

High-Fidelity Prototype

For the High-Fidelity prototype,Users wanted more information about what to expect next, how to get to the volunteer location, and a way to continue looking for more opportunities.

Other projects