The Chartio Brand

Chartio was founded in 2010 with the goal of making business analytics easier for the average business user. Customers could connect their data to the service, create visualizations with a drag-and-drop interface, and save the resulting charts to dashboards. By the time I started in 2014, the branding had already been through some changes. Chartio had hired a few part-time or freelance designers in the past, but no one currently “owned” the branding or made sure it was applied correctly.

The Challenge

  • Define visual styles for the company to use while building the application and marketing materials
  • Communicate Chartio's values and mission through the branding
  • Communicate the decisions and reasons to the team

One of the first things I did when I was hired was make a basic Style Guide to collect the varioius styles already established by the website and application itself. This also let me start making decisions about what should be used where. Since I would be giving front-end development advice at times, I created the guide in a web page other employees could access and inspect.

Chartio's original style guide which I created early on
My original “living” Style Guide for Chartio.

I quickly realized just how handy it was having a “living” style page you can link people to when building new features. This guide helped the Product team add to the app while keeping styles consistent. In the realm of Marketing though, these styles left something to be desired. When we decided to rebuild the public website, I saw my chance to make some real changes to the public brand.

Learning and Iterating

This time around, I focused on pushing the theme of clarity even further. Chartio is all about making things clear, letting you answer questions with data and understand your business. Like good data visualizations, the external brand shouldn’t be cluttered or hard to understand.

There was also a piece of Edward Tufte advice I tried to keep in mind during this redesign, which is to not use more ink than necissary in displays of data. Of course, in the digital world, “ink” isn’t used, but having ample white space still gives an intentional, clear and confident look.

The Chartio logo page
This update features: logo file downloads, expanded color pallete, better grays, much improved type.

One of the larger changes I made to the brand at this time was the introduction of the Roboto Slab typeface for use in headlines. Before this, Chartio had used Open Sans exclusively. It is a clear and straightforward typeface, but I wanted something to make the brand feel more unique and approachable, without losing any power.

An example of Roboto Slab font

I chose Roboto Slab (Regular weight) for a few reasons. The big one is, it’s a slab serif, but isn’t too obnoxious about it. I wanted something to echo the big, slaby “I” in our logotype and Roboto Slab Regular offered that little something, without being soft or playful.

Chartio's marketing site homepage
There are a few more examples of the new branding applied to the public website in another project .

I also used the D3.js charting library to build a simple, pleasant-looking chart pattern “generator” which I’ve been able to use for a number of things across the brand. Since D3 works with SVGs, I can drop them into Sketch to make things like the wave background for the website landing page, or the patterns on our giveaway items.

See the Pen Wave Generator by Steven Lewis (@stevenlewis) on CodePen.

The “wave generator”. Click to make new patterns.
Chartio notebooks with blank dot-grid paper and stickers
Some giveaway stickers and notebooks.

I eventually worked with the Marketing team to put together a physical book of the brand styles, along with copywriting advice and things like company values, to give to employees.

The printed Chartio brand guide booklet for new employees
The first printed Chartio Brand Guide.
multi-colored Chartio shirts with a retro feel
Some multi-colored Chartio shirts.
Chartio Data for All shirt
This shirt featured two-tone versions of the chart icons found in the application.
Close up of Chartio shirt