Personalized Learning

To help visualize this new flow and better inform subsequent design, I created a flow diagram. The solid yellow connectors illustrate the legacy user flow. The dashed yellow connectors illustrate a user flow that addresses the biggest user pain point: show me the results of my assessment so I know why some training is required and some is optional!

This diagram served as a synthesis of a tremendous amount of legacy documentation and user pain, an artifact to inform design direction and prioritization, and an illustration to communicate vision with stakeholders, and a tool for building empathy within the Engineering organization with users.

Ideation began on ways to bridge the experience gap between taking an assessment and starting a personalized set of training. The legacy application used a purely color-coded scheme to rank individual pieces of course content by priority based on the user's performance on an up-front assessment. This presented accessibility challenges as users with color or visual impairments were neglected and suffered from an absence of prioritization information.

I sought to improve this accessibility issue in the wireframe by assigning a shape in addition to a color to the course content prioritization. High priority items were red diamonds, medium priority items were yellow triangles, and low priority items were green circles.

As seen in the user flow diagram, the lesson viewer or course-taking experience already existed in the Relias platform prior to this integration project. However, the experience of taking a course took place in a separate popup window.

The approach was taken to explore an embedded solution where the lesson navigation sits side-by-side with it's lesson content all within the page. Additionally, the Relias platform has a higher standard for responsiveness than does Gnosis, so a design solution needed to account for different devices and viewports.

The ideation of this design took on a higher fidelity from the beginning. Initially, this design was purely a list of lessons vertically stacked on the left and a content player on the right. This design was part of the same 7 hour-long user testing sessions that the assessment results page went through. Those sessions resulted in a key design decision: the list of lessons should be able to be sorted by priority or by context. Additionally, the list should default to a priority sort with the option to toggle to a context sort. For clarity, a context sort would arrange the lessons as though you entered the material with no prior knowledge on the subject. While this seems to contradict the value of personalized learning on the surface, the user testing sessions highlighted the value of a contextual sort. After users have completed their required training, the contextual sort serves as a review guide where users can see any given lesson within its larger context.

Finally, when it came to determining the responsive design solution content was king. Regardless of whether the user is accessing the training from their phone or from a larger desktop monitor, the content should be front and center and nothing should get in its way. Large laptop screens and desktop monitors are large enough to see everything in a single view. The lesson navigation can of course be collapsed to enlargen the content. Tablets and phones don't quite have the screen real-estate to show everything in a single view, so the lesson navigation is collapsed by default. The navigation can be toggled and displayed as an overlay. Once a lesson is selected, it will begin that lesson and hide the lesson navigation once again. Auto-advancing from one lesson to the next was added to make the experience more seamless and usable on these smaller viewports.