A refreshed design system
Project
Canvas Guide, the online guide for Verizon’s design system
Year
June 2019 - Nov 2019
My role
UX/UI Designer - Responsible for user research and engagement, functional requirements, usability testing, information architecture, branding and visual design, prototypes
Tools
Sketch, Invision, Adobe CC, Principle
Background
For Verizon’s Canvas project, which is an enterprise application for telecom provisioners, one major undertaking for our UX team was adapting Verizon’s existing design system to make it work for Canvas.
We audited and revamped existing components, added in new ones, all while maintaining the visual style and branding of Verizon.
We created component libraries in Sketch and Adobe XD for our UX designers, while our developers created their own component library to mirror UX’s. This resulted in better visual design consistency and faster iterations.
An example page with various components we created (cards, notification messaging, status components, table rows)
Problem
Conducting an audit of pages revealed inconsistencies in how components were used. Documentation and communication of how components and patterns should be used was missing.
Photo courtesy of Fuselab Creative
Solution
We needed clear documentation of patterns, guidelines and use cases that could serve as a source of truth for designers and developers amongst all feature teams.
Because of this, my team and I designed an online reference guidebook, “Canvas Guide,” that would be used by all designers, developers, testers, business analysts, and stakeholders on our project, and that would be regularly updated. This documentation ensures consistent patterns, guidelines and also provides updates and other useful materials to our team members.
Canvas Guide
A centralized place to manage our brand and UX elements, coded components and newest updates so we can work in cohesive, agile, and efficient ways.
Research
While a designated folder for our design system existed, it was a hodgepodge of unorganized documents. We evaluated the current folder and also conducted user research to discover what our users needed.
Interviews and surveys with developers, designers, business analysts and stakeholders revealed one overarching need: better communication and collaboration.
Since Canvas is a huge project encompassing dozens of software teams working on different applications and features, it’s not easy to get everyone on the same page. As a result, there were design inconsistencies, varying access to materials and general miscommunication.
It became evident that there were massive pain points in design system accessibility:
Users don't know what's changed and when
Poor onboarding process
Irrelevant, inaccessible, unorganized and outdated materials
Users feeling confused and unsure that they are receiving all important information, news or updated
Opportunity
Personalized guides for specific roles
Reorganize content and resources into logical and meaningful categories
Fresh and engaging content that would be directly provided on the page
Updates/news section that would inform users of newest changes and improvements
Personalized guides
Before - Disjointed user journey
Content is not grouped in a meaningful or logical way
Unclear which pages are relevant to specific users:
“Where do I start?”
“Which information is relevant to me as a designer/developer?”
Which information is relevant to me as a new/current user?”
“Am I missing something?”
After - A clear and personalized user journey
Guide the user based on role (designer, developer, new user, current user)
A homepage with clear sections (Guides, What’s New?, What is Canvas?)
Meaningful content and categorization
Before - Inaccessible content, poor information architecture
General information, new updates, forums, resources, teaching materials for UX/UI is found on different, unrelated pages
Most pages required users to click on links to outside pages/documents in order to view content
After - Rearrange and create new content
Reduce clicks to outside pages/documents
Provide the content directly on the page
Rework the information hierarchy and group related content into categories:
General guide
Designer guide
Developer guide
News/updates
Forums
Timely updates and news
Before - No standardized way to send out latest updates and news
Canvas is a dynamic design system - meaning that updates and improvements occur often
Updates need to be clear to the user
User isn’t assured that the information they are viewing is the most recent
After - “What’s new?” page
Provides user with date/time stamps of newest changes, updates and improvements
Accessible to everyone
Outcome
The style guide was met with much enthusiasm by users of the design system and stakeholders. Predictability and consistency in usage and information of components and patterns enables our designers and developers to focus on tackling more complex problems, and to provide more visibility to stakeholders.
Next Steps
Continue tracking effectiveness of design system and style guide
Establishing a design system in general is never easy and has unique growing pains. It is a process that requires endless patience, buy-in from multiple parties, and most of all, time, to establish widespread adoption.
Because of this, data must be tracked over time to determine the effectiveness and ROI of a new design system. Continuously gathering feedback from users of the design system, determining if we’ve decreased technical debt and sped up/streamlined the product creation and onboarding process is vital.
Commit to a design system that is evolving, not static
This requires dedicated designers, developers and teams that are committed to regular design system maintenance. Without regular updates and improvements, the style guide will eventually become outdated documentation. The components and code become unwieldy and inconsistently implemented. A design system is never a concrete thing. It should be an evolving, “living document” - meaning that updates and improvements occur often based on feedback.
One of the exciting things about technology is that it is ever changing, and we need to lean into that and keep growing.