Brotform.app

Make Bread,
With Brotform.

Having freelanced for the better part of a decade, I have learned about more projects than I could ever keep track of. And that was the problem.

I needed an application that could deal with the specific issues that I was running into. I tried everything: sticky notes, Evernote, Trello boards, CRMs, spreadsheets. They would all work well for a few days, but eventually, they had all fallen short.

I ultimately decided that the only solution was to lean into the craft I have been practicing on behalf of others & create the tool that I needed.

Quicksheet

Role:
Designer/Developer
Date:
2020
Agency:
SRCurran
Client:
Brotform.app

The Challenge

Brotfom, being a solo project, presented differently than most others that I get to work on. There were no clients to manage, but there were also no guardrails. It was on me to figure out the whole experience including naming, copy & design.

And once I had everything figured out design-wise, it was also up to me to build it. Relying on concepts from CS 100 courses & YouTube videos. I had to learn a new language, how to manage and use NoSQL databases & the quirks of asynchronous data.

//a.storyblok.com/f/64126/2227x1198/ff43314fa2/screen-shot-2020-02-18-at-3-37-25-pm.png

The Solution

Over the course of a month in early 2020, I found myself with several projects in various states of contract, but nothing imminently hitting. I was struggling keeping track of who I talked to when & decided it was time to build the experience that I had been wanting. I relied on various pieces of the design that lived in sketches, Sketch files & HTML snippets. I learned about the specifics of the modern JS development ecosystem & settled on Angular. From there, I began building features in parallel with the functionality, design and presentation being built piece-by-piece.

Feature

Registration & Sign-in

Keeping things simple and secure was the #1 goal. I used Google Firebase authentication’s password-less login which allowed for the simplest possible registration & sign-in form.

If minimizing input fields is the best way to optimize form design, it is hard to optimize beyond having one field.

As for security, the token system reduces the need for another password, while still being secure (think Slack’s magic link). Once logged in, I decided to maintain sessions for as long as possible to reduce sign-in headaches.

//a.storyblok.com/f/64126/1198x771/bad90aadeb/screen-shot-2020-02-18-at-4-21-09-pm.png
Feature

Kaizen

Kaizen is, of course, the Japanese term for continual improvement. With so many projects that I have worked on there is a date where the contract ends & the product ships. With Brotform there is no end date & I am allowed to continually optimize, refine and improve the experience.

Every time I open Brotform, or share it with someone new, I learn something. Those learnings are then able to be fed in along a road-map of my choosing. With each and every tweak improving the experience bit-by-bit.

//a.storyblok.com/f/64126/2285x1169/bcaea7fa93/screen-shot-2020-02-18-at-4-25-44-pm.png
Feature

Communication Design

When you’re on the hook for every piece of content, there is no place to hide. The one place I found this the truest was via the registration page & the initial loading. Brotform, like most user-generated experiences, is most alive when there is active content displayed. However, this is not the experience users would find when they log in. I relied on several best practices to create a design that communicates the depth and breadth of the Brotform before a user uploads a single piece of content.

//a.storyblok.com/f/64126/1710x1236/23ae5f70c5/screen-shot-2020-02-18-at-4-39-57-pm.png
Feature

Angular & Firebase

After evaluating several modern Javascript engines (incl. Vue, React), I determined that Angular was the best fit for this project. A few criteria led to this decision, but it ultimately relied on the fact that Angular is opinionated & thus easier to learn across multiple tutorials.

Additionally, Firebase was chosen as the realtime DB & authentication back-end service, in part due to its close integration with Angular.

//a.storyblok.com/f/64126/1792x1054/9f03897d75/screen-shot-2020-02-18-at-5-10-01-pm.png
Feature

Bootstrap & Animation

A big part of my excitement for this project was leaning into the development and learning new techniques. Every time I committed a new feature to Github I felt like Dr. Frankenstein, wanting to exclaim “it’s alive”.

However – the excitement around a proof-of-concept development platform began and ended with myself.

In order to visually bring the project to the web, I chose the Bootstrap4 rendering engine, which allow for the 8px grid design. I leaned heavily into the “bootstrap” way of developing (i.e., a lot of classes) which required very little additional SASS/CSS. To bring the project to life, I added some key animations, both in page loads through the router & on page scroll.

//a.storyblok.com/f/64126/1670x1014/fcfdd93ed2/screen-shot-2020-02-18-at-5-55-36-pm.png

Final Design

//a.storyblok.com/f/64126/1676x1010/ce690cd5fc/screen-shot-2020-02-18-at-1-26-29-pm.png

Designed by Sean Curran


My Role

(takes a deep breath) Project management, product management. UX design, UI design. Front-end development, back-end development. Systems integration, site architect. Copywriting, art direction, branding. Marketing. & barista.