Startup Branding: How We Rebranded Our Company in 3 Months

Startup Branding: How We Rebranded Our Company in 3 Months process.st/startup-branding/

9/21/2016

In the lifecycle of every startup, there comes a tipping point.

For companies focused on aesthetics and creating something beautiful, there’s a time where the founders need to shift towards their product — look inward and think deeply about the problems it solves, who’s it for and how to refine user experience.

For product-focused startups like Process Street, a necessary early shift is towards design.

Just look at Apple — that’s a company which thrives on making quality design and usability available on the mass market.

Apple 2016:

1/18

Would their product be as influential if their website still looked like this?

Apple 1999:

2/18

The simple answer is no because the brand evolves with the product.

This is article tells the story of how Process Street rebranded itself. We’ve included lots of useful resources and tools to help you along the way if you’re thinking of doing the same doing the same.

Let’s go!

It started with a product, not a logo or a brand Our CEO, Vinay Patankar, had the idea to build Process Street from his own frustrations with workflow management software. While running a global team he found that there wasn’t software out there which would let managers write process documents, create checklists, assign their team and track activity easily.

While touring the world after leaving Australia in search of the entrepreneurial dream-come-true, he met Cameron McKay. Cameron is our CTO, a computer science graduate who built Process Street from the ground up and, alongside Vinay, took the company from idea to AngelPad in less than a year.

Here they are in Argentina, where they met and started building Process Street.

3/18

In this picture from 2014, you’ll notice the logo isn’t the same as it is now. And what’s with those blues?

The thing is, at the dawn of Process Street, branding and design were the last things on their minds.

Based on past failures, Vinay knew the most important thing is to get a usable product together as soon as possible.

Focusing on other areas before you’ve got something that can be sold or funded is a way to burn money, not make it.

Here’s what Process Street used to look like when it was a Bootstrap WordPress theme:

4/18

While it’s good enough for a first pass, there were some inherent problems with it.

The most serious being that the light blue chosen for the main brand color didn’t work inside the app. As user experience improved and the app became more visual, the light blue contrasted badly with the rest of the design.

For the favicon, the P and S were condensed into a square — a pretty clunky and unmemorable way to do it, but the founders simply weren’t designers.

December 2014: Major app overhaul, minor site adjustments After graduating from AngelPad, Process Street had the time and money it needed to start redesigning the product to increase user retention. As for the marketing site, the changes were minor.

We added a full-width product image above the fold, a more ‘contrasty’ blue (I’m also not a designer…) and a cleaner design. The logo stayed the same.

5/18

While a great product can make up for bad presentation, great design doesn’t fix a crap product. To stay hyperfocused on UX and building features, Cameron rebuilt the site in a day or two before returning to codeland.

While Slack has its IRC hashtag, Trello has a board with lists, and Intercom has its… smiling microphone, Process Street had just a block with letters.

Our latest redesign came when we decided to get rid of our logo and make something more recognizable. Here’s how that happened…

A logo idea came in the middle of the night I was talking to Vinay about where he got the idea to change the logo, and he said it just sort of… came to him while he was on his laptop in the middle of the night. This is the image which sparked it all off:

6/18

It’s the logo for Designmodo’s Flat UI Pro, so we weren’t going to use that, but Vinay wanted to go with a flat diamond for a few reasons: 1. Diamonds are the symbols for a decision in a flow chart. This is something integral to the app.

2. Diamonds are a sign of quality. Process Street is a quality product and helps with quality control because it ensures teams execute tasks by following a procedure.

3. The app and landing page is designed flat. The logo had to fit in with it.

So, we cashed in our $100 discount from Tim Ferriss‘ promo code (“Tim”) and headed over to 99Designs to post a competition!

Here’s the brief: Create a new logo [Modern/Flat/Fun] for business software startup @ProcessStreet

7/18

We got some fantastic entries! We narrowed the pool of over 200 designs down to just 6, shown below:

8/18

While none of them were spot on, they provided the ideal basis for a concept we could present to a designer.

Working with Koombea design agency One of our investors, Jonathan Tarud, invested a combination of cash and service credit for his design agency, Koombea. They assigned us a brilliant lead designer, Mario Rocchi who took our logo, started creating iterations and uploading them to Basecamp.

9/18

And, as you can probably see from looking anywhere on our website, we chose this one!

10/18

Tada!

The logo formed the entire basis for the next step — a complete overhaul of our marketing site.

From logo to landing page 11/18

Deciding on a logo was important because it gave us two solid elements we knew would be included in the rest of the site — the blue, and the font (Cabin).

We presented Mario with an overwhelming selection of sites we loved and wrote down what we loved about them.

Keeping all of this in Basecamp gave us a place to have a group discussion while pinning everything in place.

We added Mario to our Slack team as a single-channel guest and integrated the channel with Basecamp, so every time activity happened there, it would post a message in the channel.

Here’s a selection of sites we loved which inspired Process Street’s design:

x.ai

We loved x.ai‘s super-minimalist landing page and the amount of whitespace.

Freckle

12/18

We loved the immediacy of the product and the fun color scheme Freckle use.

Trello

We loved Trello‘s use of icons, the large, easily readable font, and their bold, cartoonish colors.

Prototyping the landing page in InVision Mario came back to us with loads of possibilities based on these recommendations. Here’s a few we had a tough

13/18

time deciding between.

Eventually, as you’ll see if you check our landing page, we settled for the top right option and then worked with Mario as he perfected in InVision.

InVision lets designers work with clients and present them with interactive prototypes. Clients can comment on elements, then designers can make iterations and resolve the comments. It worked so well for us, we’d highly recommend InVision for anyone working with a designer.

Finally, we decided that blue can get a bit too blue sometimes. Enter Process Street Teal and Process Street Red —

14/18

incidentally two of my most favorite colors in the world. Check it out on our pricing page!

We had 100 glyph icons designed See that little paintbrush icon in the header image? Mario designed that. Thanks to Koombea, we have more than 100 new glyph icons to use in header images, demo videos, landing pages and product demonstrations. Since he gave us the Sketch files, they’re easy to manipulate even by us non-design folk.

We blew our whole budget on design Process Street employs 5 full-time technical employees but 0 designers. We didn’t need Koombea to implement the site, just design it. From there, Cameron got it up and running quickly. It would have been silly to ask Koombea to spend time on that — instead, we spent everything on their design services.

This meant we got graphics for social media, header image templates and graphics for features that hadn’t even been released yet. Forward thinking, eh?

We updated our AngelPad profile, Google Apps Marketplace, LinkedIn, Twitter and Facebook.

Here’s our shiny new Facebook profile:

15/18

And some future feature graphics (as a sneaky way of telling you to hold on for all this good stuff):

Woo. Looking smooth.

16/18

And as for the blog header image graphics — Koombea cut about an hour a day from my workload with those little

17/18

beauties, and I must say, they look fantastic.

Check out the final designs in action: Homepage – https://process.st Product page – https://process.st/product/ Featured templates – https://process.st/checklist/ Colors applied in the app – https://app.process.st

18/18