MAX Design System
Design Systems:
Building a 1.0 Version
Live file available at page end
Inception & Creation
As an industry-leading legal product began experiencing rapid growth in the late 2000’s, feature requests quickly began rolling in–often, more rapidly than our team could meaningfully develop them. Design systems were simultaneously gaining popularity as a conduit for assisting and facilitating organizations designing rapidly at scale. However, our organization had a few concepts that were making the approach to developing our system both unique and tricky–like a no-meeting policy, primarily
Additionally, our organization had heavy engineering representation (15+), and just two designers. For successful system adoption, engineering would need to represent a primary customer, and designers would theoretically act as a secondary customer. Nearly-constant communication during the conception phase of core system elements and principles were crucial— often providing invaluable insight via Slack here or there as our devs’ time allowed. Insights were collected and centrally located–a dev-specific persona was then developed to reflect important foundational ideologies or thought processes that would help gain understanding around how to craft a (successful) living, breathing design system.
On the dev side, there was already some absolutely basic assets–primarily, just buttons–being created with re-use in mind, with code snippets being displayed via a Storybook presence. These pre-existing assets were audited, and foundational scales and basic system principles began to be developed.
Strategy & Action
Post-audit, there was clear illustration of ample work to be done around scale development (such as general spacing, type size, type line weights, etc.), which would, in turn, provide a strong base for following granular elements, organisms, patterns, and templates.
Considering internal plans to scale the design team considerably that year, there was intentional thought applied around how to best craft an accessible, easily-usable system for our new designers. The organization dedicated an initial 90 working days to onboarding, so there was direct emphasis around quick uptake on meaningful work material in the immediate time following that onboarding period. A system that required no onboarding, or one that would offer meaningful, easily consumable education via documentation would only help solidify its success in the eyes of leadership.
And there, in the open, lied a key to success– create nearly-frictionless, easily consumable, bite-sized documentation— and there is a running chance your consumers will utilize it. Paragraphs and lengthy sentences were heavy, time consuming, and tough for our consumers to justify spending minutes or hours on when roadmap features were in progress. There was heavy emphasis placed on bullets, GIFS, and in-file abridged documentation snippets that would inform consumers in-situ, and with emphasis placed on succinct communication and overall time savings.
When authoring a 0-1 system, there are many considerations to work through as the mission and vision of the system take shape. Often, these are higher-level organizational goals that end up as ideological pillars of a system, such as increased velocity, shipment quality, and more. In this case, speed and overall increased velocity were paramount, and became the system’s primary goal and reason for existing. Visual consistency (and subconsciously-communicated quality) claimed a close secondary seat, and agility, somewhat naturally, fell into place as the final piece to our system’s core driving philosophy.
This translated to system elements uniquely–considering the specific focus on velocity and agility, there was priority given to complex organisms, full-page templates, and interaction patterns–versus highly granular, atomized elements. This empowered the limited number of designers to iterate through feature requests at considerably higher speed, as consistently functioning, defined patterns rarely needed detailed review or additional specs created for those implementing UX deliverables.
Results & Impact
After four full quarters using the Max design system, the organization was absolutely stunned at the positive impact–
observing an astounding 22% faster feature shipping speed, on average.
This empowered the organization to both iterate quickly on pre-existing features as well as ship new features with incredible agility.
In addition, there were significantly lessened UX errors encountered during implementation QA.
The design team was able to boast strong visual consistency and began iterating towards a second major version–focused on movement, integrating a new brand identity, and more!