Styleguide

Developing a living styleguide for a consistent UI

Lead Designer
Engagement Design Case Study

Background

Bright Funds was several years old when the team found itself running up against the same problem. While working through new projects, we would end up re-designing or re-engineering components that were similar to components on other views. This was because we didn't have a central source for component styles. As a result, inconsistencies in the UI began popping up. As a side effect, design and engineering would spend unnecessary time re-building elements from scratch.

To fix this problem, I created a styleguide and components library that could be accessed across the team.

Icons

I designed an icon library for Bright Funds UI. This library grew as icons were needed on a per-project basis. Icons were based on a 20px x 20px grid and could scale up or down depending on the context. Icons are designed to be simple and bold. They were designed primarily for single-color usage.

Elements

I designed the UI language for Bright Funds. This included buttons, form elements, navigation, cards, and other key UI components. This library expanded and changed over time as the UI language progressed.

Layouts

All layouts are responsive and work across screen sizes. Layouts are based on a 12 column grid that adapts to screen sizes to ensure consistency.

Living styleguide

I partnered with an engineer to create a living styleguide to house the various components. This styleguide could be accessed across the team and expanded upon as new components were added or existing components updated.

Foundation Fund Product Design Case Study

Case study 1 of 3

Foundation Funds

Helping people make smart decisions with their giving.

Focus: New product offering
View project

Case study 2 of 3

Awareness and Engagement

Spreading awareness and increasing engagement
of Bright Funds within the workplace.

Focus: Engagement
View project
Foundation Fund Product Design Case Study