PROBLEM STATEMENT

Connection X Engagement X Emotion.

Our core principle is to facilitate bonds among strangers. How to transform a space into somewhere that fosters connections, engages the crowd, and generates this warm sentimental feeling that we often have when we sit around a bonfire feeling bonded? How to present something so human with cold technology? Is it even possible?

‍

RESEARCH

Theory of Engagement.

As one of our most fundamental goals was to explore how to truly engage people with technology and transform this passive watching large screens cinema-like experience into an interactive experience, we thought these are the reasons why we believed the audience would want to engagement in this experience we were trying to create.

• Humans are social animals and crave bonds with others in nature
• Provide a reason for people to talk and interact with each other to satisfy the inherent craving
• It is fun to find different ways to coordinate and find each other
• Bring people together, especially groups of people that don’t know each other for new connection creation
• Growing fire flowers as a group is satisfying because it mirrors the physical motion of moving around the space and then grouping together as well as the emotional notion of the blooming of connections

‍

EXPLORATION/IDEATION X PLAYTEST I

Attention on the Big Screens vs Attention to Each Other vs Attention to the Small Screens.

We spent a few weeks trying to come up with the most compelling and engaging experience for our audience that we could create with the large screen technology that transforms a public place. We kept refining our ideas for the interaction by getting feedbacks on the overall experience design and technical feasibilities through playtests and from various people and experts, and thinking through lists of questions we were interested in.

Some of our main considerations are:

• Story arc - conclusion

- How does it end
- What is the final takeaway
- How to indicate that process is complete/game is finished

• Create motivation to participate/compete

- Develop motives to continue interacting

• How to mitigate awkwardness/inhibitions to interact with strangers

- Give participants a preview/indication of what activity will be like

• Reference - Sky iOs game

- Give some guidance while also maintaining points of discovery

• Consideration - give some guidance as to what interaction should be after people meet/find their groups
• Integrate bonfire throughout experience

‍

We also did a playtest with our chatroom prototype to see if people enjoy finding each other in cowd through their own creativity. We observed their facial expressions and interviewed them afterwards about how they felt to see if our goal was achieved, is there any form of bonds that was formed primarily - and we succeeded.

‍

EXPERIENCE DIAGRAM & STORYBOARD

A Walkthrough of the Experience.

1. The light goes off/dims (get people into magical circle), the flashlights on the flower stations are on
2. Display instruction on the big screens as the start of the experience
3. Go to URL
4. Each visitor has a whole black screen on their phone with a text box for them to type (with the prompt “Use this chatroom to find your group and then gather at an empty flower station.")
5. The texts disappear on the phone screens but start appearing on the big screen as flare growing from the logs/fire pit
6. After the visitors found all of the people in the same chatroom (the size of the chatroom is random from 2 - 5), followed the prompt “Type the code on the flower in this chatroom to bloom a flower on the big screen.” on the phone screen.
7. They go to a fixed-positioned flower station to claim it by sending the codes that are on the station
8. After sending the code successfully, a fire flower petal would appear on the phone screen (skipped in our final development cause of time limitation)
9. Each person in the chatroom shoots the fire flower petals from the phone to the big screens respectively (skipped in our final development cause of time limitation)
10. The fire flower forms on the big screens in the section of the big screens where the group is
11. Bonding with other people in the same group by going through the prompt questions fostering the conversation we put on the physical petalsby typing the most XXX episode and going through more prompts (ex. The funniest moment, the most frustrating moment, the most romantic moment.. In the past week)
12. The fire flowers start floating towards the middle
13. Have the ambience element on the big screen and the fire float/fade away, then comes the announcement of “Look around and appreciate the bonfire(bond) we built” while a soulful music climax gradually
14. After the music reaches its highest volume, the music fades out
15. End
16. The visitors who come to the venue after the instruction/URL was announced could still enjoy the visual and the interaction of the crowd (don’t participate)
    (During the time when people are finding each other, the ambience elements slowly changing, eg. stars, and the light music plays)
    

VISUAL DESIGN

Set the Tone!

Color Palette

‍

Background Asset

‍

Visual Reference

‍

‍

‍

‍

‍

‍

‍

‍

DEVELOPMENT X UI DESIGN X ITERATION

Chatroom Web Sockets X Unity Communication.

After our first playtest I started working on the communication of the chatroom and Unity.

Then I started developing and designing the UI after deciding on the font with my team.

Ultimately...

• I fine tuned the pixels
• had the words fade out to prompt people to be more present with the conversation
• had each person have their own row for their messages, so there would be 5 rows if there are 5 people talking and one could see everyone's meesage at the same time, so scrolling needed
• Deciding on whether the texts should be stacked up from the bottom or the top to make more send
• Tried to see where and how the prompt and hint should pop up to not interfere the conversation but also guide the audience through the experience

‍

CHALLENGE

Different Performance from Different Browsers.

One thing that was bothering us was that the performance on Chrome and Safari were different. With Chrome it performed exactly the way we wanted, because I kept testing in Chrome when I was developing it. But in Safari, when the keyboard was activated it pushed up the whole screen, so if the user did not scroll up then the prompt would seem like it disappeared.

After doing a lot of research and trying to fix it, it was still in vain. I tried to work around it, having <p> stack from top or from the bottom. Adjusting the timing of the prompt and the hint, and their positions respectively.

Eventually, we decided to leave it as the way it first was but adjusted the timing of when the hint appears so the user would still be able to see the prompt and the hint at the beginning and once they started typing, all the rows of the text that everyone in the chatroom send would still be in the view without scrolling.

Check out our codes for web sockets and Unity!

‍

TAKEAWAY

Human Dynamic Could be the Hardest Thing to Design.

Our show at West Chelsea in December 2019 was a success. Some people told us they got to make new friends and even added each other on Facebook. Some told us it was their favorite projects among all the other in the Big Screens Show 2019 as we were thinking the hardest on the interaction element, attempting on creating a meaningful social experience rather than a passive viewing experience.

Expect it to be a mess, and design around that.

was a very powerful advice we got from Mimi Yin, an artist and designer, as we consulted and getting feedback from her on our experience and technology feasibility. That was very impactful on me, cause at the beginning we were trying very hard on designing every details and wanting everything to go perfectly. However, what she told us was that "Don't try to manage everything and think that it would work perfectly. It will be a mess. Expect it to be a mess, and design around that. That was how we got to think more realistically and started to let go more stuff and let it be an experience itself as it flew.

The biggest caveat was that due to the time limitation we were not able to develop more interaction between screen (big screens) to screen (smartphone screens). If there were more time, having what was marked as skipped in our walkthrough of experience would help foster more interaction between the audience and the screen. Yet, we still would have to think hard on how to direct the attentions of our audience, from the small screens to the big screens eventually to off screen while building bonds with each other, and how to or whether to redirect their attention back to the small screens or the big screens.