Touchstone Design System
Lead planning for BOK Financial's new Touchstone Design System to centralize the enterprise UI patterns and documentation for a single source of truth.
Touchstone Design System
BOK Financial
Patricia Snodgrass
July 2021 - Present
Overview
BOKF invested in an official design language to consolidate all design patterns to be cohesive and fit in line with the established brand guidelines. This was a monumental step for the UX team to streamline user interface patterns across the board from mobile to web.
The new design language paved the way for the UX designers to design user interfaces at a faster, more efficient pace, designing fewer new components.
However, the new language is only the beginning of our efforts to consolidate patterns and increase efficient product design and development across the board.
It is the language that speaks for a full design system, which BOKF needs.
Challenges
BOK Financial's digital solutions product development has numerous challenges ahead that a design system is intended to alleviate.
We have no real cross-team ownership of digital assets. With the lack of a source of truth for the design language beyond documentation and general guidelines, development time is increased by recreating components that other development teams have already build, thereby taking away time that could be sent developing new features.
Furthermore, the recreation of components means that they are inconsistent across the board.
Solution
As an architect, one of my primary responsibilities has been to collaborate with designers and developers to create a better experience for them to build clean, efficient, and positive user experiences for our applications.
A design system is a central ecosystem of rules, constraints, and principles through design and code. Designers, developers, and marketers benefit from access to an amalgamation of styles, components, usage guidelines, and even tone. It is a single source of truth for all.
The goals of a design system are to:
- Be consistent.
- Be impactful.
- Reuse.
How we started
Planning the design system required months of research, as well as multiple discussions with designers and developers to learn their current pain points with working with the current design language, and how they envision improvements as well as how a design system and robust documentation can improve their experiences.
Garnering support
For buy-in from product teams and stakeholders, the return on investment by investing in the development of a design system is a challenge to measure. I gathered data from other design-centric corporations that found success through investing in a design system.
Naming the design system
The naming of the design system was a collaborative process with the creative team.
How did we come up with Touchstone?
We brainstormed many names, and categorized them into the following themes:
- New beginnings, which define how we are introducing our design system.
- The beacon, which is an extension of our logo and what it stands for.
- The single source of truth, which is what our goal is for the design system.
In the end, single source of truth was the decided theme. From there, we voted together on the name we thought fit the theme best.
A touchstone is a standard by which something is tested for excellence and authenticity.
We can consider Touchstone to be our aspirational standard, a living gauge to measure our work and extend our ever-evolving brand guidelines into our digital products.
Touchstone is now BOK Financial's design system, a single source of truth, where we share our goals and build a common vocabulary.
What's next?
The design system requires a cross-team effort that provides a birds-eye perspective of the entire ecosystem the design token library serves, while each product team provides an on-the-ground perspective focused on a specific application of the system.
Together, these perspectives ensure the system solves real- world problems and scales to benefit the whole organization.
A cross-disciplinary, systems-minded group of designers and developers will:
• Design and develop the system's components
• Build the design language libraries that export design tokens
• Create and maintain guidelines and documentation
The team will define the processes necessary to integrate the library into BOK’s digital products as well as contribute changes and updates back into the library.