Skoolmaths Lesson Builder

Led the end-to-end design and development of the Skoolmaths Lesson Builder, a standalone web application created for Skoolmaths that enables teachers to design, deliver, and export fully interactive lessons without requiring specialist technical knowledge. The platform transforms lesson creation into a visual, drag-and-drop experience, allowing educators to build engaging classroom content, preview it live, and export complete lessons that run offline as self-contained HTML files.

As both the product designer and developer, I was responsible for the complete user experience—from the public-facing landing page through to the lesson authoring environment, interaction design, design system, and implementation.

The landing page was designed with a single objective: demonstrate the product’s value within seconds while encouraging teachers to immediately experience the builder.

Rather than overwhelming visitors with technical specifications, I structured the homepage around a progressive narrative that answers three questions:

• What is this product?
• How does it improve lesson creation?
• Why should I try it?

To achieve this, I focused on:

• A prominent hero section with clear calls-to-action
• Product-focused imagery showcasing the builder before feature lists
• Strong visual hierarchy that naturally guides users through the page
• Clean typography and generous spacing to reduce cognitive load
• Modular content sections that progressively introduce capabilities rather than presenting them all at once
• Consistent branding between the marketing site and the application itself to create a seamless transition from discovery to product usage

The result is a landing experience that communicates value quickly while maintaining a clean, modern visual language appropriate for both teachers and educational organisations.

The lesson builder was designed as a professional creative workspace rather than a traditional form-based editor.

Teachers frequently work with large amounts of content simultaneously, so one of the primary design challenges was presenting dozens of editing tools without creating an overwhelming interface.

To solve this, I designed a three-panel workspace consisting of:

• A slide management sidebar
• A central live lesson canvas
• A contextual properties panel

This allows teachers to maintain awareness of lesson structure while editing individual slides, significantly reducing unnecessary navigation between screens.

The application supports over 25 interactive slide types, live preview, AI-assisted lesson generation, media management, undo/redo history, themes, reusable master slides, and standalone lesson export, all within a single editing environment.

One of the largest UX challenges was designing an editor powerful enough for experienced users while remaining approachable for teachers with limited technical confidence.

Instead of exposing every configuration option immediately, I grouped controls into logical categories, progressively revealing advanced functionality only when it became relevant. This reduced visual complexity without sacrificing flexibility.

Teachers naturally want immediate feedback while building lessons.

Rather than forcing users to continually switch between edit and presentation modes, I designed the interface around a real-time preview workflow that allows lesson changes to be reflected instantly. This dramatically shortened the feedback loop during lesson creation and made experimentation feel natural. The live preview broadcasts edits to a separate preview window in real time.

As lessons became longer, navigating dozens of slides became increasingly difficult.

To improve scalability, I designed a persistent slide navigation system with clear selection states, drag-and-drop ordering, visual grouping, and contextual editing panels so authors always understood where they were within the lesson.

Lesson creation combines text editing, media management, assessments, themes, animations, and presentation settings.

To prevent the interface from becoming cluttered, I relied on:

• Progressive disclosure
• Consistent iconography
• Reusable interaction patterns
• Context-sensitive property panels
• Clear spacing and typography
• Predictable navigation throughout the application

These design decisions allowed complex functionality to remain discoverable without feeling intimidating.

Another challenge was ensuring the builder remained usable across a variety of screen sizes.

I implemented collapsible and resizable panels, allowing teachers to prioritise either editing or previewing depending on their workflow. On smaller screens, secondary panels intelligently collapse to maximise the available workspace while preserving access to core functionality.

My workflow combined user-centred design with rapid product iteration:

• Conducted workflow mapping around real classroom lesson creation
• Produced wireframes to validate information architecture
• Designed high-fidelity interfaces in Figma
• Built reusable UI components using React and Tailwind CSS
• Implemented responsive layouts and interaction patterns
• Tested workflows continuously throughout development
• Refined the interface through repeated usability improvements and feature iteration

Because I owned both design and implementation, I was able to rapidly prototype, evaluate, and refine features without lengthy design-to-development handoffs.

The Skoolmaths Lesson Builder demonstrates my ability to design complex SaaS products that prioritise usability without compromising functionality.

It showcases experience in:

• Product Design
• UI/UX Design
• SaaS Design
• Design Systems
• Information Architecture
• Interaction Design
• User-Centred Design
• Responsive Design
• Wireframing & Prototyping
• Figma
• React
• TypeScript
• Tailwind CSS
• Accessibility
• AI Product Design
• Dashboard Design
• Visual Design
• Design-to-Development Workflow

The project highlights my ability to translate a highly complex feature set—including AI-assisted content generation, interactive lesson authoring, live preview, multilingual support, and offline lesson export—into an intuitive product that educators can learn quickly and use confidently. It reflects a product-first approach where every design decision was made to reduce friction, support real classroom workflows, and create a cohesive user experience from the first visit to the completed lesson.