.png)
Bru was the product of two observations:
I wanted to make an application that would teach people how to make better coffee at home, enabling them to have confidence in their ability to use manual brewers (which produce higher quality coffee than drip brewers).
To focus the application's scope and validate my intuitions, I launched a survey focused on daily brewing habits. Following up on my survey, I conducted interviews with several baristas to better understand their experience learning coffee. My surveys produced some intriguing results:
Most often people will invest time in learning until they find a threshold/pattern that produces good results and they can repeat easily daily. Learning is most often a means to this end. My research validated much of my hypothesis, but caused an unexpected course change for the app's core function. Learning is important and necessary for people new to using manual brewers, but focusing only on new learning was too narrow a scope. While usable, the app would lack a usefulness that would draw users back on a regular basis to use it.
To survey what solutions already existed, I searched the Apple App store and compared competing applications. Features were fairly similar between apps, but visual clarity was a big opportunity. Additionally, options for customizing the experience to user preferences were generally lacking.
To guide UI development I first created a provisional persona based on my survey, interviews and research (above). This served as a great reference to check my design decisions against. Then I created a screen map (below) to document the app's structure. This helped me keep track of the design scope and keep my work focused. The work culminated in thinking through the use cases for the application and visualizing several key tasks and flows (below).
.png)
.png)
To get early feedback on the flow and overall feel of the app, I created a set of mid-fidelity wireframes.
Wireframes are good for showing overall structure and having discussions about how I expect the app to work, but nothing gets useful feedback like a usability test. I tested my wireframe mockup with a low-fidelity, clickable prototype. I focused my testing on the recipe creation flow to ensure it was easy to use and intuitive. My use of common icons delivered high success rates in navigating the process.
Overall, my prototype scored well for usability, delivering a verdict of GOOD. One major finding: when asked to make a French Press guide, many users wanted to select French Press BEFORE tapping "create guide" but I failed to provide a create guide button on that screen.
With a functioning architecture in place I was now free to work on the visual design of the app. I created a style guide and UI kit for the application (above). However, after several peer review sessions it was concluded that my UI needed a lot of work. While solid, the color scheme and styles lacked visual appeal and depth. Additionally, the color palette failed to meet my goal of being inviting, presenting instead as cool and sterile. After many iterations and further peer review, I developed a warmer palette and introduced an additional typeface to create a more charming aesthetic.
