PROJECT NAME
Interactive Learning Notebook
ROLE
UI/UX designer
TEAM
Product Team & CTO
TIMELINE
2 months
TOOLS 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.
Design Process
The project began with research into existing digital learning experiences and content authoring workflows. After identifying key user needs and technical constraints, I explored multiple interface directions and interaction patterns.
Working closely with stakeholders and the development team, I iterated on concepts through wireframes and high-fidelity designs before validating the final direction through reviews and feedback sessions.
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.
Core Notebook Experience
Designed key notebook layouts and learning interactions to support content consumption, note-taking, and knowledge retention.
Design setting and system
Fonts ans Typography Colour Spacing Container Margin/Max width Key components/Exmaple
