Skip to main content

Visual update to V3

You’ve been using V3 of the app in beta for a month or so now and have been receiving fantastic feedback from all of you.

One of the most requested changes was to reduce white space in the layout to allow for more info and data to be visible on the screen. You asked for it. We listened.

Last week, we pushed out a design update for the new Customer.io beta.

Dashboard Logs

Typography, Spacing and Size

Improving data readability was the primary goal for this design update – making it prettier was simply a pleasant side-effect. Using a mathematical approach, I’ve reworked the typography, sizing and spacing of the app’s visual framework. Essentially, all of the app’s component dimensions, as well as the layout and spacing, are influenced and by a single base number. In the case of “Fly”, that number would be 4px (14px for the typography).

Google does an exceptionally wonderful job at outlining the usage of this “base” number principle in their new Material Design guideline. Some people call this the “keyline” number. I simply refer to it as the “base” number due to my lack of fanciness. Whatever you call it, having your design influenced by a “keyline” invetiably harmonizes the overall look and feel of the layout. As great as this new subtle shift in font-size and dimensions is, the initial impact of “wow” is tiny compared to the recent change in the app’s color scheme.

Color

Color is another aspect of the new “Fly” that’s quite heavily influenced by Google’s Material Design (seriously, I can’t praise that thing enough). I went with the more subtle (and arguably more sterile) combo of white and light gray for the main body of the application.

Swatches

People come to Customer.io to get a job done, and I wanted to make it more familiar and feel like apps like Gmail. Hopefully people (especially first time users) will feel more comfortable using the application because navigating something white and light-gray is something they’ve done plenty of times already.

To add a splash of color to this new light monochromatic layout, I decided to use our primary green to energize the top header of the app. It’s a very common design move for websites and applications to wear their signature colors at the very top of the page (think Twitter or Facebook). It helps associate a particular color with the application or site. So when you see this particular shade of matte blue, you immediately know you’re on Facebook. I wanted you to have the same reaction when seeing Customer.io.

Header

We’ve only gotten started on reworking the UI/UX of the app. The redesign was a big step in this new exciting direction that we’re taking. So for you folks out there who are using and trying out “Fly“, please continue to send us your feedback! We’re always listening and we’re constantly working on building the best Customer.io we can for everyone to use and enjoy.