CAA South Central Ontario and Manitoba (CAA SCO)

Design System as the future way to go

5 min readJan 11, 2020

Lean-in.

Not every project or company has a perfect setting. I can initiate projects with matrix.

—

I started the CAA SCO Design System project by auditing the existing assets: evaluate the differences, access the pressing needs and understand the technical constraints.

Audit on mobile app and core marketing site

Audit on micro-site and sub-business site

Audit result — the differences:

Through lack of resources and expertise CAA SCO had accumulated a subjective culture that there are no reinforcements on consistency, which is causing the differences in design composition, breakpoints, and UI treatment across platforms.
Lack of digital and technical knowledge also created a high volume of back-and-forth from scope creep. Subjective ideas also created silo and narrow-minded project. Each silo employs agency per their need and design as they wish, which contributed to cross-platform inconsistency.

Audit result—the pressing needs:

Clear action indicators, such as CTA buttons, with clear states and designs that meet the accessibility standard (WCAG AA).
Clear information UI elements that define which and when to use for displaying a lot of Membership information, insurance information and Q&A information to support complex business offerings according to multiple lines of business.
Clear yet interesting multi-media UI elements to complement the heavy text.

Audit result — technical constraints:

Hold up by basic CMS platforms due to budget and legacy procurement. These platforms come with high limitations that are not flexible and have low customization ability.

Rally Supports:

When I spot any inconsistency, long back-and-forth, and rework on the agreed design, I took my time to explain the benefit of a defined font, look, and elements to the Design Manager, Product Manager, and Front-End Engineer. They see the need, but day-to-day workload still gets in the way.

Making the impossible possible — Capability allocation:
10–15% of everyone’s time having discussion or jamming solutions seems to be possible.

Set The Base:

With limited support and resources, I streamlined these few guidelines and components as an MVP. Then, iterate and test with the “users”.

The Design Guiding Principle:

Simple that everyone can understand.
Intuitive that there is no guessing.
Accessible so that it is reliable.

For close-up version, please open this link: CAA SCO Design System

In the meantime, it is also important to gather insights, educate the company of digital needs and rationale benefits to persuade further digital investment within CAA SCO by creating compelling business case(s).

Creating Business Cases:

Showcasing the value of consolidated UI — reduce transaction cost:

I ran some tests with Product Managers and Front-End Engineers hoping to get their insight and try to list the benefit of reducing transaction costs to Design Manager and Marketing Managers but during the inquiry, we found out all of the platforms used the WYSIWYG method input that typically only supports uploading image and text. No re-layout, removing parts and add-on coding snippets that we can do. Only the .com website had an old project with a vendor that has not to launch.

So, we decided to focus on creating Business Cases to initiate budget and or changes for the future.

#1 ) A Design System can be your organization’s education and alignment tool:

The goal of CAA SCO’s Design System:

“Is that Klear — CAA SCO Design System?”

Educational with guideline, platform goal, and vision(s)
Easy to implement
High adoption
Reduce transaction cost
Scalable (bridging online and offline, as well as cross-platforms)

Roadmap of the Design System:

Internal Roadmap:

Obtain buy-in, define core scope and MVP
Launch, learn, refine and secure talent resources
Establish needed roles such as creator, reviewer, maintainer, and contributor to measure, learn and iterate. Include readiness states of each component in the system (ex. upcoming, in progress, stable, ready-to-use, and new for clarity and communication)
Become the source of truth and support any process rework
Apply theming techniques for other applications, such as microsites, online or offline marketing collaterals (mini CX) and native mobile apps.
Extent guidance in content writing (https://www.designsystems.com/guide-to-content-strategy-in-design-systems/), visual language and or illustration
Be the ever learning yet solid Design Language to the organization

External Roadmap:

90–100% usability and clarity result from prospects and users

How could the future look like?

Further IA, usability, content, card sort, and tree sort tests will be needed

#2) It can save CAA SCO money, support future digital projects and bring people together:

“CAA Digital?”

When a consistent Design Language, code, content, UI elements, and assets are provided. The company can invest in new digital platforms and products with guidance, and at a lower cost due to more grounded planning and estimation.
With this source of truth, change management and vision become clearer, which mean it helps to bring different employees and different line of business to work together, break silo and re-imagine a new way of collaboration.

What needs to be true for this to work? What are the barriers and what needs to be tested?

Growing needs from the digital savvy in loyalty, motor or biking membership aside from roadside assistance, so CAA SCO can be in competition with the movement of Self-Driving Car
Innovative mindset and culture to compete with AI and Self-Driving Car
On-going project support and funding
Team size expansion from x2 designers, x1 content writer, x1 front-end engineer to a team of expertise

#3) It can cultivate a culture shift for anayltic-based mindset:

From subjective to rationale.

Final Result:

CAA SCO reviewed the project. Lower management agreed to start a Design System in 2020. Unfortunately, executives of CAA SCO decided to focus its business in in-store retail (merchandise, Membership, and insurance) instead. No budget was given to any digital projects at the end.