Phone Game Design
Role
Product Design
Visual Design
Prototyping
Timeline
Since Dec 2024
(in progress)
Team
Hong Yu Wong (designer)
Jacqueline Guo
(designer)
Skills
Visual Design
Interaction Design
Game Design
Tools
Figma
ProtoPie
Origami
Problem
How can we create a shared camera experience for larger groups?
Divergent Exploration
We started out trying to design a playful shared camera experience and spent a week exploring various concepts and ideas
Insights
From prototyping,
we learned that existing tools leave a lot of opportunity for drop-off in kids
From feedback,
we
From our experience,
we learned that existing tools leave a lot of opportunity for drop-off in kids
Narrowed Down Concept
A photo bingo app to help groups connect with one another.
Design Principles
How can we design a 10x better experience for both organizers and attendees?
Connective
Meaningfully connect players in real life
Playful
Having a distinct visual & motion language
Solution
3 main parts of the game experience: creation, play & post-game consumption.
Power Cards
ddd
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