Portfolio

Main Street

Bringing Marketing & Product
together in a cohesive
design system.

Main Street

Case Study

Project Background

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.

Marketing—Product

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

#1 Product Design

Onboarding UX/UI

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.

Sign Up Screen

Sign Up - Part of the Marketing Website

Sign Up Screen

Company Services - Part of the Web App

#2 Product Design

Estimate Engine App

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

#3 Product Design

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.

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.

Estimate Engine Sign In Screen
Estimate Engine Sign In Screen
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