August 20, 2024

Orchestra Branding & Web Design

Orchestra Branding & Web Design | WEBOAF

1. Background & Project Goal

Orchestra is a London data startup founded by Hugo Lu.

During his time at JUUL & Codat, Hugo witnessed several challenges data teams face that he felt he could fix. So he built Orchestra, the easiest way for data teams to release data into production without it breaking.

Hugo writes about data 24/7. When Hugo came to me, he had a successful blog about data, his first funding round & a strong DIY website.

Orchestra Old Website
Orchestra’s Starting Website

He wanted to design an updated brand & scalable website in a 4 week window.

The brand needed to have unique visual style to show that Orchestra is a new category of data product. It also had to be professional, so as not to alienate a data engineering audience.

The website had to be scalable so that the Orchestra marketing team could easily update it whilst staying within the brand guidelines. So as well as page designs, we needed to create a design system that could be used to build future pages.

2. Research

I started my work by doing some research into brands across the data engineering space, to get a feel for what works and what doesn’t. I used FigJam so that I could easily collaborate with Hugo.

Orchestra brand discovery
Orchestra Brand Discovery

I then categorised the brand guidelines across the industry by the 3 most important elements of any online branding system: logo, typography & colour so that we might find some preferences to work off.

We decided we would go for a modern logo, with a sans serif font & a light mode colour scheme.

3. Branding

Given the boundaries we defined in the research phase, I provided Hugo with some options for typography and color.

Color / Type Preference Testing

We made our choices then we moved on to the logo. The initial logo was cool but it only worked in a couple of contexts.

We needed a logo that could comfortably be used all over the web in a full range of contexts from social media to websites to video.

The best way to create a robust logo is to use geometric shapes to represent a singular idea (LogoBook).

I decided on that singular idea from Hugo’s genius naming strategy. The name Orchestra is an analogy between musical orchestra’s & data orchestration. A musical orchestra has a conductor, a data system has the Orchestra platform.

The singular idea I wanted to symbolise was of a thing conducting multiple things.

My first approach was to start with a musical orchestra diagram and see how much I could simplify it using circles & the golden ratio.

My second was to simplify the original logo Hexagon based logo.

Despite worries from the team that it was ever so slightly reminiscent of a pokeball from Pokemon, we decided to move forward with the first option.

A reminder on branding / logos:

  • Your brand is not your logo
  • Your brand is the way you make people feel
  • The logo is what they attach this feeling to

The Apple logo isn’t iconic because it’s an Apple, it’s iconic because of the products Apple produce. I see people getting way too pedantic with their logo. Brand’s evolve with the company. Just get started.

Finally, I created a stylescape to show how the colours, type & logo we had picked would work together.

4. Website Design

To start the website design process, I collected my favourite sections from websites across the internet. I used the data companies we had researched before & websites from my personal inspiration list.

website section inspiration
Orchestra Website Section Inspiration

Then I created a mockup for a different website page. During this process we developed the website aesthetic whilst building a robust design system that could scale.

design explorations for orchestra
Design Explorations

I experimented with hexagonal edges, pipeline illustration and off-white colour combinations. I wanted the website to look amazing both at first glance & upon closer inspection.

I discovered this cool aesthetic with thin lines originating from a single point.

We had lots options but it was hard to make decisions. So we needed more constraints. So I got to work on assets that would be used on the website.

I used our brand guidelines to adapt the product designs from dark mode to light mode. The product designs were made by a talented product designer, which made this process much easier for me.

I used the new product mockups to design another landing page. Finally, it clicked and we decided we were happy with the following direction.

weboaf website mockup for orchestra
Final Visual Direction

I then built a style guide.

orchestra style guide by weboaf
Orchestra Style Guide

Then as I built out each page I saved the components to a design system, so that they could be reused.

orchestra design system by weboaf
Orchestra Design System

After lots of hard work, we had completed designs for every page, a style guide & a component system. You can view the live site here.

Finished Product

5. Result

The team loved the website & Hugo was a happy customer. The designs were handed off to a talented Webflow developer who was grateful for the robust design system. He managed to build the full website in 10 days as a result.

Hugo’s feedback:

Ollie has a fantastic understanding of the driving forces behind visually appealing content in the technology space. We were able to iterate extremely quickly while delivering a design that looked excellent. Kudos to OAF!

Hugo Lu, Orchestra Founder & CEO

I grew a lot during this engagement. Hugo’s ability to output high quality work at an ultra fast rate was admirable & it pushed my work ethic to new levels. Additionally, the time pressure made me think more intentionally about how to spend my time more efficiently.

If you’ve got an idea you’d like to work on, visit www.weboaf.com or email me at ollie@weboaf.com