OneMain Elements

Interactive Design System

Problem
Rebranding of a corporation can be refreshing and invigorating, but it can also create a sink hole in branding execution if the branding guide is geared toward print and doesn’t include data/components for developers. My UX design partner, Drew Goff, and I ran into this issue. The external company that provided the branding guide did not include web or digital media components.

We created all internal application designs in Adobe Illustrator, but each developer was at liberty to interpret the finite details. When our layouts were transformed into code we began to see that many of our web applications lacked consistency. Icons were positioned slightly different, headers and footers were not consistent, button size and locations varied. It was a problem.

As this cycle continued, we needed to find a way to create a consistent digital brand across applications and for developers whether coded in CSS, Java or Angular. It was not merely the typical "go make a style guide and everyone will follow it" solution. No, we needed something consistent and more intuitive for users.

Solution
Drew and I got to work. We took it upon ourselves to design and develop a framework that was universal, on point, matched the brand guide and useful to the whole development team. The remote developers were especially grateful. We saved the company valuable man hours and money. Drew developed and I worked on layouts, components and icons. OneMain Elements lives today and was update with ease when the company rebranded again a few years later. The latest rebrand was seamless because of our creation of OneMain Elements.