I've had the joy of working on a special project lately – an English learning platform just for kids. It's a departure from my usual tasks, but incredibly rewarding. Creating something that helps young learners is truly inspiring

The problem

The challenge lay in transitioning from traditional printed worksheets to a digital platform while ensuring seamless interaction between students and teachers. The aim was to enhance the learning experience, making it more engaging and effective. However, it was crucial to maintain familiarity in the transition to avoid any confusion for the kids. Thus, the task was to create a digital environment that retained the essence of the printed materials, ensuring a smooth flow of learning that children could easily follow and enjoy.

Approaching the problem

In order to develop a suitable design approach, I delved into our existing data to establish logical breakpoints for each pivotal aspect of the product.

01. Time Management

Elevate project time management with Notion

02. Design inspirations

Drawing inspiration from learning websites

• Analyze user-friendly pagination styles that enhance navigation and browsing experiences.

• Discuss colorful, intuitive, and interactive styles suitable for children.

• Explore responsive strategies that adapt to different screen sizes

• Discuss techniques to optimize user engagement through elements.

03. Hand-drawn sketches

I've identified the key sections for lessons and seamlessly adapted them to the digital platform, implementing an efficient pagination system to ensure a smooth and organized learning experience, while also incorporating hand-drawn sketches into the design process

04. Wireframes

Transitioned hand-drawn sketches into low-fidelity wireframes using Figma

05. High-fidelity Mockups and Prototype

we'll explore my considerations during the conversion of wireframes to mockups.

• Color Contrast: Make sure the text and background colors have enough contrast for easy reading.

• Large, Clear Text: Use clear fonts and make sure the text size is big enough.

• Consistent Layout: Keeping the layout the same across the website for easy understanding and navigation.

• Consistent Spacing: Use consistent spacing to avoid clutter, following an 8-point grid system.

• Providing Transcripts: Offering written versions of important content for different learning needs.

• Prioritizing Dyslexia Accessibility: Use light blue and purple colors and the Open Dyslexic font to make the site more accessible for dyslexic users.

06. Creating a Design System

To organize and simplify design tasks for both designers and developers. It covers typography, spacing, colors, buttons, and components

This encapsulates the journey taken to reach the solution for the challenge at hand.

Create with joy ✨