design system + product beta at Lithium technologies

systems thinking

As the Head of Design Services at Lithium, my job was to lower complexity and improve customer satisfaction with our SaaS community platform. To do that, I instituted a design system.

My job was to:

Build the team
Define an approach
Identify a viable framework
Test & learn in beta
Develop a roadmap for continuous innovation

BUILD THE TEAM

First I assembled a cross-functional team of solution players (team members who would design and implement the solution) and partners (those who had a vested interest in its success).

Team members who would design and implement the solution included a senior UX designer, a UI developer, a full-stack engineer, and a specialist who brought a wealth of Sketch library and previous pattern library experience to the table.

Partners who had a vested interest in the success of the design system included the CEO, CMO, the VP of Services, and the Head of Product. My job was to leverage them as a steering committee, updating them on progress and making sure they contributed to strategic outcomes.

DEFINE AN APPROACH

I employed an NN/g-based user-centered design process designed to maximize research and discovery and gain user feedback during the design lifecycle to better inform delivery.

IDEATE: THE FRAMEWORK

We used an atomic design mental model to inform the solution. We used Sketch component libraries and Abstract to codify the patterns.

Approach

We deconstructed our platform at the molecular level using both heuristic and historical evidence to retain what was working and de-prioritize the rest. We decided upon Sketch as our design tool of choice to create symbolic representations of our working components.

Then, we operationalized the design system using Abstract so we could manage and scale the system from concept to code.

In this example, we abstracted a call-to-action – the “kudo” – redesigned it for maximum scale, and applied it to a real-life project.

TEST & LEARN IN BETA

After developing the new “base” system as an easy-to-deploy software plugin, we beta tested its viability.

Examples of the beta plugin applied to live communities. While we recognized we could have designed without the plugin, the gains in quality, efficiency, and risk reduction proved the plugin’s viability.

20+ Customers actively using the beta plugin in under one year
Higher than average growth four of the five communities that deployed the plugin in early 2018 were in the top 20% of month-over-month growth in critical areas: unique visits, registrations, replies, topics, posts, and accepted solutions
Reduced development time: one project was developed in less than two working days. Average development time is just over one week, compared to 4+ weeks without using the plugin.
Front-end defect reduction: high-severity bugs were reduced because the plugin was pre-tested

CONTINUOUS INNOVATION

Operate – don’t “launch” – a design system

Operate a people-process-technology model to continuously innovate with different styles. Systemetize how to apply consistency and scale whenever new design elements are created.

Federate

Extend the theme product to external partners, vendors, and customers to lower barriers to entry and increase adoption.

Monetize

Show value from a business perspective, “bake” it into the core product.

The plugin was scalable enough in beta to be applied to Lithium’s native iOS and Android platforms.