Miimo.ai — A coding game for kids
My role
Lead UX/UI designer
My responsibilities
- Participate stakeholders interview
- Information architecture
- Sitemap
- User flows
- Customer journey mapping
- Wireframing
Tools used
- Miro
- Figma
Project info
- Design prototype for the discovery phase
- iPad game application for kids (4-10 years old)
- Team of 3
Overview
Our client came up with an idea to create a gamification application for Thai kids (4-10 years old). The app will include various subjects such as Coding, Art, and Math. Before jumping into development, they want to validate the idea first. We helped conduct the discovery phase of the application to define the concept with a clickable prototype as a deliverable.
There are two main parts inside the application;
- Kid part
- Gameplay - kids can select the game subject, game stage, and view the trophy.
- Monster home - a place where kids can spend their coins earning from games to decorate and take care of their monster.
- Parent part - this is where parents can track the learning progress of their kids and managing all account-related settings.
Design process
Stakeholders interview
We did the workshop with our client to gather all requirements and draw a high-level wireframe to visualize the idea together.
Information architecture
In this phase, we create sitemap, user flow, customer journey mapping, and wireframes to visualize the flow and screen structure.
Visual design & prototype
After the structure is in place, we design UI screens with illustrations provided from branding team
Stakeholders interview
Aligning team understanding is a crucial part of every project. I believe that to produce good quality work, the designer needs to partner with their client. Stakeholder interview workshops provide the opportunity for me to learn my client's needs, exchange ideas, and solve problems together with my client. We run the session to discover the goal, business opportunity, and create a high-level sitemap to align our understanding.
Research - Competitive analysis
I want to gain more insight of what is out there in the market and get myself familiarize with the game application. I first scope down the competitor list to coding games and games for young kids (5-10 years old)
I also map and break the feature down to make it organize and easier to refer back to.
Compile with the initial research, here are our key findings
- Voice interface: when designing for young kids, you can’t rely on text and symbols. Some of them couldn’t read and couldn’t understand the concept of website symbols. We need to use voice to guide them through the tasks.
- Touch target: younger kids don’t have precise control with their fingers. So 44px touch target is not enough for them.
- Short attention span: young kids still couldn’t focus on one thing for a long period. So we need to keep everything concise, included copywriting and tasks.
Information architecture
Sitemap
With the high-level sitemap we created together with the client, I solidify and create a more structured sitemap.
User flows
User flow can be separated into four flows;
- Play game path
- Monster home decoration path
- Monster feeding path
- Monster activity path
I create user flows to make sure that everything is connected properly.
Customer journey mapping
I create customer journey maps for;
- Parent flow - from discovering the application to
- Kid flow - from onboarding to buy the first furniture to decorate monster home
This will help identify design opportunities and edge cases.
Wireframe
With all structure in place, I start to design the wireframes.
Profile setup
Parent will have to help the kid setup the app. So at the beginning of this flow, we require the parent to input their birth year to identify. The parent will create their own profile and help fill up kid’s profile.
Play game flow
The game concept is to separate learning topics on a different island. Inside an island, there is a learning path that the kids can follow. Kids will receive coins and trophies when they complete a level checkpoint.
Monster home
To keep the kids engage with the app. The kid will have a companion character which they have to take care of. Kids will be able to spend their coins on taking care of their monster such as buying food, cloth, buy furniture to decorate the room.
Parent dashboard
Parents can keep track of their kid’s progress with the app’s built-in dashboard. They can see the area that their kid excels at, areas that could be improved, time the kid spent in the app.
Balancing the need between young and old kids
The need of kids between 5-10 years old could be drastically different. 5-7 years old kids need more guidance. While 7-10 years old kids like to be more independent, and if the game is too easy, it will quickly bore them. We have to keep this in mind when designing the app. Here is how we incorporate this into our app.
💡 Add Hint button
For younger kids, when they get stuck on a game level, it could be very frustrated. So we provide them a ‘Hint’ button, that they can use when needed.
👋 Add friendly character helper
We also include a guidance character on every screen. When the kids tab on it, the character will give them suggestions about what they should do.
📝 Start at a different level
Before starting any subject, the kids will need to take a test to determine which level they would be their starting point. This way, older kids can start playing at a level that is not too easy for them.
🏆 Trophy collection
The older kids need a sense of accomplishment and goals. Earning trophies after finishing game checkpoints will give them a concrete goal and keep them engage with the app.
🏂 Progress at their own pace
Kids don't need to always tackle the next level. They can choose to play any level they want, at their comfortable pace.