Kineo Design System

created with After Effects

Part of the City & Guilds Group, Kineo aims to improve business performance by creating a better workplace learning experience.

As Art Director at Kineo, I’ve had the opportunity to propose, lead and implement a product driven approach for Kineo's Bespoke eLearning solutions on the Adapt Authoring Tool, Storyline and Totara L.M.S. implementations. I've also led the realigning tool effort in APAC and South Africa with U.K. crossover and have designed many successful sales proposals.

The Kineo Design System is a self-driven project to address the opportunities in the areas of internal alignment and new employee onboarding. After observing inconsistencies in the understanding of systems in-between the various roles at Kineo and after I've collected feedback from all team members, I've started compiling, updating and converting the older photoshop files. The result was a master Adobe XD file created with input from Learning Designers and the Senior Engineer based in the UK. Results highlighted below.

What made this project interesting?

  • Self-driven project to address the opportunities in the areas of internal alignment and new employee onboarding.
  • Used contextual enquiry and qualitative research to gather input from all stakeholders and draft a list of requirements, user flows and build a holistic content strategy. ( Build for everyone, with everyone - Errol King ).
  • Systems thinking: we designed scalable experiences for both customers and learners by leveraging Jacob's Law. This resulted in a 50% faster creative process of bespoke Art Direction, and 0% rework as measured over the past 7 projects that employed the new design system,  compared to a previous 25%-35% rework.
  • Led upskilling coaching sessions for Designers and Front-End engineers in New Zealand, Australia and South Africa and supported transition from Photoshop based handover to Adobe XD and Figma.
  • Introduced a One-Stop-Shop channel where an active prototype would provide examples of all components as well as accessibility information and technical limitations, supporting a common understanding.
  • Used successfully on 3 platforms : Adapt, Storyline, Rise.
  • Simultaneously delivering Art Direction solutions for various other projects, providing sales support (75% success rate), and LMS implementations such as MYOB academy.

What was shipped?

The Design System is fully responsive and WCAG 2.1 compliant
Most used Adapt components previewed here, 22 in total
Here are some examples of live projects using the new Design System.
More work