Keep fit ~
Light up every grid in the city!
I'm a doggy repairman!
Custom level
SQUARE DOG
-SPORTS IN 1M²
Square Dog is a mobile game application focusing on urban sub-health and sports difficulties, which emerged at the historic moment in the post epidemic era.
MEDIUM
Mobile application
DURATION
2 weeks, Oct, 2021
MY ROLE
End-to-end UX Designer
UI Designer
TEAM
Xier Chen, UI Designer
Xiuge Zhang, UI Designer
OVERVIEW
· 1 problem statement
In the context of the COVID-19, people's exercise time and space become limited.The epidemic prevention policy makes it difficult for many people to enjoy outdoor sports without leaving home; The busy urban life is too busy for people to cope with, and there is very little time for them to maintain their health…
In the post-epidemic era, how might we encourage people to be proactively active in exercise and body sculpting?
· 2 solution in a glance
The "square dog" application designed by our three designers requires less space and exercise intensity. It solves the problem of space and time by guiding users to perform diversified small exercises. Launched in the form of games, focusing on the problem that the current sports market APP depends on the user's initiative and interest, let indoor light sports cure urban sub-health, and make fragmented sports more fun.
The SQUARE DOG is composed of 3 main functional modules:
MAIN LINE BREAKTHROUGH
Players, as dog maintenance workers, can choose buildings and rooms to go through.
CUSTOM LEVEL
When the dogs return to their own island, they can customize the level according to their own needs.
ISLAND SOCIALIZATION
Players can board other islands, get to know other users, exchange game experience and jointly break through the barrier.
THE PROCESS
Define the UX design results required for the entire project:
Secondary research
Interview
Persona
Design goals
Journey map
Competitive analysis
Brainstorm
Storyboard
Design conpect
Pain spot analysis
User flow
Mid-fi prototype
Design system
Final
design
HI-fi design
Solution
User analysis
RESEARCH
· 1 INTERVIEW AND PERSONA
"I also want to maintain a healthy life, but I really have no energy!"
We focused the target user group on the heavy mobile phone users under the age of 50. Through six interviews and 400+questionnaires, we learned about the basic needs of the target user group. With the ultimate goal of solving the sub health of the group, we achieved the goal of solving these core pain points through the design of fun games and short time sports in small places.
Lily , 27 , white-collar
· Subhealth problems of shoulder and neck pain caused by long-term use of computers
· During break time, she can do simple activities at her work station and occasionally go to the gym after work
· She seldom exercises because of busy work
Lee, 15 , junior high school residential student
· Sitting in school for a long time, overusing eyes, and weighing a little
· Only activities in the dormitory after class
· No sports experience
David , 20 , isolated college student
· Small space at home, poor sports conditions, lack of professional guidance
· More free exercise time
· Like challenging games
· 2 JOURNEY MAP
Compared with other traditional offline fitness, what is missing from online exercise fitness?
IN GYM
🥰
EMOTIONS
😩
It's easy to feel boring and boring to exercise by yourself with self-control
Start training and set fitness goals and basic information according to your own situation
😋
😩
Curious
A little fidgety
Ambitious
Fatigued
Guilty
🥰
😳
😅
🥰
EMOTIONS
😩
EXPERIENCE
Become a member of a gym, and prepare for fitness
Start to exercise, but it is difficult to train for yourself without professional guidance
Exercise with strangers. The atmosphere and taste are uncomfortable
Feel tired after a period of time, and gradually stop going to the gym
😎
Ambitious
Confused
Disappointed
Guilty
Anxious
Not only wasted the membership dues, but also regained their original stature and felt worse
😖
😢
😳
😡
Get ready to exercise and find your favorite fitness app
Exercise in free time, exercise according to the professional customized program of app
Difficult to persist, and leisure time is gradually used for entertainment
ON-LINE
Through the analysis of the journal map, we compared the two stages of the current fitness method: going to the gym or using some existing fitness applications. We believe that there are some pain points that have not been solved in these two ways. Combined with the data of user interviews, fitness software can be evaluated from the site area, equipment cost, game entertainment and content effectiveness.
· 3 COMPETITIVE ANALYSIS
"How to start from the content to reduce the demand for equipment and increase the interest becomes the most focused design point"
Ring Fit Adventure
The fitness game developed by Nintendo achieves the effect of body feeling game fitness through peripheral fitness rings, thigh straps and other equipment
Competitors
Requirements
Venue
Equipment cost
Entertaining
Game content
About a living room
Fitness ring, game machine
Strong sense of interest and immersion
Easy to get started
Active arcade
An online sports fitness service platform software, which drives the motion interaction of animated characters on the screen through character actions
About a living room
Pad
A little simple
No pertinence
Keep walking: adventure journey
Convert the real step counting data into sheep, dogs and other props in the game to enrich the game experience
No requirements
Phone
Sometimes feel harvest
No choice
Three fitness game products that interact with real people were selected for competitive product analysis, which was analyzed from the four levels of "venue, equipment cost, interest and game content" that this design focuses on
It can be seen from some known products that interest is often in direct proportion to equipment cost and venue area, that is, venue and equipment cost are often the most important link in order to get a better game experience. Therefore, how to start from content, reduce equipment demand and increase interest has become the most focused design point.
· 4 SUMMARY
After gathering the information from research, including interview, personal, journal map and competitive analysis we think that the interesting fitness application more suitable for the needs of the target group should also be required from these 4 aspects:
Venue
The required site shall not be too strict. It is better to meet the site conditions anytime and anywhere
👟
Equipment cost
The cost of equipment shall not be too high, which shall not be difficult to carry or obtain
🥽
Entertaining
The fun and incentive mechanism of the game should be complete enough to attract users to use it for a long time
🎩
Game content
The game has its own worldview and basic settings, which are consistent with the final goal settings of the software and make users feel more engaged
👑
IDEATION
· 1 BRAINSTORM
Brainstorm and give priority to the ideas most relevant to the design goals
What factors will limit our design scheme? & What are the innovation points of our design application?
Light exercise improves sub-health fitness demand
Busy life without free time
Environmental turbulence in the post epidemic era
The time and place of play should not be too large or only do some physical activities
Interesting language guides responsibility from the first perspective
Funny demands for fitness
Fragmented time fitness needs
Game-like incentive mechanism
A characteristic visual style (low poly? 8-bit? 3d?) or use a hot character
Add social functions
Showing off can increase fitness motivation
The environmental factors such as limited space, isolation from home and no offline exercise and learning can not be solved in the short term.
The idea of eventually incorporating the solution
Preliminary considerations
· 2 STORY BOARD
Integrate priority ideas into the user journey
01 Restricted station
02 Long term desk work
03 The shoulder and neck ache is unbearable, and the eyes need to rest urgently
04 Enter personal space
05 Select exercise site
05 Let's exercise！
Through the analysis of the brainstorm and storyboard , we have determined the basic functional area arrangement of the fitness application we designed and the solution to user needs, including application positioning and game content and incentive mechanism planning. Next, we need to refine the information architecture and interface design and then carry out repeated design iterations to ensure that it can really be implemented.
DESIGN & ITERATION
· 1 USER FLOW
After defining the overall user experience process and basic functions of the application.
In order to determine the affiliation and jump connection between pages at all levels, we used user flow to help us establish the application information structure.
Home
Continental map
Main level
Custom level
Apartment buildings
Rooms
Friend's challenge
Visual effect
Key points teaching
Stage objective
Sign in
Personal space
User data
Fitness objectives
Visual preference
Personalization
Exercise type
Exercise time
Scope of activities
Theme template
Custom level
Friends work together
Task level
Daily clock in
City map
Island map
Friend map
1st level page
General page
Page content
· 2 PROTOTYING
Mid-fi UIs & prototype for testing
Wireframing is one of the most crucial steps which involves visualizing the skeleton of product. It is a critical part of the interaction design process.
· 3 DESIGN SYSTEM
The painting style of the whole application is based on pixel and 8-bit illustration, the color is biased towards a retro style with high saturation, which is manually drawn by us.
MOOD BOARD
#ffffff
#ffe4b3
#d1c0e2
#65eef2
#bedfff
#doffoo
#fbaf1c
#b8701d
#7d1817
#3e0c0c
COLOR PALETTE
TYPOGRAPHY
Primary
Secondary
#d9cefe
#aac5df
#1285ff
#bada55
#324158
Grayscale
#ffffff
#cacbc9
#979897
#656664
#323332
#bada55
#c14c2b
#186fca
UI COMPONENTS
Icons
Aa Raleway Semi Bold
Aa Roboto Bold
Headline 1
Raleway /Semi Bold/24
Headline 2
Raleway /Semi Bold/22
Headline 3
Raleway /Regular/19
Headline 4
Raleway /Semi Bold/17
Headline 5
Raleway /Semi Bold/15
Headline 6
Body 1
Raleway /Regular/14
Roboto /Bold/20
Body 2
Roboto /Bold/16
Body 3
Roboto /Bold/14
Body 4
Roboto /Bold/12
Subtitle
Raleway /Semi Bold/12
Tag
Raleway /Regular/10
Tabler Icons iconfont.cn
· 4 VISUAL IDENTITY
The most addicting games are based on a story that engages the user in the process of playing or learning. We need to describe in detail the plot, characters and their intentions, as well as the setting.
In "SQUARE DOG", there are many buildings of different styles in the square continent. The residents in the square continent have encountered many difficulties and look forward to the help of enthusiastic dog maintenance workers.
The dog on the screen will prompt the player to complete the fitness action, and the device will capture whether the player's action is correct and standard through the front camera. After completing a certain number of fitness movements, the level progress will be improved. The appearance of the building is initially a gray square, which will be lit when the level is completed.
After repeated design iterations and detailed deliberation, we finally built an application that we believe is real, reliable, interesting, and can let indoor light sports cure urban sub-health, and make fragmented sports more fun:
FINAL DESIGN
Welcome to SQUARE DOG!
MAIN LINE BREAKTHROUGH
As a dog repairman, player can choose buildings and rooms(levels). Players can repair the broken room by imitating the movements of dogs, and the repaired room will be lit.
CUSTOM LEVEL
Players can choose their own exercise time, intensity and exercise position in their personal space.
ISLAND SOCIALIZATION
Players can board other players' islands, you can also choose to jointly operate a public space to provide a new form of fitness for couples, family and friends.
Square mainland welcomes every dog repairman! Come and join us!
REFLECTION
Gains
· Try full hand-painted visual design
· Analyze and solve problems from the perspective of users, pain points and solutions
· Design a complete game world view, from personas to urban backgrounds and social scenes
Further improvement
· Availability test
· The correlation between fitness movements and level promotion is not expressed
· Failed to implement the interaction model of reloading
Future work
· Technology expansion
· Balance between sports and game functions
· Content quality screening?