Fltrr

Overview
Your personal coffee assistant.

Fltrr is a product I came up with a few years ago when I got really into coffee brewing. I became obsessed with trying new brewing ‘recipes’ I found all over the internet, tracking and tweaking everything from the grind size to the brewing time. I wanted to keep track of all of the recipes I found, as well as be able to guide the entire process step-by-step, so I set out to create a tool for coffee recipes.

Version 1
Baby Steps

My first step toward creating Fltrr was defining what exactly it would be and how it would work. I knew I wanted it to have sections for different brewing devices that would house lists of different recipe sources, along with information about each recipe. I also knew I eventually wanted to add timer capability, but in order to release version 1 as quickly as possible, I decided to hold off on that functionality.

A crucial part of defining the product was understanding what was already available. As far as coffee recipe databases, there wasn’t really anything out at that point. In regards to ‘coffee timer’ apps, there was one big one called the ‘AeroPress App’ which is really great, but only has recipes and timers for the AeroPress.

Another important piece of the puzzle was defining what information to show for the recipes. I looked at all of the data across many recipes, noting that some information was missing or varied in nomenclature across various coffee purveyors, and decided that the most important data points to display were time, dose, and yield.

Planning & Sketching

With the data points solidified, I began to write out the interface and sketch the user flow. Considering that version 1 was really just a database of coffee recipes, it was rather simple, but I find planning and sketching to be super helpful no matter how simple the interface or flow seem to be.

Some sketches and lists
Putting it all together

I then moved into designing the interface in Sketch - first wiring out the structure of the interface, then messing around with the visual direction. To make things easy, I based my design on the Zurb Foundation grid so that I could quickly and easily build the interface for desktop and mobile screens.

Visually, I knew I wanted to use blue as the primary color. Why? Because I like blue, and this tool - at least version 1 - was for me, so I went with blue. As far as organizing the data goes, I went with cards as a straight-forward component for housing the data. I also included navigation at the top to switch between brewing devices.

Version 1 of Fltrr
Version 2
A New Direction

Once I had finished version 1, I immediately began planning the next iteration of Fltrr. My goal was to shift from being a recipe link database to a full-fledged recipe tool. I also made the conscious decision to build the next iteration of Fltrr as a native iOS app rather than a web app in order to avoid issues with mobile browser javascript timing and to surpass the inability to issue notifications.

The first step I took was looking at version 1 and figuring out what data was missing. In addition to time, dose, and yield, I needed to include the grind size and steps to complete the recipe. With the new data points defined, I began to devise the new flow and plan out the interface.

Planning the new interface
Sketches ➡ Sketch

Once I was happy with my sketches and notes, I started creating some of those ideas in Sketch. I wanted to ensure that the layout and information hierarchy was really solid, and that the data was presented clearly. It was important that the interface be really simple, clear, and uncluttered, because if you have trouble reading the screen or understanding what you’re supposed to be doing and when, you could make a mess or scald yourself with hot water.

Visually, I stayed with blue, mostly because I like it - but also because blue is associated with water. I wanted to use blue as a highlight rather than as a core part of the UI. Using too much color - at least in this instance - wouldn’t really benefit readability or cleanliness. I used Google’s Lato font for this iteration, because I like the legibility and shape of the characters.

Some new designs