The Learning Design System is a collection of standard components that can be assembled to build different learning products for Johnson & Johnson.
Challenge
The existing design system was not easily accessible and user friendly to external stakeholders. It also had a lot of missing guidelines per learning product.
The users spent longer time to navigate through the site by having multiple clicks before they find what they are looking for.
Layout, structure, and navigation on the homepage are quite overwhelming
Action Plan
J&J Learn’s UI/UX team conducted user interviews to content designers, visual designers, eLearning developers, and QA specialists, who will be the site users, to determine which specific features they liked and disliked on the site. The responses were consolidated and arranged based on priority with the site objectives.
We also conducted an in depth UX visual audit for the entire website for continuous improvement.
We prioritized the homepage for the first phase, created wireframe studies to introduce the Learning Design System through scrollytelling, a visual storytelling that heightens a story and hooks you into its narrative, lessening their need to watch multiple videos introducing what the website is about. I also made sure to prioritize the search feature for non-first time users.
The approved homepage focused on the following:
Shorter text introduction to avoid information overload for users
Prioritized search feature instead of using multiple clicks to find a learning product
Highlighted only three main key points what the product is about, as well as adding a guided video on how to use the website
I also added animated text section to highlight Learning Design System’s main features and added call to action buttons so users can check the different learning products.
Results
The updated Learning Design System homepage has been used by learning professionals within J&J, wherein the lead time to navigate to desired pages has been reduced from the previous version by ~30%.