Main Street

Why work for a company when you can own one?

Main Street equips aspiring entrepreneurs with everything they need to start, grow and run their own painting service business.

They hired me to enhance their design system and design 3 crucial areas of their app: onboarding, estimate engine, and production management tool.

* Main Street joined forces with Hoist.

Design System Onboarding Estimate Engine Production Management Tool Roberto Simões (Product Designer) John Salzarulo (Head of Engineering) Zach Davis (Head of New Verticals) Ankit Gupta (Director of Product) Frank Lee (Product Owner)
Main Street
TOOLS Bootstrap / StimulusJS / Ruby on Rails Figma Github Notion

Design System

At first, I wasn't hired to create the Design System. While being introduced to the different features of the apps, I learned they were using various technologies like Ruby on Rails, Webflow, and Bubble.io to build their marketing website and apps.

I quickly pointed out some design inconsistencies to Zach. I got to know they were built by different freelancers and teams. The main app, built with Ruby on Rails, had already a sort of Style Guide since they were using Bootstrap CSS Framework.

Despite the effort of the leading app team to build a Style Guide, it was entirely ignored by the other groups. While performing an Interface Inventory, I noticed huge inconsistencies even when using their primary color with different HEX codes.

I've put together a document and presented it to the Director of Product, who gave me the green light to start working on a Design System.

MainSt. Design System picture

Onboarding

Main Street helps its clients at every stage, from establishing an LLC to branding and marketing the company. Everyone who has set up a company knows how complicated and time-consuming the process is.

My mission was to help the user provide the data needed to form the company, open a bank account, and define services, branding, and marketing. All this info should be carried out in the most uncomplicated way.

I proposed to Zach Davis and John Salzarulo that we divide the data inputs into 4 major areas, each with its own subdivisions:

ONBOARDING 1. Sign Up 2. Company and Services 3. Branding 4. Marketing
Sign Up Screen

1. Sign Up

Sign Up Screen

2. Company and Services

Estimate Engine

Most Main Street customers had little to no experience in the painting industry. Estimating costs is a crucial part of the business. Even for experienced professionals, making profitable, winning proposals is a big challenge. Therefore, Main Street wanted to provide a simple and efficient tool.

I worked with Ankit Gupta and an experienced painting professional to create one of the most complex projects of my entire career. I don't know most of the tools and materials involved in painting. The estimation engine is a challenge for business owners, and it was for me.

Estimate Engine Dashboard Screen
Estimate Engine Mobile Dashboard Screen

Production Management Tool

I worked with Frank Lee on a tool for business owners to remotely manage the painting crew.
Therefore this tool was divided into 2 apps:

Business Owner App

The Owner can check which areas have already been executed, approving or rejecting them.

Estimate Engine Sign In Screen
Estimate Engine Sign In Screen

Onsite Crew App

The onsite crew access all areas to be painted. Everyday they upload photos to show the progress until the owner approves the final work.

Crew Item Screen
Crew Review Screen

“Roberto is the best designer I ever worked with. His critical thinking and emotional design make any project shine.”

Zach Davis picture
Zach Davis – Head of New Verticals
No cookies + Info Designed & Coded by Roberto Simões
-- Berlin, Germany