Personal Project | iPad Application
Role
Product Designer &
Animator
Timeline
6 weeks
Aug - Sep 2024
(in progress)
Team
Elise Kim
(product designer)
Alan Raskin
(software engineer)
Skills
Prototyping
Visual Design
Interaction Design
Product Thinking
Tools
Figma
Protopie
After Effects
Problem
How can we simplify a pro creation tool to be more accessible for kids?
"Stop Motion is a Child’s Gateway to Animation"
Through mentoring, we discovered beginner stop-motion applications are still not understandable enough for children to use.
Research Insights
From competitor audit…
we learned that existing tools leave a lot of opportunity for drop-off in kids
From expert interviews…
we learned there are more narrow age groups with unique considerations
Through testing with kids…
we felt the behavioral trends firsthand
Constraints
We collected the most important constraints regarding our target audience & medium.
iPad as a medium
Narrowed down target user: 5th graders
Low-medium reading ability
Visuals over text
Simplify features for the developer
Solution
We designed features that solved for a kid’s pain points across pre-production, production, and post-production.
Pre-Production
Kids don't know where to start. How can we solve the creative block problem?
Delightful Home Page
Delightful home page where they can see their previous work
Prompt Generator
It generates them a theme to get it started quickly.
Production
Stop-motion apps assume the user knows animation. How can we educate our users?
The Workspace
Overwhelming features on the workspace can be intimidating for kids.
Onion Skinning Simplified
The Onion Skin feature (= seeing the previous frame in lower opacity so you can adjust your current one) is visually and conceptually confusing. Not showing it as a button to create constraint. Kids will always see the previous frame's main object's outline on the camera.
Action Library
When you're stuck: it suggests 3 pre-set movements based on the prompt you received. In this isolated mode, it gives you a hint about your object's next step and the other features are all disabled.
AI Invisible Hand
There are certain movements (eg. flying) a beginner user can't do with their objects due to lack of professional set. With AI Invisible Hand, the user can use their hand to move their object, shoot the shot and then the app will remove their hand from the frame.
Auto-Preview
It’s typically hard to tell you’ve made a mistake until it’s too late. With auto-preview, you can check the progress you made during shooting and delete any frames you have to.
Post-production
How can you fix your mistake when it's 'already too late'? How do you want to celebrate your work?
Auto-Audio
Automatic sound suggestion to add delight and a light-weight AI feature at the end of process.
Celebration Point
Design Principles
Progress over perfection
Thinking about the app as a playground. There is no right or wrong moves.
Getting started quickly
Giving clear starting points and guidance to kids to get over the initial creative block.
Prioritizing the analogue experience
Emphasizing in-person craft and the light-weight use of AI.
One of our early explorations:
How to solve the problem of showing the previous and next frame?
Before we landed on our final solution, we went through 3 phases of design exploration & iteration.
Previous frame as a concept
How to communicate and teach onion skin? Should it even be a button?
🔴 The concept is too complex for kids
🔴 Explaining it doesn't have a high impact on the making itself
Previous frame as a toggle button
Displaying just the contours of primary elements.
🔴 Excessive liberty
🔴 Visually remains quite perplexing
Hint button: showing the next frame
🟢 Offers immediate solution
🔴 Limited to one movement
🔴 How would the app know which move to do?
🔴 Seeing the previous and next frame at the same time is too overwhelming
Action Library #1
🟢 Limited options so it is not too overwhelming
🟢 Simple movements that can be applicable for all materials
🔴 Friction if they need to click through too many steps
Action Library #2
🟢 Up charge icon communicates the feature's essence
🔴 Directions are not specific hints enough
Action Library #4
🟢 Seeing the selected movement in a short animation on the object can help the kid visualize it better
Action Library #5
🟢 Focus state, other functions are disabled
🟢 Keeping options limited
🔴 The orientation can cover up the object
AI Invisible Hand
🟢 The user can do 'more extra' moves as well
🔴 Is it necessary for the core functionality of the app?
Conclusion
🧸 User Testing
Next step for us is to test our application out with 5th grader children to gather feedback
👷🏻♀️ Next Step
We’re working on simplifying the app so our solo engineering partner can build it
📊 Business Context
Potentially targeting classrooms, teachers, parents, families with younger children
👩🏻💻 The Full Design Process
If you want to see the nitty gritty of research & design explorations that went into crafting this experience, please reach out to me!
I normally walk people through this in an interview environment or in a coffee chat.
Ani Nguyen Le, 2024.
Philadelphia / Budapest