UFCU was looking to redefine the way their solutions on mobile and web was being accessed. The work on the design system was meant to cover iOS, Android and web devices. What’s more? It was also to cover dark mode for the mobile devices.

In building this design system, we had to ensure that once components had been built using base elements from the Design System - or in other words, that once complexity has been added - the Design System could still be easily understood by any designer or developer that needs to execute- for whatever device.

Furthermore, we had to make sure that all of our work were WCAG compatible. Making the products of the design system accessible was, as expected, a top priority for all parties involved.

Color Tokens (Image)

Button Behaviour (Interactive)

Layout Grids (Interactive)

Components Breakdown (Interactive)

The process of making and maintaining the UFCU design system required cross-functional collaboration. Using an agile approach, we set up sprints to include design critiques and regular reviews to keep tasks a manageable size and identify and address problems quickly.

Within the organization, utilization of the system increased design and development collaboration. It also served to improve efficiency in developing new tools, leading to a more cohesive, higher-quality user experience. Externally, the UFCU design system presented a unified solution to stakeholders and succeeded in simplifying the most high-profile systems with the potential to touch millions of users. It created a foundation for building accessible and usable products.

Clear Design Systems and handovers result in less back-and-forth between designers and developers, and reduced friction. Mobile-friendly and fully responsive elements and patterns, which were fully functional, accessible (WCAG standards) and flexible.

We have big plans for the UFCU design system’s continued growth. The library is built in a way that with new releases they can be easily adopted into products and we're working to generate a backlog of new patterns and components to build. Legacy products are adopting elements of the design system as part of updates, and new products are being built using the library. As tools and applications adopt Indigo they are receiving consistent praise from partners and users for their clean designs and ease of use, which further motivates future adoption.

See app here.