Visual polish on a lesson-browsing experience
The lesson-browsing UX allows users to navigate through a set of learning materials in the intended sequence. This was a tactical project to do some visual polish on an experience that had been launched for a single customer behind a feature flag, and allow it to work in general availability. This meant supporting a more flexible folder-like structure while preserving the feeling of moving through things linearly. It also meant dedicating more space to the content than what was part of the experience at the time.
I've included this as an example of the type of artifact that I might deliver to a development team to communicate the details of an interaction. This type of detailed spec is not always necessary. It depends on the team, the time, and how closely I'm able to work with developers during implementation.
The existing page contained a lot of navigation that could not be collapsed.
The new design dedicated more space to the page content
Care with the type hierarchy was required in the side navigation to make the various levels of module and submodule clear
The side navigation could be collapsed for a full screen view of the content. At the end of a lesson, the learner could see their progress.
The puzzle illustration "completes" when all the content is completed.