Product designer
demo.gif

Geoga | UI/UX

Geoga is a game that relaxes your mind and body.

 
demo.gif
 
 

Role

Researching, Ideating, User flow, Game design, Wireframing, Visual design, Prototyping, User testing

Duration

Jan 29th 2019 to Present

 

Tool

Figma, Principle, After effects, Premier Photoshop, Illustrator

Team

Patrick Carrol (Software Engineer)

 
 

Goal

  1. Explore new product concept that are more mobile friendly

  2. Collect data and user feedback and iterate on main Dancebattle product based on what we learn

  3. Test out major Indie game platforms and Google Play Store

 
 

Problem

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

Sitting.png

Americans are sitting an average of 13 hours a day

 
desk.png

80% of American jobs are desk jobs

 

Average gaming time rises by 50%

 
 

Solution

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.

demo1.gif
 

Challenge

1

Create a game that is technically attainable. Due to we only have 1 engineer on the team.

2

Design a onboarding experience so that people will understand how to play the game.

 
 

Ideation

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.

Brainstorm🤯

brainstorm.jpg

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

MacBook Pro 3.3.png
MacBook Pro 3.1.png

Technical Constraints

  • 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

MacBook Pro 4.png

Game Rules

  • 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

instruction.gif
 
 

Game Interface Exploration

 
Option A

Option A

Option B

Option B

Option C

Option C

 
pros+cons.001.jpeg

Onboarding

  • 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

userflow.png

Iterations

We tested the first version with 10 people in person. We made a second version so that people would have a better experience.

First page

  • Add animations to make the game more understandable

  • Move CTA to the button to be more consistent throughout onboarding

Before

Before

After

After

 
 

Tutorial Page

  • Swap the image to a tutorial video

  • Added more instructions such as only one person in the frame and no objects blocking the camera.

Before

Before

After

After

Mobile Add-ons

Phone rotation

Phone rotation

Place phone

Place phone

 
 

Branding

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.

 
 
Branding.jpg
 
 

Testing

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

 
 

Learning

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.

 
 

Result