ABC Mouse: The Power of Knowledge
ABC Mouse is Tencent's brand of enlightening online courses for children aged 3-8.
Timeline
2 weeks
Tools
Figma Illustrator
My Role
UI Designer
Deliverables
Prototying UI Design Documentation
Project Overview
ABC Mouse online courses are level-based, allowing users to progress and learn new knowledge.
I designed "The Power of Knowledge," a puzzle exercise for 1st to 2nd-grade students to enhance their geometry and pattern sequence knowledge.
The activity involves identifying shapes and figuring out patterns to deliver fruits from the forest to villages, fostering learning and engagement.
Research
In the design process, the goal is to create an age-appropriate activity that enhances the learning experience. It begins with identifying suitable geometry activities for first and second-grade students, followed by incorporating fun interactions to make it engaging.
1.The content
To design a mathematical activity for first through second grade, understanding their current geometry/algebra knowledge was crucial. The aim was to reinforce what they have learned and introduce them to new concepts they will encounter in school.
Second-grade geometry includes drawing and identifying characteristics of shapes like triangles, quadrilaterals, pentagons, hexagons, and cubes.
Grade 2 pattern involves repeating objects, shapes, or numbers, with a defined rule for identifying pattern elements. It can apply to various events or objects.
Based on the first and second-grade mathematical syllabus, the activity should focus on identifying multi-sided shapes and understanding the concept of repeating sequences of objects, shapes, or numbers.
2.Interaction Form
Once the activity content is determined, the focus shifts to ensuring it is engaging and motivating for children. The next step is to decide on the interactive format that will best present the activity.
Hands-on learning in early childhood education is fun, engaging, and has lasting impacts.
It fosters children's love for learning and allows them to direct their experiences.
Affectionate behavior is crucial for positive educator-child interactions.
Warm smiles, sincere praise, and loving welcomes create a supportive environment.
Surveys indicate that hands-on activities improve learning efficiency, increase engagement, and add to the fun of the activity. Timely positive feedback also enhances the user's sense of accomplishment, keeping them informed and interested in the game.
Accessibility
1. Pixel & Scope
ABC Mouse is an app designed for both mobile and iPad users, but their interfaces have different sizes. The challenge is to find a solution to accommodate both screen sizes effectively.
To maintain screen integrity, the canvas size was set to 2340px x 1440px, matching the larger screen size. This ensures that the activity displays correctly and at the right scale for users with different screens.
To address both large and small-screen users' needs, a cell phone screen size frame was inserted within the canvas. This frame indicates the visible range for cell phone users, ensuring that all operable buttons and main screens appear within it, maintaining the operability and screen integrity.
2.Color & Hierarchy
ABC Mouse targets children aged 3-8 years old and uses high saturation, bright colors for the design. The activity's background is set in a winter river theme with an overall green tone.
To make the subject and moving items stand out, keep the background simple and use uniform shades of color. A uniformly light background will highlight dark subject matter, while a relatively darker background complements light subjects.
Design
1. visibility of system status
In interactive activities, providing users with clear instructions and timely feedback is essential. After a user performs an action, responding promptly lets them know if they were successful and prepares them for the next steps in the activity.
FeedbackBased on the previous survey results, users in this activity require feedback throughout the process. Timely positive feedback is essential for correct operations, while negative feedback is helpful as reminders when they make mistakes.
Positive feedback
Negative feedback
Transition
The activity has three scenes, and after completing each scene, a transition screen informs the user of their progress and that they are moving on to the next scene.
3. Help and documentation
Users need a clear understanding of the operation mode to easily enter the activity. The first-time operation includes guidance on where to click, helping users navigate and start the activity mode smoothly.
UI Design
Scene 1:
Scene 2:
Scene 3: