My Role
- Design Systems Lead/Strategist
Year
- 2019
Tools
- Articulate Storyline 360
- Adobe XD
- Adobe CC
The Challenge: Scaling Quality
In 2019, Product Development was tasked with applying a branding update to our flagship Everything DiSC course. At the same time, our team almost doubled in size when we added six new product developer/designers to help with skill-builder courses. When we were a small but mighty team, we could get away with having guidelines that lived only in our heads. (No, we couldn’t.) But once we added so many new people, everyone agreed that we needed an eLearning style guide to go along with the life-jacket and arm floaties each new hire received during onboarding.
While I was conducting a comparative analysis of eLearning guides (to ensure we created the best. style. guide. ever), I stumbled upon enterprise design systems and promptly fell down the internet, because I immediately recognized its cross-domain potential.
Synthesis of 30+ enterprise design systems—pulling out shared principles and key features—then mapping them into a reusable set of components and templates that would be stored in the Storyline team library.
The Solution: Adapting Enterprise Design Systems
I initiated independent research (see: falling down the internet), synthesizing the principles and features of over 30 systems to craft a bespoke, cross-domain framework.
System Components & Process
- The System: I developed foundational elements (layouts, badges, modals) and the core UI components and wrapper. The most critical delivery was a suite of Articulate Storyline templates and learning objects (quizzes, interactive activities, workbooks, forms), which served as the live, interactive components of the system.
Articulate for Collaboration
We used the Articulate team library for shared assets, adopting an approach that allowed flexibility for this emerging system as long as core guidelines were met.
Interactive Demo
Design System Details
Interactive Components
Templated version of an interaction.
Pseudo-template of an interaction.
Art Direction & Character Development
I researched the strategic use of illustrations vs. photographs in training, particularly for soft skills. I surveyed how illustrated characters were being used by other companies, and how we had used illustrated characters in the past. Then I reviewed the kinds of characters available on sites like Shutterstock and Getty. A colleague and I shared all this with the Brand Director and we created an informed art direction for using illustrated characters in our eLearning. I documented the philosophy for the Brand Book. These characters are still being used to this day and can be seen most prominently on the Catalyst platform.
The Impact: Digital Transformation and Scalable Production
The Design System introduced crucial digital product thinking to an organization struggling with digital transformation.
Area
Result & Value
Productivity
Articulate templates and components significantly reduced time to productivity for new developers, accelerating course creation.
Consistency
The system enabled scalable production while establishing a standardized, high-quality user experience across our eLearning offerings.
Onboarding
The Design System itself served as the primary onboarding material for new team members, helping them integrate quickly and see their contributions.