Design System

PenFed Credit Union

Role

UX/UI Designer, Design System cohort

Background

PenFed’s UX team did not have a proper design system; it was a component library that had become outdated. This library lacked the essential foundations of a design system, such as typography, page standards, padding, grids, etc.

The listed components also had confusing naming conventions and was built for functional components only, not base.

Goal

  • Create a design system built in Figma.

  • Provide basic foundations that represents the PenFed online brand and new redesign.

  • Rebuild the components based on atomic design, so there are both base and functional components.

  • Build mobile responsive components for mobile first approach.

Design System Foundation

Design system foundations was lacking from the previous library, we needed to dedicate time to add our color systems, brand logos, iconography, typography, grid systems, and spacing scales.

Components

Base Components

Our first step was to review our new redesign projects and break down the page into base components so we could catalog them since they were lacking in the previous library.

Functional Components

Then we looked at our functional components like the account cards on the account summary or transaction table from the account details page that we recently designed.

Making these functional components will encourage reusability and reduce technical debt.

Patterns and Page Standards

The redesign meant learning a new design language for the greater UX team and the dev teams.

  • By establishing our new patterns and page standards, we can quickly adapt to the new language and bring it to life in our projects while keeping a cohesive UI and experience.

The design system cohort built examples for pages in every stage of a flow or stand-alone screens.

  • We broke down the padding for each page and then provided an example of what this padding would look like without annotation.

Accessibility

PenFed members are largely retired veterans, so accessibility is vital to our design and member experience. We ensure that all of our colors have the correct contrast ratios or provide alternative colors for different backgrounds to meet WCAG compliance.

We also check to ensure our components are friendly for accessibility tools.

Next Steps

We are educating and promoting the design system within our team, but collaboration between our dev teams is so important.

We plan to host workshop sessions with our dev teams to showcase the design team to get input on the components we’ve implemented so far and will continue to involve them as the design system grows.

Previous
Previous

Personal Bank Account Transferring

Next
Next

Vela Case Study