Submit a request
Submit a request

Learnosity Design System: Customer Advisory

This page explains upcoming changes to how Learnosity creates and deploys visual designs and web component styling, and notification of potential action required by some customers.

Banner image of Learnosity Design System

Introduction

At Learnosity, we’re working hard behind the scenes to make operational improvements to the way we design and build our software. As our APIs have developed over the years, we haven't always had the same structure behind our interface elements. This has sometimes made it challenging to customise the Learnosity interface. 

One of our core goals is to produce a more robust and sustainable interface, providing a much stronger level of consistency across our APIs and views.

With this in mind, it will also make for a better experience when customers integrate our APIs, from customising the interface or removing components to hooking into the host page structure for more flexibility. With the approach we are working on, accessibility will be at the forefront, making these new components first class citizens in terms of accessible usability.

In order to do this, we will integrate a design system into the way we build and ship our products. Implementing the design system to its greatest effect may require certain changes to the way you apply customizations to Learnosity. This article will help to outline some of the important factors to be aware of.

 

Changes to the product in 2022.1.LTS
(February 2022)

In the past months, much of the focus has been on deciding upon the foundational pieces which will underpin our design system. We’re excited to say this has been completed.

Another key plan in our rollout is introducing smaller changes upfront to allow for comprehensive testing and to support resources that will guide you through these improvements with a minimum of effort. Working in phases and starting small, we have focussed on replacing a small number of button elements in our Author API user interface, which will be powered using our design system. For further technical details and code examples on the changes we have implemented, we have prepared a migration guide.

We are deliberately keeping the scope small at this stage, to minimize disruption for customers. We aim to retain as much of the existing DOM structure as possible, which allows us to more easily retrofit our product, gaining benefits of the new design system while requiring minimal changes from client development teams.

Below shows the comparison of the changes before and after the updates have been applied.

To the left of the drag bar is the new UI with the updated components, on the right is the previous (non design system buttons).

 

Before and after comparison

 

What does this mean for customers of Learnosity?

For the next phase of our design system, we will offer substantial changes that will benefit advanced customizations. The changes planned for the coming year will primarily be of interest to Learnosity clients who are taking advantage of our white label capabilities– customizing our user interface, styling our APIs to match an application design, and otherwise looking for a more seamless integration in the front end.

In the near future, interested customers can find a detailed breakdown of the components we have available at any point in time through our Design System website.

Our first release will only affect users of the newest version of our Author API, v2022.1.LTS, due for release in February 2022. Updates to additional APIs will be rolled out in future releases.

Future plans

In the upcoming LTS releases, we are intending to integrate the design system across more Learnosity APIs.

Beyond this, we aim to replace all legacy components in APIs with a user interface, making use of the design system. This should reduce friction in development when customizing Learnosity APIs.

As we gain experience with integrating our new design system into our products, we will expand its reach in future releases. We’ll still be focusing carefully on a controlled rollout, with full support from documentation, migration guides, and additional resources. We will begin to add additional UI components to the Author API, and start introducing the design system to the assessment stack via the Items API.

Helpful links

An early BETA tool for viewing CSS selectors in Learnosity Question Types.

 

We'd love to hear from you

If you would like to share your thoughts, or help us with testing the robustness of the Design System rollout, please get in touch via the form here.

 

 

 

 

Was this article helpful?
0 out of 0 found this helpful

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.