OneMain Elements

An interactive design system made exclusively for OneMain Financial

elements-portfolio-preview

The Problem

Everyday my UX design partner and I would create interfaces in Adobe Illustrator to get them approved by the share holders. The next step in the process was to hand over the designs to the developers and then we would move onto the next project to design. However a problem began to arise.



When our designs got transformed into code, we saw a lot of things get lost in translation. What made matters worse is we discovered that a number of our Java Developers simply just did not know CSS. So a lot of times they would tell us that our designs were not possible.



As this cycle continued, we would see that many of our web applications lacked consistency, had multiple branding styles, and consisted of different sets of icons and frameworks such as Bootstrap or Foundation. Something needed to be done. it was not merely the typical "go make a style guide and everyone will follow it" solution. No, we needed something bigger and more intuitive than that.

The Solution:

Research & Wireframes

We began to layout out the design template. The first design pattern we used was James Craig's readability rule for 45 to 85 characters per line. So we built a container to hold all the writing content that was centered with a max width of 700 pixels.



From researching Nielsen and Norman's "Above the Fold" article, we knew we wanted to design something with the bulk of important content at the top of the first landing page. So our first two paragraphs of content were placed at the very top of page and the download link for the framework was within the top fold.



We researched layout patterns and gleaned content from Nielsen and Norman's report on F-shaped viewing patterns. By placing the logo to the left and the navigation to the right with content below we were able to achieve a successful l. layout well within the parameters of a 700px container.

elements-wireframe

The Solution:

Design

In the "Use the Elements" section, we used a clean white background and colorful icons with high contrast in an attempt to attract the user.



When it came to designing the sidebar of the mobile version, we decided to use a monochromatic design technique of using multiple shades of blue to create a calming effect.

elements-colors

The Solution:

Coding

On our team, I was the one tasked with coding the framework. So at the time, SASS had just started to become popular. I decided to approach the project in terms of thinking of each element as a CSS module.



So, I started the project with Sass Mixins, variables, and a content organization approach inspired from SMACSS. This SMACSS approach broke down the layout of the SASS files into partials that were in folders called base, layout, modules and theme. These elements were imported into one stylesheet.



In every project I do, I look for a way to grow. I challenge myself to code the CSS dry without repeating anything. I use @extend to make sure each line of code is only written once. The result is a CSS framework stylesheet of 103kb.

SMACSS Inspired SCSS file structure

smacss-file-structure

The Result

OneMain Elements solved four major problems:


  1. Problem: inconsistent design.
    Solution: Conformity across all web applications
  2. Problem: Poor productivity.
    Solution: Increased performance and efficiency as the developers were able to code the interfaces in a matter of hours compared to days.
  3. Problem: Wasted time doing CSS.
    Solution: The developers could focus more of their efforts in writing more logic.
  4. Problem: Mock ups not consistent with finished product content.
    Solution: Interface compatible with and equal to the original design. In essence, what the shareholders saw in the design mockups would be exactly what the interfaces actually looked like.

Other Pages

ele-icons-preview

Icon Library

ele-color-preview

Colors

ele-buttons-preview

Buttons

ele-widget-preview

Widgets