Intuitive Navigation on an EdTech Platform

Goal and Challenge

Navigating a multi-layered EdTech platform poses unique challenges due to diverse user personas with distinct goals and workflows. A robust, intuitive navigation system was critical to accommodate these needs.

For Miljöböckerna (miljobockerna.se), we tackled a specific use case: enabling middle-school students to navigate between chapters seamlessly while reading interactive digital “books.” These books were crafted using a custom block editor that allowed real-time content creation and were presented in a single-column responsive layout. This design was inspired by the structure of physical books, providing familiarity and focus.

Key challenges included:

• Ensuring chapter navigation was accessible yet unobtrusive, maintaining focus on the content.
• Avoiding overwhelming the target audience (middle-school children) with distracting elements or excessive calls-to-action.
• Creating a navigation system that complemented the end-of-page "next/previous" functionality, acting like a wizard while maintaining a clean interface.
• Aligning the design with the on-brand visual identity of the book or theme.

Solution

We designed a slide-out navigation panel with Just-in-Time (JIT) visibility to enhance usability and engagement:

Dynamic Content & Visual Cues:

• The navigation clearly indicated the user’s current position within the book, progress through chapters, and placement of bookmarks.
• States dynamically updated to show "Read" or "Completed" when users scrolled through the majority of a chapter, reinforcing their progress visually.

Non-Intrusive Design:

• The panel remained hidden until activated, minimizing distractions and keeping students focused on the reading task.
• It complemented the end-of-page navigation, allowing users to switch chapters with ease without interfering with their reading flow.

Brand Alignment:

• The navigation’s styling was tailored to the theme or book being read, ensuring consistency with the content’s branding and creating a cohesive reading experience.

Outcome

This navigation solution provided a user-friendly way for students to explore digital books while preserving their attention on the task. The design balanced functionality with aesthetics, creating an intuitive, engaging experience that resonated with the platform’s young audience.

The result was a navigation system that supported the platform’s educational goals while offering flexibility for future iterations and adaptations.

Further improvements can be explored by making the current page visible (currently not available in the backend) and thus progress through a chapter as a % (useful for longer chapters.