Brotform.app

Designing & developing a webapp for freelance project tracking

I was in need of a simple CRM to help me keep track of project inquiries and follow ups. I needed to know what projects were on the burners, who I might want to reach back out to & what chats had happened when.

Quicksheet

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

The Challenge

I needed to create a project from nothing. I had no stakeholders, clients or users other than myself to rely on. I generally am focused on the user experience and product design. With this project I was responsible for everything. From branding & copy to typescript & authentication.

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.

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

PROJECT TRACKING

The heart of the application is keeping track of projects. The solution I designed is based around a super simple, but flexible data model, comprised of two parts:

Overview – This answers the who/what/where. Each project has a client, title, status & detail view. Projects are given a color (green, yellow, red) that feeds the page’s theme to help convey the general status of the project.

Updates – This answer the question of what’s the latest. As the project moves from initial contact onward, I have found it necessary to keep up with communications, action items & todos. The updates section, by being intentionally generic, allows the user to determine how they want to continue to track their project.

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

Kaizen

Kaizen is 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

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

Registration & Sign-in

With a focus on security and simplicity, I integrated Google Firebase authentication’s password-less login.

The one field, one click registration form allows both new and existing users to get up and running as fast as possible.

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

Modern Development Stack

This was my first time creating a website with a modern Javascript engine. I find it very helpful to understand how the things I design are built and this was a great way to get my hands dirty. I used a combination of Angular, Google Firebase & Bootstrap 4 to bring my designs to life.

This project was truly one where the journey is just as much the destination.

//a.storyblok.com/f/64126/1792x1054/9f03897d75/screen-shot-2020-02-18-at-5-10-01-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.