top of page

Design Style Guide

Goal

 

Our products had little to no guidelines; and due to this UI was inconsistent and clarification requests were high.

 

We wanted to create clear instructions/guidelines to apply across our products and set standards for both design & code.

A comprehensive usage guideline which includes color, typography, icons, size, spacing info on components and layout breakpoints.

​

I worked with designers, product managers and front-end developers on a UI style guide and pattern library for Yodlee’s diverse product portfolio.

Preparation


Understanding the design and development ecosystem was the first task. We gathered information on requirements, regulations, and technical limitations by meeting with stakeholders.

​

I audited all UI elements used in every FinApp in our product suite, prioritized and reduced elements into a definitive set.

Provided clear indications on how each element should be used in all product UI's.

listing.png

Colors

 

We had plenty of near-but-varied colors used on our apps. Below is the list of those variations.

Reduced Colors

​

I merged the existing colors and brought into a concise yet comprehensive list with no color outside our color palette defined by visual designers. While merging, I had to adhere to regulatory requirements like ADA contrast-ratio.

2 Color.png

Icons


Most of the legacy icons used didn't have design source-files; they existed in various formats (SVG, PNG and icon-fonts).

 

We had to redesign them to seem like they're all coming from a same family. I handcrafted and recreated each of the 160+ icons.

​

I grouped them by specific icons-set for respective FinApp and also provided a link for developers to have easy access to all icons at once.

4b Icons-List.png

Typography


In a very similar fashion how I dealt with colors and icons, I reviewed and finalized our typography guidelines in consultation with the team.

3 Typography.png

Outcome

​

The UI style guide has benefitted us in many ways:

  • There's a single source of truth for everyone.

  • Drastically reduced UI inconsistency in our product suite.

  • Less to no ambiguity for designers, engineering and QA; resulting in very few bugs/clarifications.

  • This provided a good foundation to build a Design System at a later time.

​

The complete style-guide is available to view upon request.

bottom of page