UX / UI Designer
I wanted to design an interface and experience that would be simple enough to use multiple times, daily; like a toothbrush.
My focus would be making it easy to add new items and get help with prep.
Developer (React/React Native)
For the development phase, I had to learn React with an eye towards converting the app to React Native for eventual sale.
I realized while designing that this app format could be easily converted to accommodate other goods, so the code needed to be subject agnostic to improve reusability, with minimum refactoring.
I had two goals
First.Produce an app that I, and other Bean Hounds...LeafBeasts(?), could use beginning with the initial purchase, to preparation, through recording their observations of the final product.
Second.Solo design and build an app. Just to see if I could accomplish it.
After creating personas to work from, I could move on to sketching out the flow; always keeping them at the forefront of my mind.
The second persona is more of a novice. Someone that wants to get into the brew game, but may find it intimidating or doesn't generally believe they know what to purchase or how to prepare it.
The second persona would be someone that is more of a novice. Someone that wants to get into the brew game, but may find it intimidating or doesn’t generally believe they know what to purchase.
It was important to get the flow moving just right. If I was going to achieve the toothbrush goal, it needed to be quick and easy to use. Toothbrushes are dead easy.
Armed with personas and an idea of user flow I could begin doing paper and pencil wireframe sketching.
A Design Cycle
Below is an example of the progression for the item list view.
Initial sketches for the list view had tea/roast colored, squares for navigation with the selected type and flavor notes below.
This initial approach wasn't appropriate. It took up the first third of the screen without offering much in return.
Moving into low fidelity wireframes, I devised separate screens for selecting the type and the resulting list.
This solution was entirely too inefficient.
Finally, this mockup shows the re-introduction of a single screen. The readable buttons allowed for a decision to be made without guessing and additionally saved vertical height.
The layout also allows for further item information and the introduction of sorting.
A side note. Iterative testing is one of the greatest things about UX and UI design. Having a set of ideas, assumptions, conclusions systematically get proven, disproven, enhanced, or put on the back burner through the crucible oftesting and critique. The evolving nature is addicting.
I Ran Into Two Obstacles
Quickly Getting To Timers
A majority of use was going to occur from repeated use of the preparation guides; particularly the timers. There are likely limited daily opportunities for users to enter new items, but prep happens daily or multiple times a day.
After several attempts, the most obvious solution was to create a “recent prep” button that takes you directly to the correct timer based on previous use. This would get a user to the timer within four taps (opening the app, guide button, most recent prep for tea or coffee, begin).
Using a timer on their phone is about the same number of taps, but also requires imprecise scrolling (iOS) or even more tapping to enter the time (Android).
Broo is also far easier for preparations that contain multiple steps with added timers.
The original wireframe for Broo had a single page, scrolling form for entering new coffee and tea. It seemed intuitive to have all of the entry on one screen.
Following further research, another round of sketching, and a quick and dirty test with a few testers, I came to the conclusion that the best approach would be for a limited number of paginated screens. This would allow for grouping the form elements, allowing for increased clarity on where you are in the process and what is expected from you at that moment.
The Designed Product
It needed to experience to be simple and clear.
I achieved this through a simple color palette. The most significant use of color was in the repeated use of the logo’s pink color to call attention to various elements. The background color for all of the screens was a warm, light grey to avoid blinding yourself with bright white light first thing in the morning.
I also wanted the icons to be consistently simple, outline vectors throughout.
Simplicity and clarity would allow the user to directly access the right information at the right time. Be it at a crowded tea shop or their own kitchen.
The following are high fidelity prototypes displaying several designed states of the final product.
Viewing Your Collection
Viewing Your Collection
Seeing your list of entries before you, needed to be easy to browse or to filter down. Room to present a photo, a name, and other metadata supports browsing.
The filters along the top assist in narrowing down to the right item.
Filter & Search
Filter & Search
Search is going to be more helpful with time; for someone that's created an excellent library of beans and leaves for themselves.
The prep guide was for both the “Connoseur” and the “Aspiring Hobbyist.” Brew preparation can be remarkably different between apparatuses, making it important to have some assistance with remembering amounts of product to use, water temperature, time, and everything else.
The knowledge guide was primarily designed with the “Aspiring Hobbyist” persona in mind. Having a collection of quick explainers of brewing methods, tea varieties, coffee roasts, etc. was vital for on the spot knowledge.