Patterns for collaboration and continuity.

Internal documentation to allow teams to be on the same page visually and focus on systemic and strategic thinking and building.

Overview

This project was initiated to unify a suite of mobile products and expedite the development process with our UX team.

Process

Color

Shared Documentation

The guide launched with the following sections:

  • Principles

  • Color

  • Type

  • Iconography

  • Animation and Feedback

  • Gestures and Events

  • Accessibility

  • Components

  • Patterns (examples of components in use together)

  • Voice (UA, tone, user research etc).

Audit

I started by doing an audit of all current UI elements across multiple mobile apps. At the time each were created, the visuals matched our needs. Now, our portfolio was about to get bigger so it was time to unify and plan how to build out future products within a system.

I wanted to make sure all current pieces were taken into consideration to start and then go from there building out what we could further need, in addition to combinations of these.

A business considerations was to plan how to unify products while allowing for growth from a branding perspective and a user perspective (what would a user see if they had all of our apps installed on their device, or only 1?). We explored the use of color, and universal navigation for threading the overall brand together. We also explored concepts of one unified color palette with different iconography to represent each app's function, and felt that was easier to grow into for many reasons. One of them being the pure difficulty in choosing one color to represent an app before all of the apps in the suite were even in existence. 

I did most of the research for this, and designed all of the pieces while keeping in mind current UI schemes, trends, looking ahead into our business and also considering collaboration with engineers. I wanted this guide to be helpful in writing more reusable code, but also allow real-world flexibility. 

I started by exploring color schemes.

I drew inspiration from systems like Google Material, Atomic Design and the Salesforce Design System. The site was coded in our own CMS platform, using relevant animations for each section using animate.css.

It became a sound foundation to build on that allowed teams to be on the same page visually and focus on systemic and strategic thinking and building.

Icons

After exploring some global navigation planning, I pulled together icons. For maximum flexibility and enhanced performance, icons were implemented using a font file which only included the glyphs that were needed and no more. When needed, I created custom, pixel-perfect icons for our set. The image shows all of the icons that were used.