UX/UI Design
Timeline: 3 weeks
Directory
What is the Problem? | Objectives and Goals | User Interviews | Game Developer Feedback | Competitor Analysis
Empathy Map | Key Insight | Proto Persona
Task Flow (Smart Watch)
User Flow (Mobile)
Mobile Process (Low-Fidelity Sketches, Mid-Fidelity Wireframes, User Testing Feedback, High-Fidelity Prototype)
Smart Watch Process (Low-Fidelity Sketches, Mid-Fidelity Wireframes, User Testing Feedback, High-Fidelity Prototype)
Mock Web Landing Page
Tools Used
Group Members + Roles
Problem Statement
Objectives & Goals
User Interviews
Eva Elle
7 Years Old
Guy Mccoy
10 Years Old
Kayla Ray
25 Years Old
Game Developer Feedback
Competitor Analysis
Empathy Map
Says
"It would be cool to see your friends’ pets and their progress / fitness progress"
"Stuff for kids doesn’t need to be different than stuff for adults. Good designs, comedy, entertainment translates well for adults and kids who enjoy the category"
"Humans naturally like taking care of things and seeing them grow"
Thinks
"Would like a smartwatch that can help you disconnect at certain times of day"
"Desired learning while playing with virtual pet: More knowledge about animals and pet care"
"Favourite animal: Tiger (admires sharp claws, climbing abilities, and camouflage)"
Gain
Liked how you could bring tamagotchis everywhere with you
Smartwatch- lightweight, useful, provides feedback about body, hard to lose
Pain
Mobile interface is often “weird”- touchscreen not tactile, large fingers, simulated buttons are awkward)
Thinks smartwatches are cool but expensive and doesn’t want to be too plugged in/addicted
Key Insight
Proto Persona
With the data collect, we brainstormed ideas and after some iterations we created a Task Flow for the Smart Watch & a User Flow for Mobile. We decided it would be best to onboard the user through mobile given its larger interface, offering more options for the user. The user would would then transfer and connect the actual app through the Smart Watch.
Task Flow (Smart Watch)
User Flow (Mobile)
Low-Fidelity Sketches
Mid-Fidelity Wireframes
Have Alerts to remind when to feed or interact with your pet
Larger icons, without taking over space - Flatter oval buttons in corners
Edit Dark Mode setting
The Profile Tab is too wide
Have explanation of what icons do
Add Music and SFX On/Off setting
Change interaction from Swipe to Drag
High-Fidelity Prototype
Onboarding
Games, Settings & Profile
Figma Prototype
Mock Web Landing Page
A launch page for Animalia. It has instructions and preview for mobile onboarding and gameplay
Website Link