When it comes to online education, accessibility is often the key to transforming an experience from exclusive to inclusive. At Mangahigh, an innovative math-learning platform for students aged 5 to 17, accessibility had taken a backseat during its initial design. This limited its usability for students with diverse learning needs and, ultimately, the platform's market potential.
As the Lead Designer working closely with our CEO and a small team of developers, I took on the challenge of reshaping Mangahigh to become a more inclusive and student-friendly product. What started as a daunting task turned into a journey of breaking down complex problems, designing thoughtful solutions, and learning how accessibility benefits everyone.
Understanding the Problem
Mangahigh's platform is designed to engage students through games, quizzes, leaderboards, and personalized dashboards. Its global reach meant it was already translated into multiple languages and locales. However, the platform's accessibility fell short, excluding students with disabilities and limiting its usability for educators supporting diverse learning needs.
We needed to redefine how Mangahigh could meet accessibility standards and reimagine the platform to support every student. My role involved researching the problem, proposing solutions, and integrating accessibility principles into our design system.
Laying the Groundwork
The first step was research. I conducted interviews with four education specialists who worked with students facing a variety of challenges. Their insights highlighted a common theme: customization. Every classroom is different, and educators need tools that can adapt to the specific needs of their students.
I also analyzed competitors in the EdTech space, focusing on platforms recognized for their accessibility. Some used built-in solutions, while others relied on third-party tools. Testing these tools on Mangahigh's platform helped me understand what worked and what didn't. Additionally, I delved into accessibility guidelines, particularly those from the W3C, to establish a solid framework for our design decisions.
Breaking Down the Challenge
The scope of the project initially felt overwhelming. To tackle it effectively, I proposed splitting the work into four focus areas: keyboard navigation, text-to-speech, an accessible style guide, and a customizable user interface.
Keyboard navigation ensured that users with motor impairments could navigate the platform without a mouse. This required rewriting parts of the codebase to improve HTML semantics and designing clear focus and hover states for buttons.
For students with visual impairments, we integrated text-to-speech functionality. A native screen reader was combined with a custom solution for reading math notation, ensuring students could easily understand complex content.
Designing the Solution
The accessible style guide was one of the most rewarding aspects of the project. It began with a thorough audit of Mangahigh's content and platform. Using the design checklist, I identified areas needing improvement and collaborated with the marketing and design teams to implement changes.
Customizing the user interface was another transformative step. While the React rebuild ensured responsiveness, I also explored ways to give students more control. Concept sketches included features for adjusting typography and color schemes, empowering students or their educators to tailor the experience to their unique needs.
Key Takeaways
- Accessibility benefits all users, not just those with specific needs
- Breaking down large challenges into focused areas makes them manageable
- Collaboration between design and development is crucial for success
- User testing with diverse groups provides invaluable insights
Looking Forward
Making Mangahigh more accessible wasn't just about redesigning a platform—it was about reimagining how students engage with math education. Through research, thoughtful design, and collaboration, we've taken meaningful steps toward inclusivity. And while there's still more to do, this journey proves that when accessibility is prioritized, everyone benefits.
Thank you for reading!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.