Building a Design System
Role: UX UI Designer / UX Researcher / Product Designer
Design System Goals
Our design system is a visual language, created to provide intuitive interaction, encourage clean design, and strengthen brand identity. Our system unifies the user experience across all platforms and drives efficiency through well-defined and reusable components that can be implemented in a scalable way.
Interal Benefits
-
Utilize our collective efforts across all teams and all departments with a visual language that can be shared by everyone.
-
Serves as an educational tool that allows junior designers and engineers to make design decisions by reusing components with defined constraints.
-
Reduces tech and design debt by providing a solid foundation and path to move forward.
-
Allows solutions to be implemented in a scalable way.
-
Creates visual consistency across all products, channels and departments.
Problems to Solve
-
Lack of constraints around solutions cause disjointed UX.
-
Over time one-off or individual contributions have caused the experience to diverge.
-
Lack of synchronicity between platforms (platforms were created at different times for different reasons).
-
Software requires constant maintenance and upgrading.
Building a Design System
Design systems require an immense amount of effort to create and implement. To be successful, the necessity must be clearly outlined to drive change. It’s important that all teams and departments are actively involved in the creation and continued evolution of the system.
I started by creating a catalog of the various components, elements, and styles to demonstrate the inconsistencies in our current UI patterns.
​
-
Button designs do not always match within a single platform.
-
Controls do not have a standard functionality.
-
Some elements follow a completely different design pattern.
-
Graphics are not easily associated with the brand.
-
Look and feel across products is not cohesive.
In conjunction, I ran a Heuristics Evaluation to assess pain points and opportunities for improvement. I asked 10 evaluators to perform heuristics evaluations and judge product interface compliance with Jakob Nielsen’s principles for interaction design. The group of evaluators consisted of 6 non-employee volunteers and 4 employees from various teams. Evaluators were split into 3 groups, to evaluate our various products. Groups of 3-5 have proven most effective, providing a diverse pool of usability issues and reducing redundant recording of common issues.
The heuristics report brought to light what elements and components worked and what didn’t. Using this knowledge, I was able to discern which elements should be incorporated and built upon in our design system.
Organizational Buy-In
The UI inventory and the results of the heuristics analysis clearly outlined inconsistencies and pain points that adversely affect the user experience. All stakeholders agreed that a design system would be the best path forward.
Building a Multidisciplinary Team
To implement and manage a design system takes a village. We assembled a team of front-end developers, product owners, designers and UX connoisseurs to ensure the design system would be all-encompassing.
Principles to Guide Design
Our design principles are shared values across the entire design system. They connect our purpose, identity, and our product.
Harmonious
​
Every interaction, component, and element is part of the big picture. It is important that each piece contributes positively to the system at scale. There should be no isolated features or outliers.
Reliable
​
Reliable: Our reputation hinges on being reliable. We protect our user’s most sacred asset and we should ensure that our users understand that we take that seriously.
Limitless
​
We’re here to reinvent the way the world thinks about security. Our work should speak confidently because we are making the impossible possible.​
​
Inclusive
​
As a product that is used professionally, across the world, we are focused on designing for accessibility. Our product should provide the same benefit for every person.
Visual Language
Logo
The TruU logo is an immediate representation of our brand and our relationship with the user. These guidelines describe how to use it consistently so that it amplifies a distinct brand identity.
​
Full Logo - Horizontal
​
-
Use the full logo whenever possible
-
Always use the 2-color logo
-
Do not use the gray-scale or black & white logo. These are reserved for niche scenarios; usually, tangible assets created by marketing.
Logo Mark
​
-
Use sparingly, in cases where a company avatar or icon is required. In all other cases, use the full logo.
-
Reduce the size of the mark by 15% when placing the logo mark within a circle.
Color System
The colors in our palette strengthen brand identity. They enhance the user experience by conveying tone and emotion during each interaction.
Color Accessibility
​
We strive to design for accessibility by making color decisions that are inclusive for all levels of vision. Our standard is the AA contrast ratio.
​
-
Normal-sized text: 4.5:1
-
Large text (font size 18pt+, or bold & 14pt+): 3:1
-
User input and Graphics: 3:1
​
Color Accessibility Exceptions
​
In some cases, color helps us communicate more clearly. We make accessibility exceptions to ensure that specific messaging or elements are more noticeable.
Typography
As a new product, we find it best to adjust to our surroundings so we change our font based on the operating systems. We maintain the same font size and line height ratios to ensure readability and visual continuity across products and operating systems.
​
Typography Accessibility
​
When TruU speaks to users we strive to create a human experience; one that calmly informs and helps guide a user. It’s important to design for readability and localization across all products, platforms, and devices.
Component Library
Control System Decision Tree
The control system decision tree promotes independent design thinking, by providing quick and easy guidelines for system control implementation. While there are some exceptions to the rules, these enable our engineers to make design choices quickly and confidently.
Buttons
Since TruU supports multiple languages, it’s important to design for localization.
​
-
Sentence case accommodates different languages and creates a more calm atmosphere than Uppercase.
-
Optimize readability at a larger type size
-
Contrast ratio for text or icons meet the AA standard
​
To meet the expectations of end-users, TruU adapts to the native environment. Button design is adjusted to conform to the design for each operating system, while maintaining a cohesive foundation that spans all products and platforms.
Controls
TruU integrates with your lifestyle to keep your identity safe, no matter where you are or what device you are using. It’s important that our system controls feel as intuitive as the operating system on the device so that users can focus on their primary task, while we do our job in the background.
Navigation
Graphic Elements
Graphic elements breathe life into our product. Motifs, callouts, and feedback elements are subtle ways to keep our users connected to the message at hand.
Brand Graphics
We use graphics to center our brand around futuristic technology. Our graphics are a fun way to demonstrate that we provide a benefit that is “out of this world” or cutting-edge.
Working within the enterprise security sphere leaves us with little time to convey our voice. graphics help us connect with users on an emotional level; showing that we care and we are striving to raise the bar for security.
​
Brand Voice
​
We express our brand voice through graphics. Although our product serves a very serious purpose, it’s important for ourselves and others to rejoice in the personality of TruU. Graphics convey the curiosity, drive, and excitement that energize our objective.
​
Within Product
​
Graphics are used sparingly within the product to clarify actions or emphasize messaging. These graphics provide guidance when users are required to perform uncommon actions.
Graphic Style
TruU illustration style consists of abstract background shapes combined with bold, metaphorical characters that describe process or action. We gravitate toward flat characters with distinct shadows and silhouettes to fill in detail and provide dimensionality.
Motifs add depth to flat backgrounds or background shapes. Motifs are applied at an opacity of 12-25%.
Background shapes set the scene for our characters. These are abstract shapes, reminiscent of outer space.
Character Themes
We use a few different character themes to communicate. Themes have the tone that matches our brand identity, but allow us to use the appropriate voice based on the situation or content. To tell a cohesive story, these themes often share elements or crossover; this allows us to have fun while showing our personality and it also gives our user’s a bit of an “easter egg.”
The lock theme is most often used for onboarding. These graphics are generalized but literal depictions that explain product function. After successful onboarding character themes progresses to the space theme.
The space theme is seen in daily product use. These graphics spotlight the futuristic technology that powers TruU. We use these graphics for setup wizards, feature tours, and specific messaging to end-users.
The interaction theme prompts or instructs user actions, specifically in cases where a user must perform actions on a separate application or device. These are smaller scale graphics that can be combined with other graphic elements.
Graphic Elements
Graphic elements breathe life into our product. Motifs, callouts, and feedback elements are subtle ways to keep our users connected to the message at hand.
Conclusion
The TruU team moves swiftly across a vast landscape. It’s critical that our components, patterns, styles, and guidelines are scalable and replicable so that every member of our team can contribute to design thinking in their individual roles. Together, with the help of our design system, we are able to think more creatively and conquer complex UX problems.