Skilleos E-learning

Context

Skilleos is an online learning platform covering fields as varied as personal development, digital skills, business and creative hobbies. It offers interactive courses open to everyone, flexibly and remotely, with a broad catalogue of training. I joined Skilleos as Principal UI Designer and Design System owner. My mission was mainly to structure and streamline how design shipped, through a Design System. The project set out to harmonise the interfaces, web app and mobile app, on the back of a rebranding, and in doing so improve the experience on the platform. The Product team was made up of two Product Owners, a UX Designer and a CPO. Alongside them were around ten developers (back, front, mobile) and a CTO. It was a fairly mature environment in terms of product culture, working in Scrum.

Audit

To pin the need down properly, we looked at three angles:

Building a Design System

Because the window for shipping the rebranding was fairly short, we had to think and move as efficiently as possible, so that we could stand up a library while creating the interface screens with those new elements in parallel. That meant prioritising every step of building a Design System. It became clear that, to start using components as soon as possible, we needed a UI Kit first and documentation second. To get that UI Kit right, we ran several workshops with the Tech and Product teams to settle a number of key points, such as: naming conventions (for components and their properties), so that design and engineering stayed aligned; tone of voice, which carries real weight in how our messages land; the priority guide listing which components came first; and the accessibility rules, which did not exist at that point.

Building the UI Kit

The UI Kit was designed around atomic design, to guarantee a modular, reusable structure that would keep things visually consistent, maintainable and able to grow, while making designers and developers work better together. Respecting and applying accessibility rules for those components was obvious and non-negotiable for us, given who the platforms are for and given the audit ahead. Before building each of the components we had listed and prioritised, we had to create and document the design tokens (colours, typography, logos, icons, breakpoints, shadows and so on). For icons we chose Font Awesome, which saved us precious time.

Turquoise

Turquoise is the primary colour, to be used to carry the Skilleos brand through its logotype, block shapes, buttons, or as a flat fill. It stands for renewal and growth, in a bright, refreshing register.

Avoid: on the web, do not use this colour for text set against white or light colours. It must not be used for text that has to be perfectly legible, as on the website. It can be kept on other media for short words, in capitals and at large sizes, where legibility holds up.

Grey

Grey is a bright supporting colour, to be used as a background or within block shapes, bringing rhythm and hierarchy to information alongside the default white background.

Avoid: this colour must not be used for text.

Navy

Navy is a supporting colour, to be used by default for all text, guaranteeing perfect legibility on white, on turquoise, on grey, and on the secondary colours. More exceptionally it can serve as a background, to make visuals more immersive or to improve the legibility of secondary colours where that is judged necessary.

Master Design System (Figma)↗ (opens in a new tab)

With the design tokens in place, we started building the atoms, molecules and organisms we needed to produce the rebranding mockups. For every component we had to think through each of its states (hover, clicked and so on) along with its responsive and adaptive versions. Every component needing animation was prototyped, which saved time later since those prototypes no longer had to be rebuilt each time. On every page we added a panel of keywords matching the components, so we could find them more easily within the file. Once all that was done, we worked with the UX Designer on writing the specifications for each component, setting out the good practice and the things to avoid, on Zeroheight for instance.

UI Kit WebApp (Figma)↗ (opens in a new tab)

Design Ops

Separately, the way the Figma files worked had not been optimal, and managing the archives was becoming very complex. So we ran a workshop to define the best way to split the files up and serve the needs of the tech, business and design teams. In parallel, it seemed worth creating a “sources” file, letting us keep the latest mockups of every screen current in one single place. That way, as soon as a new user story came in to be designed, we could build on those mockups without running into versioning conflicts.

Conclusion

In the end, building this Design System while respecting the accessibility criteria produced a 100 % compliance result in the Ara audit. Beyond that, reworking how the Figma files functioned improved communication between the stakeholders: reworking the covers first played a key part in making the information on each user story understandable, and in bringing that information together. The rebranding was fully deployed across the whole web app in just five months.