Shimajirō(巧虎，しまじろう) New Apps UI Design
TL;DR
I redesigned Shimajiro’s educational app to support its transition from in-person to digital learning during COVID, targeting over 1 million users in China. Led UI design for both mobile and tablet, crafting engaging experiences for kids and intuitive flows for parents. The redesign contributed to a significant increase in subscriptions and a strong sales rebound.
Team
1 x Product Manager
2 x UI Designer
5 x Developer
Timeline
Sep 2020 - Jan 2021
Role
UI Design
Prototype Design
Responsive Design
Context
Covid Makes Education Giants Turn to Online Education
Who is Shimajiro (Client)
An iconic educational brand owned by Benesse Corporation
A beloved animated character familiar to millions of children across Asia
Over 1.2 million in-person education subscribers in China
Challenges Shimajiro Faced
COVID-19 caused a sharp decline in in-person subscription sales
Rising competition from new players in the digital education space
Solution at a Glance
Crafting an Engaging Learning Experience
Multi-sensory Learning Experience
Used vibrant colors, skeuomorphic visuals, sound effects, and animations to recreate the immersive feel of in-person classes.
Dual-User Design Strategy
Designed playful and engaging interfaces for kids, while ensuring a clean and intuitive experience for parents.
Emotional Connection with Shimajiro
Integrated the beloved character to create a sense of companionship, boosting brand affinity and subscription rates.
Achievement
A Strong Rebound in Subscription Numbers
The design led to a strong rebound in subscriptions, playing a key role in driving Shimajiro’s digital growth and boosting overall sales.
Getting to Know Our Little (and Big) Users
Research
Exploring the Needs of Both Kids and Parents
To inform our design decisions, we combined academic insights with real-world product analysis. This helped us deeply understand both children’s cognitive behaviors and industry trends.
Literature Review
Studied child development and interaction design to align with kids’ cognitive and sensory needs.
Competitor Review
Analyzed top educational apps to identify effective visual styles and engagement patterns.
Insight
Physical Preference for Kid
Visual
Bright, colorful visuals help guide attention
Visual cues are preferred over written instructions
Sounds
Audio feedback enhances comprehension
Fun and familiar sounds increase engagement
Preception
Prefer rounded, tangible shapes
Struggle with abstract or symbolic design elements
Thinking
Form emotional bonds easily with visual characters
Rely on visual differences to make decisions
Insight
Mental Preference for Kid
Companionship
Bright, colorful visuals help guide attention
Visual cues are preferred over written instructions
Feedback
Positive feedback encourages exploration
Simple rewards increase engagement
Insight
Parent Expectations
Kids First
Parents expect the product to support their child’s learning and development
Layout & Usability
The interface should feel intuitive and effortless, not overwhelming for adults
Based on our research, we defined three guiding strategies that shape how the product should address the needs of both children and their parents.
Design should engage kids through multi-sensory feedback
Use vibrant colors, rounded shapes, sound, and animations to stimulate kids' senses and create a playful, intuitive experience.
Design should serve both kids and parents in one system
Adopt a dual-layer structure: figurative and engaging for kids, clean and scannable for parents, with visual complexity aligned to each user’s needs.
Design should build emotional connection through Shimajiro
Shimajiro should act as a companion—motivating kids and reassuring parents—while reinforcing emotional bonds and brand trust.
Designing for Little Hands and Big Hearts
From Strategy to Design
Multi-media Connects with Kid's Senses.
We translated this strategy into four multimedia design directions to better engage young users
Visual
Use a lively, high-contrast palette that reflects Shimajiro’s branding and catches kids’ attention.
Style
Apply figurative visuals and soft skeuomorphism to make the interface feel tangible and friendly.
Sound
Provide immediate, pleasant audio feedback to reinforce interaction.
Animation
Use clear, real-life-inspired animations to support understanding and bring content to life.
From Strategy to Design
One Design for Two User Groups
Since kids and parents use the app differently, most pages follow kids’ preferences, while parent-only sections are simplified for clarity and ease of use.
Parent & Kids Shared Pages
Playful skeuomorphic visuals with bright icons and soft shapes help capture kids’ attention and support intuitive interaction.
Parent-Only Pages
A clean, minimal layout improves readability and gives parents clear, useful feedback to support their child’s learning.
As a familiar and trusted character, Shimajiro plays a central role in the design—helping kids feel emotionally supported and engaged as they grow and learn.
As a familiar and trusted character, Shimajiro plays a central role in the design—helping kids feel emotionally supported and engaged as they grow and learn.
What We Learned, What We Fixed
Usability Testing Workshop
Refine with Real Feedback
We ran a 2-week testing workshop with real users—both kids and parents—to observe how they interacted with the product. The feedback helped us spot key pain points and refine the design for better clarity and engagement.
Iteration
Skipped Lesson Video
Problem
Over 50% of users skipped the lesson video at the top, mistaking it for a promotional ad.
Improvement
Moved the video below the description to reduce confusion and improve engagement.
Iteration
Misunderstood Point Label
Problem
Over 80% of users mistook “100 Points” as paid content instead of a reward.
Improvement
Adding a simple “+” sign clarified it’s a reward. In follow-up testing, interaction rates improved noticeably.
Iteration
Sensitive Banner Imagery
Problem
Improvement
To respect this emotional concern, we chose not to use children’s photos in banner areas and explored gentler alternatives.
Delivering Joy Through Design
Deliverable
What I Designed
Responsive App Design
Designed mobile and tablet experiences for early education, including lesson flow, media content, and progress tracking for kids and parents.
Dual-User Visual System
Built a visual language combining playful skeuomorphism for kids and simplified UI for parents across shared and parent-only screens.
Achievement
A Strong Rebound in Subscription Numbers
The design led to a strong rebound in subscriptions, playing a key role in driving Shimajiro’s digital growth and boosting overall sales.
Optimized Design Process
Plan components and guidelines early to reduce rework and save time.
Working with Clients
Align on goals and send meeting notes to ensure clarity and efficiency.
Designing for Kids
Research-led visuals helped us create a design that works for both kids and parents.
Thanks for Reading
Junjin Chen | 2024 All Right Reserved