UX CASE STUDY
Design System Creation
CHARM
CASE STUDY HIGHLIGHTS
-
ORG & SECTOR: Fulton Bank, All departments
MY ROLES: UX Strategy, Research & Design; Digital Branding; Content Creation & Architecture; UI Design & Development; Product Design, Strategy & Leadership.
TEAM: My two Knowledge Management partners and I kept this moving.
-
Finding the right technical home for this system, without compromising its new standard-setting guidance.
Getting dedicated help to actually build the system.
Convincing the Marketing department to play nicely.
Keeping the scope realistic for the first release.
-
I pioneered the entire strategy for this to come to life.
I intensively researched design systems, where to start, how to accomplish with few resources, models of support and evolution.
In collaboration with KM partners, I formed a group of innovative partners and early adopters from other departments.
I led cross-departmental workshops to establish base needs.
Found a way to make it work within existing SharePoint framework.
With only one developer to assist, I built the system’s first release.
I marketed & grew the influence of the design system with support from the early adopters group.
-
IT’s Application Development group rapidly consumed & applied system guidance in new in-house built project efforts.
The org’s Business Intelligence group began adopting & applying design system guidance in their data visualizations.
The org’s Learning Department began adopting & applying standards in learning modules they developed.
Business Analysts were finally able to have design standards to promote and follow when working with other departments and vendor software.
-
Contextual interviews (as part of my Listening Tour when I first joined company).
Picking Parts, Products, and People Workshops.
Hallway Usability Testing.
Workshops for exploration, investment, and knowledge-sharing.
Feedback prompts and forms within the design system.
HarePoint Analytics.
KEY TAKEAWAY
Form an alliance of early adopters invested in its success
and empower them.
Identify potential design system users. Who would use it most? Who would be a strong ally, influencer, early adopter?
The most important consideration is the people who use what you make.
A design system is highly complex, and you will need help in making sure you’re considering the right things, a proper home, that others can find it, that it gets into the right hands and is used, that it’s properly maintained and evolves as users mature, and that it has a dedicated core team to give it TLC.
Of all of those possible users, who will use it most? Who is already an influencer in their own discipline?
Increase your potential impact by leveraging guidance in a design system.
Here is one example of many showing a typical form-based interface that employees are often asked to use. I was called in “to save this,” requested by the developers who received this from a non-designer following a legacy format.
When providing guidance, I can quickly sketch and share the concepts to communicate visual helpers, hierarchical component groupings, usable form standards, and use of progressive disclosure where possible. All of those items rely on previously defined basics and concepts, including comprehension of proximity and space, proper use of color, and breaking down complex behavior into smaller steps.
This guidance has its time and place, but a design system works so much better.
Visualize growth from a clear starting point.
For the right sponsors to invest in the short and long terms, visualizations that communicate where we we start and what helps a design system to grow are an essential part of the sales pitch.
The message should be clear - it will take time, care and usage of the system to start feeling the effects to the greatest extent.
In the last frame of the animation, I show that integrated code is the apex goal of a design system, if a company is to be truly invested. But it’s tough to get there right out of the gate. In reality, a lot of design systems die before they even get really started - especially if developers are not equal investors of the Design System.
This story is part of the showcase of evolution that must occur in a design system’s native environment.
Never underestimate the power of your influence to motivate others to tackle the impossible.
Define building blocks of basics to form complex models.
The story of building blocks had already been conceptualized by Atomic Design leader Brad Frost. I simply continue in his methodology showing how basic elements must be defined first, groupings of elements next, components third, layouts and templates fourth, and implemented pages last.
What do clients want? Finished and flawless pages within user-friendly products. But, what must be considered first by designers and developers? The basics.
Estimate potential time and cost savings to communicate ROI.
Everything in this life costs something — time, attention, money — some kind of investment. The chart I’ve visualized is a close representation of a medium-sized organization, with the type of roles, number of people in those roles, and their general time involved in seeking direction for the digital products they create, develop, manage, populate.
Businesses generally think in terms of financial costs and gains, risks and assurances, numbers and the bottom line. Employees of those businesses typically think in terms of what they need and where they can go to self-serve and accomplish what they’re asked to complete.
Appeal to potential partners, sponsors, senior leadership AND your fellow colleagues with a snapshot of how a robust design system can save productivity, production costs, and potentially increase employee satisfaction, empowerment, and accomplishment.
Run workshops to establish users’ most important needs.
A design system built from what I feel should be there versus a system that contains what my users truly need are two vastly different systems. Although I can recognize that basic guidance in many areas is missing and must be a part of the system, it means so much more when my users share those needs — because then they are invested in the outcomes of the system and naturally become the system’s early adopters. The workshops I’ve run that result in insights too vast to list here are the Picking Parts, Products and People developed by Nathan Curtis, Design System guru.
Feel free to look at my user research in a little more detail. From the research I gathered, I decided to focus on the top ten needs for the system’s first release, as well as fundamental knowledge-sharing about the system itself.
“We need patterns we can use and then let us figure out the best way to build it. We don’t need 100’s of pages of requirements.”
— Nicole M., Application Developer
Reimagining color - fully web accessible and usable.
Color is multi-faceted and brings design to life, when used correctly! First, I needed to provide guidance on what colors to use, as all digital creators only had Marketing’s base palette of 6 colors from which to choose and follow.
I challenged myself to learn even more about color through a newer model that best represents digital color, additive color — the HSB color system — Hue, Saturation, and Brightness. From these techniques, I created appropriate variance above and below the core brand colors.
In deciding upon this final set of colors, I rigorously tested color contrast accessibility, making sure to visually label all colors that passed WCAG 2.0 levels AA and AAA standards.
Using color in balanced ways.
Color communicates in ways that inspire action! Not only did I provide guidance on what colors to use, I needed to show HOW to use color. In observation, developers didn’t know how to use colors — if the main color was blue, everything must be blue. Often times, color was used just to use it, often in overwhelming application of large amounts of reversed text on heavy solid blocks. Color needed a more balanced approach.
I followed Google’s Material Design standards in applying color to responsive application designs, slightly modifying the palettes used in Photoshop. I shared these multiple palette combinations including How-To-Use guidance with developers and business analysts.
To provide examples of well-balanced color within designs, I shared multiple case studies of other digital designs I’d done for other teams, linking directly to the sites.
Knowledge-sharing about color usage and best-practices wouldn’t be complete without guidance around color contrast — with plenty of examples. For good measure, I referred to best-in-class examples of websites most are familiar with — such as Paypal, Facebook, and Lowes — as their main colors were similar.
All with the intention of teaching the developers better patterns to follow and apply, with the knowledge that more “wins” were coming.