Introduction
Serlo.org is an open educational platform that empowers educators and learners by providing free, high-quality learning materials. At the heart of content creation is the Serlo Editor, a key tool used by volunteers, teachers, and students to craft and edit learning materials.
However, the editor was no longer meeting the needs of its users.
Much of its design was based on developer needs rather than user needs. Over time, limited design resources led to a patchwork of legacy design decisions, making the editor unintuitive and difficult to use—especially for new authors.
It was time for a redesign—one that would streamline workflows, enhance usability, and support Serlo’s mission of open, collaborative education.
My Role & Approach
From initial research to final implementation, I led the UX strategy and design, ensuring that the new editor was not just a redesign but a measurable improvement in usability, accessibility, and efficiency. The process involved deep user research, iterative prototyping, and close collaboration with developers and stakeholders to create an editor that truly serves its users.
Understanding the Problem
Why does the Editor Matter?
Serlo.org is on a mission to make high-quality education accessible to everyone. At the heart of this mission is the Serlo Editor, the tool that powers the creation of open educational resources (OER).
📊 By the Numbers
20,000+ educational resources have been created using the Serlo Editor.
750,000+ students and teachers per month access learning content built with it.
500+ volunteer authors rely on it to contribute to open education.
Despite its importance, the editor was no longer meeting the needs of its users. Much of its design was based on developer needs rather than user needs. Over time, limited design resources led to a patchwork of legacy decisions, making the editor unintuitive and difficult to use—especially for new authors.
Key Challenges Identified
Intuitivity
The editor was not intuitive and catered mainly to experienced, dedicated authors who had spent significant time learning it. New authors often felt frustrated and abandoned the process quickly.
Features
It lacked key features to make it a powerful and efficient tool for creating digital learning materials.
More interactive elements were needed to make educational content engaging and dynamic.
Help
Authors had no way to access help pages while using the editor, making it difficult to troubleshoot issues or learn how to use features efficiently.
Mareike
39, English Teacher from Lower Saxony
"The editor is not intuitive at all - I had to spend too much time figuring out how to use it. And since it lacks interactive features, it doesn’t feel engaging enough for my students."
Research & Insights
To ensure that the redesign addressed real issues, we conducted a comprehensive research phase that included:
User Interviews
Educators, students, and volunteers shared their pain points and workflows.
Usability Testing
We observed users interacting with the editor to identify friction points.
Competitive Analysis
We studied editors from leading LMS platforms to identify best practices.
Design Strategy & Ideation
With a clear understanding of the challenges, the next step was defining a strategy to make the editor more intuitive, powerful, and engaging.
Key Design Goals
Make the editor accessible for both new and experienced authors.
🎯 Enhance interactivity
Build dynamic features to create engaging educational content.
Reduce friction by integrating contextua help.
The Redesigned Serlo Editor
With a clear understanding of the challenges, the next step was defining a strategy to make the editor more intuitive, powerful, and engaging.
Feature 1:
Image Plugin Redesign
🔹 Problem: Adding and formatting images lacked clarity in the user flow, had an inconsistent UI and felt unintuitive.
✅ Solution: A new streamlined image plugin with easier upload, online image search function and clearer settings for accessibility.
Impact:
📊 Reduced time to add an image by 40%.
📊50% increased amount of images in learning material
👍 Increased user satisfaction in usability testing.
Feature 2:
Interactive Image Feature
🔹 Problem: Static images limited engagement and didn’t support interactive learning experiences.
✅ Solution: A new interactive image feature, allowing authors to:
Add clickable hotspots with additional explanations.
Integrate interactive overlays for deeper learning.
Enhance STEM content by embedding explanations directly into diagrams.
Impact:
📊 Increased engagement with educational content.
📉 Reduced the need for external tools to create interactive learning materials.
👩🏫 Teachers reported higher student interaction and comprehension in STEM subjects.
Implementation and Collaboration
Bringing the redesigned editor to life required seamless collaboration between design, development, and stakeholders. To ensure a smooth implementation, we:
Developed a flexible component system in Figma to scale design changes efficiently.
Created detailed design documentation for an efficient developer handoff.
Conducted regular usability tests to validate improvements post-implementation.
This tight feedback loop allowed us to continuously refine the editor, ensuring that the final product met both technical constraints and user needs.
Impact & Measurable Results
The redesign transformed how authors create and interact with learning content:
📊 Efficiency Boost → 30% faster task completion time
📉 Reduction in User Errors → 40% decrease in formatting mistakes
📚 Higher Adoption → The improved usability contributed to the Serlo Editor being integrated into the official LMS of multiple German states.
🔍 Accessibility Compliance → WCAG 2.1 AA achieved
User feedback post-launch was overwhelmingly positive, with educators highlighting the new help system and interactive elements as game-changers.
Melanie
Secondary School Teacher
for Math, CS & Ethics, Bavaria
I love the Serlo Editor because I can present even complex content clearly and simply. What I appreciate most is how easy it is to use – from autosaving to how intuitive the elements are. It even makes creating long content a breeze.
Moni
Teacher for Physics,
CS & Math, Bavaria
I'm glad the editor is intuitive and stable – unlike other tools like Sodix. I also love that I can embed openly licensed images without leaving the platform. The variety of features like spoilers, interactive tasks, and fill-in-the-blanks really shows its potential.
Working with the Serlo Editor is a pleasure – it shows me exactly how the content will look to students while I'm creating it.
Anja
Math Teacher, Bavaria
The Serlo Editor is clear and well-designed. I’m sure I could train my whole team to use it in just an hour – that would save a lot of time!
Nina
Education Scientist
I love that the editor isn’t cluttered. It makes it much easier to use than other tools!
Key Learnings & Future Opportunities
What Worked Well
✔ Grounding design decisions in real user needs ensured high adoption.
✔ Close collaboration with developers led to smooth implementation.
✔ Interactivity improvements made a huge impact on user satisfaction.
What’s Next?
🚀 AI-Powered Learning Material Design – Automating content structuring and formatting to help authors create high-quality educational resources more efficiently.
📍 AI-Generated Learning Paths – Personalized recommendations that adapt to students’ needs, making content navigation smoother and more intuitive.
📚 Learning Material Library – A library of ready-to-use templates designed to:
Support self-determined learning in classrooms.
Give authors structured, pedagogically sound starting points for content creation.
Reduce the time needed to design effective educational resources.