citycamp

project overview

CityCamp is an augmented reality game that utilizes location-based services to show delightful things that happen around users, encouraging them to explore lovely things that happen in cities. In this project, my team examined the effects of the echo chamber and presented a design response that aims to break fixed social circles.

PARTNER

Xinyue Zhang

TIMELINE

Sep. - Oct. 2020
5 weeks

METHOD

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

my CONTRIBUTIONS

User Research

Assisted in conducting interviews with target groups, and contributed to our research report.

Concept Development

Generated ideas and used down-selection methods to refine our
final design concept.

Technical Implementation

Collaborated on the application of AR and LBS technology for our design response.

3D Models & Scenes

Led developing 3D models in Cinema 4D and AR scenes in Unity, considering usability and connection to the real world.

Visual Storytelling

Collaborated on storyboarding the narrative for the demo video. Edited and produced the final concept video.

so what if we presented information in AR and show it based on location ?

PokemonGo was a big inspiration for my team. The game that is based on location-based service has encouraged a large number of people to explore the outside. Also, we loved the unexpected benefits it brings: Pokemon exist in the real world, and users have to enable cameras to see them, the barrier of the digital world disappears.

THE FULL EXPERIENCE

Design concept video featuring the story of Luna, who uses CityCamp to explore new experiences and share them with the public.

Main product features

Surrounding spots Information

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

Guided exploration

Users follow love balloons to explore streets, check out other explorers’ stories and leave their responses.

Share Exploration experiences

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

Festival spot

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

Free love ballon

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

01 The Background —

Auto-suggestions from apps limit people's exploration of the city

The auto-suggestions from social platforms facilitate people choosing travel places but limit exploring the city. We researched suggested attractions in Shanghai from five social platforms: Xiaohongshu, Dianping, Mafengwo, Ctrip, and Fliggy. We found out that the top 10 attractions had a 70% similarity rate.
‍

70%

similarity of popular attractions

10+

tourism information platform

40%

similarity of surrounding attractions

01 The Background —

Crowded Internet-famous spots and empty other spots nearby

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 attraction (Song Qingling's Residence). We observed visitors' activities and conducted interviews with them. Through the research, we found that:
‍

01

02

03

Lack of diverse information about attractions
——One of the reasons why niche attractions were overlooked was because visitors didn't know about attractions nearby
‍

Hard-to-find ground markings
——There were signs on the ground for surrounding attractions, but users had trouble noticing them.
‍

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

● Internet-famous attractions- Wukang Apartment

● Minority attractions- Song Qingling's Residence

02 Exploratory research —

Why don't people actively explore the city?

We planned to go further through user interviews to discover why users were reluctant to explore the city. In addition, we wanted to find the attraction sources of Internet-famous attractions. We thought we could use them as opportunity points to appeal to users exploring the city.

Why don't users actively explore the city?

Is it caused by their interest or influenced by the surrounding environment?

Why are Internet-famous attractions so attractive?

Do the views of these places attract users, or do recommendations from friends greater impact on users?

02 Exploratory research —

Finding barriers and potential opportunities

We interviewed 10 users and 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 two opportunities from internet-famous attractions: check-in and sharing with friends to encourage people to explore cities.

Ranking priority

Users lost the possibility of developing points of interest because they accept top-ranked places selected by social platforms.

“I would normally look upon Google, like the best-rated bookstore near me”.

“I mainly use Damai to search for high-ranking exhibitions in Shanghai to go”.

Social circle limitations

Users' interests are restricted in their existing social circles, so they have fewer chances to try new things that happened outside of them.
‍

"I go to the Internet-famous stores often because my friends also visit these places often.".
‍

“For information about many activities, only some specific circle of people could know”.

Snaps encourage discovery

Following Internet celebrities’ routes and taking photos in similar places inspires users to explore places which they can’t notice by themselves.

"I often follow Internet celebrities past some surprising places that I didn’t know".
‍
"Following famous photographers’ photos, I could find spots I could not notice on my angle".

Sharing encourages discovery

Users like to share their travel experiences with friends. And they are willing to go places according to their friend’s recommendations.

"I recommend the fun spots I have visited to my friends".
‍
‍
"Seeing interesting spots in my friend circle makes me want to visit there by myself".

03 Generative 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.

AR & LBS information presentation

AR and LBS enable information to be delivered equally to all users, avoid the same recommendation of ranking and the information limitation of a small circle

Explore & Check-in City Game

Set up a city exploration game to encourage people to find and share exciting places to around

03 Generative research —

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

To avoid the solid recommendation model, we chose Location-based Services and Augmented Reality as information filtering and presentation model. AR increased the readability of information and made it easy for users to access. Location-based services use geographic location to filter information, avoiding the limitation of social circles.
‍

● AR Information
‍
— Easy to find
— Emphasis on connection to the real world
— Can blend with the real world

● Location-based service
‍
— Different information filtering modes
— Location relevance of information
— Encourage users to travel

03 Generative research —

Explore & check-in games encourage people to explore the city

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.

— Interesting and engaged
— Location-based game mechanics
— Encourage communication in the real world

03 Generative research —

Finding barriers and potential opportunities

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

02

03

Internet-famous attractions can be a starting point for AR exploration trips
——When users have traveled to the Internet-famous attractions, AR information can be a clue of a city exploration game to encourage users to participate.
‍

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.
‍

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.

04 Ideation —

Design principles

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

Simple access,

because we hope to attract users to participate in AR activities

Exploration,

we want to broaden users' interests and inspire them to explore in the real world

Not automatic,

beacuse we want to encourage users to communicate with each other during the process

Easy and Frictionless,

we expect to help people emerge from the virtual world of addiction

02 Exploratory research —

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: Internet famous or minority, Photo or experience, and Private or shared.

01 Internet famous or minority?

02 Photo or experience?

03 Private or shared?

+Internet famous attractions: Users said that Internet-famous spots could be more appealing to them to go out.

-Minority attractions: Users said they would not go out specifically for minority attractions.

+Photo: Users said they wanted to take photos in Internet-famous spots to record their memories.

+Experience: Users said they were willing to participate in interesting experiences if these happened around them.

-Private: Users wanted to share their experiences in their social circles.
‍

+Shared: Users were willing to share exploration experiences with strangers and friends on the Internet.

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 fly their exploration experiences to the sky, attracting more people to explore the city.

03 Generative 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.

Exploration clues

Use AR information to inform users of good places around them to explore .

Exploration game

Enrich the user's exploration experience with AR exploration games and socialization

Shared Memories

Virtual memory information for users to share with strangers and friends.

We expanded the three concepts into seven features based on our research for the next step of testing and iteration.

04 Iteration —

What kind of UI is suitable in the AR environment?

We wanted AR objects to be attractive and easy to read for users. Also, we hoped to integrate information with the natural environment to avoid bringing excessively interruptive information to users. Therefore, we considered the presentation of AR information from 3 perspectives：
‍

01

02

03

What kind of AR information can avoid information redundancy
— Should we directly display all information in the air or hide information in 3D objects?
‍

What form of AR information can better integrate with the physical environment
— Are geometric bodies or objects in the natural better integrated with their environment?
‍

How to design the size and form of UI in an AR view
— What size and form of UI format were appropriate in the AR perspective?

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.

● Directly display all information in the air

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.

● Polyhedron

● Nature objects

● Balloons

Information in AR should be simplified and transparent

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 contrastive

● High contrastive

04 Iteration —

AR Interaction and exploration process

We implemented the 3D effect of balloons plus geometry in Unity, and a series of exploration game flows that we envisioned. We wanted to investigate further, to find intuitive ways of interaction in AR and the potential possibilities in the existing exploration flow.
‍

01

02

What kind of interaction in AR could avoid repeated operations?
— Determining and returning is more cumbersome in AR than in mobile, so we wanted to reduce the number of gestures.
‍

Were the existing exploration processes attractive enough?
‍— We wanted to stress more on the functions of other participants within the exploration process.

Touching balloons 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.

User 1: "It would make it a lot easier for me if I could preview the contents in the balloon."

User2: "The operation of repeatedly lifting the hand to click the balloon is too tired."

"Repeated operations are too troublesome."

We used gaze trigger to help users pre-view information in balloons

We have added an information preview phase. 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.

User 1: "Now I can preview the information inside the balloon."

User2: "It's better now."

05 Final Design —

Photo Story

We created photo storyboards to bring our story to life. This process helped us select shooting locations, prepare props, set up shots, and think about how we would transition from one scene to another.

05 Final Design —

Creating the video

06 Relection —

Project Takeaways

3D Modeling/Animation are great ways to communicate, rapidly prototype and test ideas for AR products

We tested three scenarios using AR prototypes with users. We were able to get great feedback from that and used it to guide our iteration phase. If we had more time, it would have been great to have been able to build the full process of immersive experience to test with participants.

A designer has to wear multiple hats sometimes.

The workflow of how to transfer designs from 3D modeling tools to AR was not clearly defined. It took both the designer and the developer's knowledge to figure it out. Working on the product from zero to one, I found my passion in defining and solving novel problems in an ambiguous technology area.