The Elevate Design System project
In order to position Accruent as the global market leader in SaaS physical resource management, the paramount initiative of 2018 - 2020 targeted the integration of our enterprise software on a large scale.
There are 26 products in the portfolio consisting entirely of acquisitions at various maturity levels. These span 9 different industries with disparate technology stacks and arbitrary UI's, serving a global customer base of over 8,000 prominent organizations.
The rationale for integrating strategic software products was to offer a suite of complementary products under a unified brand that controlled the end-to-end management of everything from CMMS to Capital Planning. Our main goal became to deliver a solution for users to quickly navigate between isolated products to complete a project lifecycle.
Obviously, there are multiple steps to pulling off successful product integrations at this scale. What I am going to focus on here is sharing how we approached the challenge of aligning these diverse and complicated products with a similar look, feel and overall experience. In order to accomplish this as efficiently as possible, we needed a solid and scaleable pattern library of components, visual guides, interaction patterns, etc. to use as the cornerstone of this broad re-design.
As the lead designer on our fledgling UX design system "Elevate," the following is how my team and I successfully built and released our company's first fully-functional design library.
(TLDR* see bottom of page for additional context)
Hypotheses about the "why"
Long debates about product and brand identity, design style, color, competitor trends and even personal preferences from designers who came and went clouded any real positive change to the interface at the expense of the user. Outdated mockups and old documentation was leading to confusion and frustration among designers and developers.
The following hypotheses were clear:
-
We need a UX Pattern Library and style guide based on Atomic Design for cross-departmental use by designers, products, engineering, and marketing
-
We need to define who we want to be and build a repository of guidelines, elements, and components outlined with clear documentation.
Research and plan
With an aggressive timeline coupled with the lack of available in-house engineering resources to build and properly maintain our desired design system, we audited a number of 3rd-party hosting options to utilize instead. Ultimately, we chose InVision Enterprise's DSM (Design Systems Manager) to be our singular source of truth.
However, first UX needed to convince leadership to get on board and invest in the effort to build a reliable design system before beginning any sort of integration re-design of silo-ed products. So, I created a project plan and got to work building out the team.
High-Level Steps:
-
Research potential solution hosts
-
Create MVP Project Plan
-
Pitch to CTO & SVP - get funding
-
Build and train teams on the application
-
MVP - Execute
-
MVP - Release
-
V.1 - Plan
-
V.1 - Execute
-
V.1 - Release
Goals:
-
Maintain consistency across an ever-increasing product portfolio
-
Fix unclear documentation, messy & out-of-date design files
-
Reclaim wasted time & quash duplicate work
-
Build new and innovative solutions that delight our customers
-
Communicate with and listen to our customers and diverse stakeholders
-
Composite designs suitable for use on multiple devices
Ideate and design
I presented my project plan to the CTO and was approved to create a small elite task force (made up of me plus two other designers) solely dedicated to bringing a design system to life. We had 4 months to deliver something of value.
So we got to work. My ambitious project plan included the outline of the necessary information architecture, atomic design elements, components, responsive rules, micro-interactions, icons, tone, localization rules, etc. that I had slated for an MVP, a V.1 and a V.2 to show incremental value as we built the library in these milestones states.
I organized the work to be done over the next months with an independent Kanban board and orchestrated regular standups, groomings, and design reviews for each cross-section of work and completed jira tickets that the three of us produced. The weeks flew by as we worked hard to deliver an outstanding design system in the very short time frame. However, this was made easier by how much we each really believed in the purpose and the long-term success this deliverable could bring to our team and company as a whole.
MVP release
After hours and hours of hard work and lack of sleep, the Elevate DSM library was launched in its MVP state as Accruent's documented product design policies and principles single source of truth, ready to be consumed by designers, developers, product managers, marketing, tech comm writers, and more. (all of the above departments are slated to give us feedback and input for the following V.1 and V.2 releases)
The 2020 Elevate DSM contains the visual and experiential assets and documentation, including colors, components, typography, animations, and interaction patterns that define how our customers and users view and use our products.
This design language, driven by voice of the customer, is the cornerstone of creating an aligned brand and consistently great user experience, and this design system is the user-centric system of elements, patterns, and layouts that drive product innovation and sales enablement.
The MVP release was hugely successful. Leadership was so thrilled with the result that we have been able to continue the investment and ongoing work effort to maintain and improve the design system.
V.1 and V.2 have been equally fantastic, with more iterations and releases expected to come.
Now, every designer on the team has the ability to propose new creations and updates to the library through a more formalized DSM improvement process. And most importantly, we collaborate daily with developers and product managers on its usefulness, usage and future, striving to save valuable time and effort for design consistency through Elevate.
TLDR from the top of the page
Each product is designed to automate a particular segment of tracking an organization's physical resources, whether that's managing property/asset maintenance, improving facility operational efficiency, ensuring compliance with changing policies, laws and regulations, etc.
Strategic integrations of some of these key products would allow us to weave together a product suite that streamlined our users' segmented workflows to manage and report on every aspect of their physical resources from a single platform.
Because our customers trust us with critical information about their organizations, a seamless transition between products was essential. (Imagine viewing a page with information about your facility's security and clicking "NEXT" to land on a page with entirely different interface...we simply could not risk the alarm and confusion.)
Accruent's software offerings: