Researching, Ideating, User flow, Game design, Wireframing, Visual design, Prototyping, User testing
Jan 29th 2019 to Present
Figma, Principle, After effects, Premier Photoshop, Illustrator
Patrick Carrol (Software Engineer)
Explore new product concept that are more mobile friendly
Collect data and user feedback and iterate on main Dancebattle product based on what we learn
Test out major Indie game platforms and Google Play Store
Right now, you are probably sitting down and reading this case study. As a digital product designer, I work in front of a desk for at least 8 hours a day so as my friends and family. Actually, more than 80% of American jobs are desk jobs. We have all heard the saying that “Sitting is the new smoking”. Our Bodies are built for motion, not for stillness. Now, we are doing everything on our phones and computers, which involve us staying put, staring at a screen, and clicking with our fingers. Not like we want to sit down all the time. It is because we are addicted to our phones and computers even when we don’t have to use them
Americans are sitting an average of 13 hours a day
80% of American jobs are desk jobs
Average gaming time rises by 50%
Because of the special technology(pose estimation) we are working with, we decide to make a game that you are required to get up and move. It is unlike other motion games that you have to buy a console like the Nintendo Switch or Wii. The game is just in the browser. No installation need. It will be as accessible as any other mobile game and you can have fun playing it without the harm of being still.
Create a game that is technically attainable. Due to we only have 1 engineer on the team.
Design a onboarding experience so that people will understand how to play the game.
We think about games that we used to play when we are little(before Gameboy took over). Games like hula hoop, Jump rope, hacky sack and twister, they are so much fun. The rules of these game are super simple. We want to create a game like this in mixed reality.
We have this idea of a yoga game that you will need to touch a shapes to complete a yoga pose like the tree pose
The current ML model we use doesn’t detect the legs as accurate as the arms. But there are a lot of leg movements in yoga. We shouldn’t build a game that can’t guarantee a smooth experience for most users. Otherwise it is no longer accessible to everyone.
We tweak this idea. Instead of touching the shapes using both your feet and hands, you can just touch the shapes with your hands and heads. You don’t need to do a particular pose. You just need to keep moving and touch the right shapes and avoid the wrong shapes. Similar idea to Tangram, you need to remember what shapes you have
Remember the shapes that on your body
Touch the shapes that assemble your body
Don’t touch the shape that is not a part of you
Game Interface Exploration
Inform people that they will need to back up from the screen in order to play the game.
Introduce the rules as they play along
We tested the first version with 10 people in person. We made a second version so that people would have a better experience.
Add animations to make the game more understandable
Move CTA to the button to be more consistent throughout onboarding
Swap the image to a tutorial video
Added more instructions such as only one person in the frame and no objects blocking the camera.
I want to create a cozy design which is all about the feeling of warmth, comfort, softness, and relaxation. Something makes you feel that it is time to show some love to your body and mind. Slow down and focus on yourself. I also used a serif font because I want to bring some humanity into the design. Not everything has to be a straight cut.
We published the game on Reddit, Facebook, and some indie game websites like Itch.io. Track our users’ responses using Google analytics and Amplitude.
44% of people opened their camera after the onboarding
Average playing time is 6.5 mins.
Average rounds are 2 times
Finish rate is 66.67%
We are developing the rest of the game by adding more levels and a multiplayer mode. You can try the beta version of the game here
After testing on some major Indie game websites, we found that some of the sites don’t allow camera access during the game. It is a major set back for games like this one.
The technology (real-time pose estimation in a browser) is recently released. There are many technical constrains that need solving. I believe that our phones and computers are getting better and better. Some of the problems will go away as the technology progress. More importantly, we need to identify the problem and the users whether this technology can truly help them.