Design Systems for Blended Learning
On train rides home after a busy day at work, I found solace in the tattered copies of Dwell Magazine I rented from the Brooklyn library. The descriptions of how architects spent seasons considering every detail of a home — its neighborhood, zoning restrictions, budget constraints, occupant habits, landscape, angles of the sun — in order to arrive at a simple and elegant space was oddly soothing.
On this track, it wasn’t long before I found a headier fix in design systems — an internal product that helps teams maintain functional and brand consistency across mediums by providing set of reusable components that are guided by principles.
In the various design systems out there, I found an equally voyeuristic pleasure in seeing how teams at Airbnb, Apple, and Shopify thought about executing craft at scale. Not only did they dictate what blocks they build with, they explained the thinking behind it.
In EdTech and corporate learning and development, some notable public design systems include those from Pluralsight, Instructure, FutureLearn, University of Indiana, and Workday. While it’s great to see these teams share their approaches, if there’s one thing I wish for our industry in 2020, it’s that our design systems would share our learning best practices more visibly in the pattern library sections of our design systems.
While a seemingly small ask, this inclusion could have an outsize impact. A few strong design systems in digital learning can disseminate and support the application of learning research, raising the bar for our products and improving our user’ sentiment toward digital learning by reducing the frequency of poor design. This frees the people in our space to become innovative in deeper and different areas.
A pattern library is a set of interchangeable and reusable components with specific functions. It is a portion of what makes up a design system.
Pattern libraries are often divided into two parts: components — the Lego blocks— and the instructions on how to use them. In the design systems of companies that benefit from a wide and informed developer community, like Apple, Microsoft, and Shopify, pattern libraries are more instructive than those meant for internal use.
For example, take a look at how Apple educates on haptic feedback in its user interaction section of their pattern library.
Their description provides guidelines on how to judge when using haptics is effective and how to think about designing a custom haptic. This provides Apple a guardrail that directs developers towards what they believe are useful applications of a feature — and by extension a great customer experience —while still providing room for the developer creativity.
We see this as well in Material. Their component description of a progress indicators provides the general function of progress indicators, the different ways they can be represented, and when best to use each variation. This level of detail and explanative support is repeated throughout Material as it applies to a wide range of topics including typography, information architecture, and navigation.
In contrast, a majority of design systems have far less instructive pattern libraries. A brief description of the component and the code to execute it are the norm for many.
In Apple’s example, they use their design system, and the stature associated with their brand, as a vehicle to influence industry norms. In digital and blended learning, we have a vast body of research on learning and cognition to draw from, but no leader in design education.
Imagine what a sliver of a component description could look like for a well-researched feature in digital learning: spaced retrieval.
This example merely extends the typical pattern library convention by providing the learning strategy and user value behind components. This is particularly important for our space because with digital and blended learning experiences, what’s needed from a pattern library is quite different from other design and developer communities.
Not only is our desired user experience different from say a B2C experience, (for example, we talk about making experiences that are difficult, but not extraneous or making material that is focused and yet interleaving), the makeup of our teams are different as well.
For many teams, the creators of digital learning are often subject matter experts who are adding instructional design to their toolkit or HR and traditional design professionals who are learning instructional design on the job.
Having the why, how, and when and not just the what makes a pattern library more than a collection of UI elements, it makes it a just-in-time job aid. It accelerates your team’s learning and application so that your conversations about design can be elevated to topics such as principles and when to differentiate from or influence norms.
Of all the design systems in learning that have been shared, companies like Instructure, Adobe, Degreed, and Articulate are the best positioned to follow in the steps of the IBMs and Microsfots of the design system world. They too benefit from well-informed users of their platform. That said, if any design system in digital learning provided a more instructive design systems with novice learning experience designers in mind, we could focus our attention to what’s next — and not if we should use a drag-and-drop.
