Mobile Pattern Library

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

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.

UI element audit. 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, plus combinations of these.

UI element audit. 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, plus 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.

How to ignore your layer naming... :) 

How to ignore your layer naming... :) 

After exploring some global navigation planning, I pulled together icons.

Screen Shot 2016-02-25 at 9.44.20 PM.png

I took inspiration from places like Google Material, Atomic Design and the Salesforce Design System.

The guide contains 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).

The site was coded in our own CMS platform, using relevant animations for each section using animate.css.

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