Designing and implementing a scalable, cross-platform Design system.
University Federal Credit Union, Austin Texas. May, 2022.
My Role
Design systems Engineer- Design system, Visual design.
Timeline & Status
4 months.
Launched September 2022.
Industry
Financial Services
Payment
Overview
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.
CONTEXT
The big idea
We set out to build and sustain a design system called the UFCU design system (uninspired name, I know). Encoded in HTML and CSS, this design system needed to create a visual language and foundational component library to support UFCU program web applications and tools complete with documentation available to all internal partners.
To ensure that the Design System could be easily understood by any designer or developer that needs to execute, we decided to make the tokens more contextual and relative, rather than generic. This being said, we did not completely get rid of the primitive naming schemes, we only took those and evolved them to contextual use cases. (eg. Border_main, border_light, background_main, foreground_secondary, inverted_text etc.).
The images below show work in progress sections of the design system that we explored - tokens, base elements, components, grid systems, button behaviours etc.
Colour tokens
image
Tablet
Mobile
Web
Layout grids
Interaction
Design. Document Publish
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.
Design
image
Document
image
Publish
image
The results
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.
Next steps
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 at https://apps.apple.com/us/app/ufcu-mobile/id1638772747