// Project Summary

Building a Design System for a Financial Institution

OcctopiaPortfolioBuilding a Design System for a Financial Institution

How might we create a cohesive visual language to unify both internal and external apps and websites?

Organization

AmeriCU Credit Union

Roles

User Researcher, Visual Designer, Front-end Developer

Tools and Frameworks

Adobe XD, Adobe Illustrator, Vue.JS, Bootstrap, Storybook

Timeframe

4 Months

The Problem

AmeriCU Credit Union needed a design system that would ensure visual cohesion between future applications and websites.

The Solution

After research, including a UI inventory and discussions with stakeholders, we identified multiple areas that a design system could improve upon. Our visual design process began with defining primitives such as color, type, and imagery and moved into form and other UI elements.

After completing advanced UI “molecules” and “organisms” we tested, developed, and documented the system using Storybook.

The Result

  • Design and development speeds increased by 50%.
  • Overwhelmingly positive qualitative feedback from stakeholders.
  • Consolidated, consistent repository of guidelines and UI components.