CityCamp

An AR city exploration game to help you discover the excitement around you

Teams

Zhiyong Kong    →
‍

My role

Secondary research, Observational research,
interviews,
Interaction Design,
Visual Design( mobile app UI, AR objects, and AR scenes)

Timeline

Sep 2021 - Oct 2021
‍

Tools

Figma, Unity,
Reality Composer,
Cinema 4D,
After Effects,
Davinci


The Solution
‍

I/Surrounding Spots Information


Users check out spots information, including photos and videos in AR based on their geographic location.
‍

2/Exploration
Games


The exploration game not only brings you the surprise of unlocking niche attractions, but also the ability to communicate with explorers at different times and in the same place.
‍

3/Share Exploration Experiences


Users share exploration experience with game players in the space and  unlock the "release point" location in advance.
‍

4/Festival Spot


Users arrive at the “release point” where they can check out exploration memories of all players.
‍

5/Free Love Ballon


Users can release a love ballon and call on more people to explore wonderful things in the city together.
‍

How we got  there

Background

The information age may limit your discover the city...

Nowadays, we can find places we want to visit by simply searching for them. However, when searching for tourist attractions in Shanghai from different platforms, the information we got was all almost the same. We used ten various information media to search for attractions in shanghai. We found out that the top 10 attractions had reached a 70% similarity rate. Besides, the search similarity rate for nearby attractions by geographic location reaches 40%. What’s worse,  the information on nearby attractions did not even have photos and comments.

Finding the reasons for the loss ...

‍

1 Fild Research
‍
What is the current status of the minority sites buried under information？
2 Interview
‍
Why don't users actively explore the city? —The impact of social media on their travels
Why are Internet celebrity attractions so attractive?

Background

Internet celebrity VS Minority

To verify our findings and find new opportunities, we counted the number of people at an Internet-famous attraction (Wukang Apartment Shanghai) and a nearby niche attraction (Song Qingling's Residence). We observed visitors' activities and conducted interviews with them.
● Internet Celebrity Attraction- Wukang Apartment
● Minority Attraction - Song Qingling's Residence
Through the research, we found out that:
01
Lack of diverse information on the internet
One of the reasons why minority attractions were overlooked was because visitors didn't know about attractions nearby
‍
02
Hard to find them in the real world
There were signs on the ground for surrounding attractions, but users had trouble noticing them.

03
Social behavior in the same geographic location
When people were present in the same location, people talked about content related to the attraction.

Exploratory Research

Interview

In the interview phase our research goal was to understand why users pay more attention to online attractions than niche attractions, so we conducted offline interviews with 6 users to discover pain points and find design opportunities.
We created an affinity diagram to discuss what we learned in our interviews. Through our affinity diagram sessions, we gathered a range of meaningful insights. Some insights disproved our previous hypotheses, while others affirmed the hypotheses we had proposed, and still more presented ideas we had not considered.
We found that social media limits the possibilities for people to explore cities, and we identified 2 opportunities for internet-famous attractions to inspire people to travel and explore.

Exploratory Research

How to provide a new city exploration experience?

Based on user insights, we propose to use AR+LBS technology to build a city exploration game.

1/ AR & LBS enable information to be delivered equally to all users

To reduce the limitations of social media messages, we chose AR and Location-based services as a new information filtering and presentation model. AR increased the readability of information and made it easy for users to access when they were out. Location-based services used the geographic location as a medium to filter information, avoiding the limitation of social circles.
● AR Information
‍
● Location-Based Service
‍

· Easy to find
· Emphasis on connection to the real world
· Can blend with the real world

· Different information filtering modes
· Location relevance of information
· Encourage users to travel

2/Explore & Check-in City Game help people to find excitement around

We were inspired by PokemonGo, an AR game that encourages people to go out. We created an AR game to achieve our goal. In our AR game, users found and collected AR objects and discovered more unique sceneries in the real world.
● PokemonGo as an example
‍
· Interesting and engaged
· Location-based game mechanics
· Enhance communication in the real world

Generative Research

Finding design opportunities for AR information engagement in user travel

We wanted to further understand how AR messages engage in user journeys, so we mapped user journeys to find user pain points before, during, and after travel, and to develop engagement time points and features for AR messages.
01
Internet-famous attractions could be a starting point for AR exploration trips
When users have traveled to the Internet-famous attractions, AR information could be a clue of a city exploration game to encourage users to participate.
‍
02
AR information can  encourage interaction with the environment and people during the trip
AR messages can combine with different city environments to create various topics and help people in the same location build more connections.

03
After the trip, AR information can be a memory carrier of combining virtual and reality
After the trip, users can leave their AR memories in the real world and share them with people in the same place t.

HOW MIGHT WE
‍

Ideation

Ideation

Design principles

We developed 4 design principles to consider through concept generation and down-selection.

Ideation

Concept Ideation

Guided by our design principles, we generated 35 ideas in the ideation stage. We then affinitized our concepts into three buckets related to exploring: Popular or Minority, Photo or Experience, and Private or Shared.
01 Popular or Minority?
‍
02 Photo or Experience?
‍
03 Private or Shared?
‍

+Popular attractions: Users say that Internet-famous attractions can be more appealing to them to go out.
‍
+Minority attractions: Users said that if they can learn about minority attractions around them, they're willing to stop by

+Experience: Users say they are willing to participate in interesting experiences if they exist.
‍
-Photo: Users say they can only take pictures in the Internet-famous attraction, and the activity is relatively single.

+Shared: Users like digital memorials because they can easily recall and share.
‍
-Private: Users didn't want to buy too many souvenirs because they felt wasteful and space-occupied.
Based on the feedback from users, we decided to use the Internet-famous attraction as the beginning of the journey. We used AR information to inform users of the good places around and encourage them to explore. In the exploration stage, we enriched users' experience with AR exploration games and social activities. Finally, users can share their exploration experience in specific locations to attract more people to participate.

01 Research

CityCamp - A city exploration game

We finally decided to attract users to explore places near Internet-famous attractions through a city exploration game, including three concepts: exploration clues, exploration games, and virtual memories.

01 Research

Design principles

We developed 4 design principles to consider through concept generation and down-selection.

Prototyping and Testing

Finding the reasons for the loss ...

‍

1 UI Form
‍
What kind of UI form can better carry information and coordinate the environment?
2 AR Interaction & Flow Iteration
‍
Which AR interaction mode is easy to operate and easy to understand?
How to increase participation and socialization in the game?

Prototyping and testing

1/What kind of UI form is suitable in the AR environment?

We hope that AR information can be attractive enough for users to find and get information easily; at the same time, we hope that the information can appear in a more natural way in people's daily life and be integrated with the environment as much as possible to avoid the distress of bringing too much information to users. Therefore, we have considered the presentation of AR information from 3 perspectives：

Hiding the information in 3D objects is a more suitable display mode

First, we wanted to determine whether it would be better to display all the information directly or to hide it in an interactive 3D object. And we finally chose to hide the information in a 3D object.
Reason 1: Hiding information in 3D objects can make the AR experience more interactive.

Reason 2: If the space is filled with too much information, users’ view can be block and cause danger in the outdoor area.
● AR Information
‍
● Location-Based Service
‍

The combination of balloon and geometry is a suitable form for 3D models in AR

We then searched for a 3D model form that would attract attention and fit well with the natural environment. Finally, we combined balloons and geometry as the 3D presentation of AR information.
Reason 1: Geometric forms are easy to spot and are perceived by users as containing information inside.

Reason 2: The balloons can appear in the air natually and can be well integrated with the environment, giving a sense of being able to share as well.
● Nature objects
● Balloons
● Polyhedron

Hiding the information in 3D objects is a more suitable display mode

We used bodystorming to envision a mixed reality experience. We then decided to enhance the contrast in AR and adjust the visual hierarchy of the UI
Enhance the contrast: Since the urban environment is diverse, we set a semi-transparent blurred black background to increase the readability of the information.
‍
Adjust the visual hierarchy: We use contrastive colors to differentiate the reading area from the action area to let users operate easier. We chose a brighter color to represent the action area which helps draw the user's attention.
● Low contrast UI
‍
● High contrast UI
‍

Prototyping and testing

2/What kind of UI  is suitable in the AR environment?

With a clear direction after 3 rounds of prototyping and testing, we designed the full experience, which includes the looks of the 3D balloon in Unity, the AR scenes of release points, the interactive actions of AR information, etc.

After that, we iterated on the interaction actions and flow.

Interaction Problem: Touching balloons to jump to the 2D user interface repeatedly were troublesome

The user must touch balloons and jump to the 2D user interface to see if they are interested in the content. If not, they must repeat the process for each balloon, which can be troublesome.

Insights:
"It's hard for me to understand the message inside the balloon."

Interaction Iteration: Gaze trigger to help users pre-view information in balloons

We used gaze trigger to help users pre-view information in balloons. When the user focuses on one of the balloons, a text message will appear to help the user preview the content. If the user is interested in it, they can tap to open the balloon to see the full information.
‍
Insights:
"Now I can preview the information inside the balloon."
"It's better now."

Flow Iteration 1: Add scene of exploring the stories left by other users

We wanted to emphasize user engagement within the exploration process. Users can leave their stories at exploration sites to be found and listened to by those who come later.

Flow Iteration 2: Add scene of sharing destination clues with other users

In addition, explorers can share clues of destinations with each other, unlock the destinations in advance, and go there together.

Final Design

01 Research

AR and LBS enable information to be delivered equally to all users

We created a set of photo storyboards to help us plan out our video. This process helped us select shooting locations, prepare props, set up shots, and think about how we would transition from one scene to another.

The Video

Project Takeaways

✦
Friction-free interaction is making the human connection more and more fragile

Mobile technologies and artificial interaction promote “friction-free” interaction, which ultimately leads to human connections becoming increasingly fragile. As such, perhaps the time has come for digital technologies to be associated with attributes apart from ease and convenience.

It’s important for us to realize that the opposite of “easy” is not necessarily “difficult”, or any other negative attribute. Rather, it can also be positive qualities such as “exploration”, “involvement”, “love”, and so forth.

Next Step

✦
More diverse AR exploration gameplay

In addition to traveling to different locations to check-in and find clues, we should consider the possibility of more gameplay to keep people's curiosity of continuous exploration.


More Projects ↓

CityCamp

An AR city exploration game to help people discover the exciting places nearby

StreetGo

A map to help pedestrians understand the walking environment and plan their travel routes according to their needs

Focus

Mobile APP for increasing the concentration of college students in class

Let's connect!
‍

newmoonzhang1995@gmail.com
Atlanta, GA, US



‍
© Luna (Xinyue) Zhang 2023
ScenarioResearchIdeationTestingFinal Design