OVERVIEW

Context.IO is a modern, scalable email API that brings IMAP into the 21st century. With Context.IO, developers can write RESTful code against an API. The API syncs with the email data so developers don't have to build, scale, and maintain the infrastructure themselves. Hundreds of applications with millions of users depend on Context.IO to deliver email syncing to their end-users.

contributors

Susan Wilhelm, Dan Corbin, Cecy Correa, Aaron Labrie, Dane Carmichael

MY ROLE

As the UX / UI Designer on the project, my responsibilities included: 

• Discovery interviews with the internal team of developers.
• Collaboration with product managers and developers defining content.
• Visual Design (Sketch, Adobe Illustrator & Photoshop)
  • Style Tiles, Style Guide, Logo / Rebranding
  • Wireframes / Iconography
  • Prototypes using Invision

STYLE TILES

The website hadn't been updated in more than 5 years and there wasn't a formalized styleguide. I started with style tiles before the brand refresh. I used the persona of some of the quirky developers working on the API and came up with a "vaporwave" style tile. They all prefered that direction, however, our business stakeholders preferred something a little more corporate with bolder reds on slate. I did some hall way testing and got feedback from the design team. We ultimately ended up with style tile #3 to satisfy the CRM business minded persona, however, I designed a "night mode" for the developers with #2. We hid the little easter egg in the footer with and marked it with a party parrot.

STYLE GUIDE

I created a basic style guide with colors, fonts, buttons, and defined horizontal and vertical rhythm using an 8pt grid system. 

LOGO DESIGN

I didn't actually have any real issue with the original logo, however, I gave the team a few more logo options. The first grouping, I riffed on ideas using envelopes, html code, and API code icons. The second group, by request of the API team, I riffed on bird logos based loosely on the party parrot culture.

ICONOGRAPHY

I found, combined, and manipulated some existing iconography from on UI8.net. What I couldn't find, I created myself in the same style.

Wireframe

I came up with the wireframes after riffing on content ideas with the product managers and engineers. We went back and forth on Invision to come up with the information architecture and copy.