PROJECT
Interactive Learning Notebook
COMPANY
Get more brain
ROLE
UIUX Designer
TEAM
Product
TOOL USED
Figma
Overview
About this project
This project focused on designing an interactive learning notebook for an EdTech SaaS platform. The product enables authors and editors to transform educational content into structured digital learning materials using a component-based system called Bits. Once published, students can engage with the content by adding notes, interacting with learning components, and personalising their study experience. Inspired by modern knowledge management tools, the goal was to create a flexible and engaging learning experience. My role covered the overall notebook experience, key learning interactions, and ensuring the interface could adapt to different educational brands and content formats.
View prototype
Related project
It's not just the interface and design system improvement, but I also delivered one of the most complicated sections, "multiple-response assessments". Find the project here: Designing Complex Assessment Interactions
Design Process
I began by understanding how the existing Bit system worked and identifying the core functions required for both content creators and learners.
From there, I reviewed the existing notebook interface, mapped key content and navigation patterns, and identified areas where the Bit library needed to be expanded. I explored and refined the workspace, navigation and learning interactions through wireframes and high-fidelity designs, working closely with the product and development teams to ensure the experience could work within the existing technical framework.
Alongside the interface design, I created a consistent visual system for the notebook so that different Bit types could feel like part of one cohesive learning experience.
01 — Understand the Bit system
02 — Define creator vs learner needs
03 — Improve workspace + navigation
04 — Expand missing/complex Bits
05 — Create the visual system
06 — Make it flexible for different brands
Research
Design exploration / IA
Low fidelity wireframes
Design system / High fidelity
Test/Review/Launch
Challenge
Traditional digital learning materials often mirror static textbooks, resulting in passive reading experiences. The challenge was to design a flexible notebook that encourages active learning while supporting varied content structures and client branding requirements.
Outcome
Delivered a flexible notebook experience capable of supporting diverse learning content, interactive study components, and custom client branding systems.
Designing the Workspace
The notebook needed to support two distinct experiences: one for teachers, authors and editors creating learning content, and another for students consuming and interacting with it.
For editors, I refined the existing workspace to make content management clearer and more intuitive. Content could be edited directly within each section, while new sections could be added using the Bit system.
For students, editing controls were removed while interactive elements — such as quizzes and input fields — remained accessible. This created a focused learning experience while preventing accidental changes to the underlying content.
As part of this process, I also identified gaps in the existing Bit library and designed additional components and interactions where needed, including more complex assessment experiences.
Navigation & Content Structure
Learning materials could contain multiple levels of chapters and sections, so clear navigation was essential.
I designed the sidebar to reflect the hierarchy of the learning content, connecting chapter levels directly to the notebook. Selecting an item in the table of contents takes the learner directly to the corresponding section, making longer and more complex learning materials easier to navigate.
Building the Core Notebook Experience
Bits provide the underlying structure for learning content, but they do not define how that content should look or behave within the notebook.
I created the visual system for the core notebook experience, defining consistent layouts, typography, spacing, component styles and interaction patterns across different Bit types.
The system covered key learning experiences including content consumption, note-taking and interactive exercises, creating a consistent foundation that could be used as the default experience across notebooks.
Flexible Branding System
Explored alternative visual themes to demonstrate how the notebook experience could adapt to different client brands while maintaining usability and consistency.
