top of page

JOYS OF BEING A SCREENSAVER

DURATION

November - December 2019, New York

TEAM

Cezar Mocan

Danqi Qian

KEYWORDS

Experience design,

Physical computing,

Multi channel video,

Installation

ROLES

Concept & Experience design,

Physical computing, Visual & Video design

TOOLS

Arduino, OpenFrameworks,

Ps, Ai, Ae

illustration_画板 1.png

01 Design Overview

Have you used a rotary phone recently? I guess no. Yes, we don't use it any more, wo don't even use fixed line telephone. But rotary dial pad is so pleasing and fixed line telephone carries so many past good memories.

Joys of being a screensaver is a 6-weeks multi-disciplinary design project which includes: experience design, physical computation, usability test, user interview, visual communication design, and video editing. 

The project is an interactive installation featuring four video channels and a rotary phone. By extending the rotary phone’s function of connecting remote places, the installation invites you into a playful dialogue between the physical space and the digital one. 

Team Contributions

We all participated in brainstorming, user experience research, user interview, interaction design, prototype design, video filming, video setting, usability test,  installation setting.

Danqi Qian(Me): Rotary phone working system, Physical Interaction, Rotary phone visual instruction design, Video editing

Cezar Mocan:  Video programming with OpenFrameworks, System communication, System Schematic, Hardware technical support

Physical Computing Course Advisors: Tom Igoe, Daniel Rozin, David Rois

team_contributions.jpeg
overview
user experience
ideation

02 Ideation — Old rotary phone is beautiful in every way

The original idea first inspired by Cezar's midterm project about regulating radio waves to find ghosts in a haunted box. I love the experience that I received various unexpected feedbacks when tuned to a certain radio wave, because it gave me a feeling of talking to an unknown world privately.

 

1. Fixed line telephone connects remote places

That's why I brought up the idea of conversation with digital world, naturally thought about using fixed line telephone. Unlike smartphone connects people, fixed-line telephone connects remote places, either one-to-one or one-to-more. With two environments connected, we have plenty of room for creating an experience carries an abundant system.

2. Fixed line telephone connects two target people

​Besides, fixed line telephone can also recall past memories for people have used rotary phone before, also arouse curiosity for people never use rotary phone before, like millennials. This builds bonds between two targets people, who are also targets viewers for itp winter show.

3. Rotating dial pad is simply pleasing and satisfying

Simply, rotary phone provides a pleasing and satisfying interaction with dial pad among all fixed line telephones, which is our main installation interaction. We want to emphasize on this and encourage viewers to rotate multiple times.

CONCLUSION: Talk to digital space with rotary phone

Therefore, we decided to create such an experience that allows viewer simply rotates the dial pad but can receive rich and unexpected feedback from digital space. To rich the experience, we play with the digital space, as a way to have the person inside the screen drives viewer crazy, as well as the viewer driving the virtual person crazy from the regular simple interaction. 

Design Challenge

HOW TO invite viewers to pick up the phone and repeatedly call out ?

Brainstorming

Solution 1 — Set up something urgent to happen in a scene

For the first week, we designed several directions to reach our goal for invite viewers to pick up and call.

Mainly, we set up something to happen in a scene to urge viewers to pick up, and give something explorable to encourage them to call out multiple times.

Direction1: To make people frustrated

At the very first beginning, we believed that when we do not meet viewers' expectations and give them a reversed negative feedback, people would want to know more about why, that makes repeated actions happen.  

[01 PassiveState] It’s about the scenario when you really about to reach someone, but you still lose them eventually. On the screen, virtual character wants to be woken up at 3pm for some important meeting(to invite viewers), but she is really sleepy.

[02 Whispering] It’s about when someone whispering at you, you pick up the phone trying to know the content, but she just hang up, which is really annoying.

Direction2: Harvard sentences poetry

Harvard sentences are a collection of sample phrases that are used for standardized testing of Voice over IP, cellular, and other telephone systems, absurd but poetic.

For each phone number, viewers will receive a random poem related to each digits.

03 Iterations 

First Playtest

We mainly focused on the emotional reaction and to make sure people understand the story.

We asked our players:  What makes you want to dial, call back, refuse/not pick up the phone?

                                         How do you feel when she hangs up on you, when you saw she whispering at you..?

iterations
WechatIMG137.jpeg
first_playtest_1.jpeg

Feedback & Observation

Users evaluated our installation as fun but confusing, because:

1. Most people couldn’t understand what is happening

2. People didn't understand why they need to pick up and call.

3. Due to linear story, people wanted to control something and communicate with virtual character.

4. People felt offended been hanged up, and rejected to call back due to characters’ negative facial expression.

5. The environment was loud, people can’t really hear audios clearly.

6. 70% users didn’t know how to use rotary phone but they are really curious about rotary phone.

7. People thought 10 digits phone number would be too long. Anticipation and expectation raised because they need to dial and wait for a long time.

​8. It's a little tiring to dial and check phone numbers at the same time.

Modification
Based on our observation and user feedbacks we retouched experience flow and interface designs. 

1. Instead of specific scenes, write a new story with progressive plot and emotion changes.

2. Virtual character will first call out naturally as an invitation and give some instructions.

3. Every time you call, virtual character would tell you a personal fact about her.

4. For first 2 phone calls, virtual character would give positive feedbacks to avoid viewers leaving.

5. Add a light bulb as a notification for incoming calls

and video subtitles.

6. Give a visual printed instructions near rotary phone about how to use dial pad, receptor and reset button.

7&8. Change it into 3 digit number. 2 digits are 0-5, 1 digit is 5-9 to ensure programming go smooth.​

Second Solution — Involve in a progressive story goes on with phone calls

Based on first playtest result that most people confused, our goal for iteration was to ensure viewers know why to pick up and call.

1. Write a new story with progressive plot and emotion changes.

So we decided to film such a story to help understand:

Jane, a girl stuck in such a setting with many lights for a commercial scene about the phone. Her duty is to pick up every call from real world though no one cares if she's willing to.More calls been made, virtual character becomes more frustrated.

Initially, we planned to film in 4 different closed environment to show virtual character is stuck in different scene in one universe. Due to the limitations of hardware setting and time, we had to leave that part behind and use green screen instead.

2. Virtual character will first call out to real environment and give some instructions.

& 5. Add a light bulb as a notification for incoming calls and video subtitles.

She would delightfully first call out real space as a invitation for viewers to pick up. Due to noisy backgrounds, we added a light bulb connected to phone ringer, serves as a notification for incoming calls. Both virtual and real environments have the same light bulb with same function.

When user picked up, then she gives instructions and explains that:

1. She can see viewers but cannot hear them.

2. She is shooting a commercial, she can't stay long on the line.

3. Each time she picks up, she will tell listener a personal fact.

4. If you have never used a rotary phone before, please first check printed instructions near the phone.

4. She expects viewer to call her back.

3. Each phone number represents a personal fact about virtual character.

& 4. For first 2 phone calls, virtual character would give positive feedbacks to avoid viewers leaving.

1. (*happily*) She loves lights, but hates them when they are on. So viewer calls, she would hang up eventually.

2. (*numb*) That's because she wants to become a vampire.

3. (*frustrated*) So she could leave the stuck universe and stop answering meaningless phone calls

6. Give a visual printed instructions near rotary phone about how to use dial pad, receptor and reset button.

iteration_shooting.jpeg

Demo video for iteration

Filming setting

danqiprint_画板 1.png
1461578552308_.pic_hd.jpg

User Interview: 3rd Solution — Receive entertaining feedbacks when calling in.

For our second playtest, our main focus was:

1. Make sure if people understands the story and reason to pick up and call.

2. Interviews on visual experiments for background images.

Screen Shot 2020-01-09 at 12.54.04 PM.pn

#1 Outdoor environments

Screen Shot 2020-01-09 at 12.54.16 PM.pn

#2 Indoor dark environments

Screen Shot 2020-01-09 at 12.53.52 PM.pn

#3 Abstract gradient colors

Screen Shot 2020-01-09 at 12.54.25 PM.pn

#4 Classic desktop wallpapers

1451578546204_.pic.jpg
1441578546203_.pic.jpg

Feedback & Observation

For this time, people didn't confuse about the basic story any more, and they understand why to call back.

1.Whole experience required more than 3 minutes.

People always wanted to know more about the whole story. However, we found a big problem that each viewer already spent around 3 minutes for entire experience, so near one-third classmates didn't get to try. And to some degree it bored viewers as it went longer.

2. Prefer #4 classic desktop wallpaper backgrounds

For other 3 series, they knew it was premade. But for desktop one, they became curious and wonder it is a real desktop or not.

3.Millennials easily dialed wrong numbers

They are not familiar with rotating dial pad.

4. Same telephone confused people

In real and virtual spaces, it's the same telephone. Viewers are confused is it the same space?

Modification

We retouched video content and user experience.

1. Provide extertainning feedback instead

Since continuing to write a compelling story line, it would only makes whole experience longer.

We decided to give funny feedbacks instead of progressive storyline.

2. Adopt an interactive entertaining screensaver

Content related to operating system, like screen-saver, would be consistent with screens. So we decided to use an interactive amusing screensaver instead of a story.

3. Refine user experience: feedback for wrong numbers and repeated calls

We thought it's necessary to add feedbacks for wrong number actions and repeated call actions.

4. Paint telephone

I painted the telephone pink.

Click to enlarge 

action_2.gif
action_4.gif
action_3.gif
action_1.gif
Entertaining Actions
We filmed 4 absurd funny actions.
Classic Windows XP Desktop
We adopted 4 classic windows XP operating system desktop. And we set phone number as their names.
Bliss(BLS)  285
xp-bliss.jpg
Autumn(ATM)  286
xp-autumn.jpg
Auzl(AZL)  347
xp-azul.jpg
WIND(WND)  836
xp-wind.jpg
Repeated Call Feedback
Virtual character will say 'No, call me in that number', and point at one screen randomly.
 deny_ash_bls_left.gif
 deny_ash_wnd_middle.gif
 deny_ash_atm_right.gif
Wrong Number Call Feedback
If a wrong number detected, a wrong call feedback will appear on previous screen.
deny_wrong_atm_1.gif
deny_wong_bls_3.gif
dent_wrong_auzl_2.gif

04 User Experience Design

User Flow

I summarized user interaction flow after we discussed about design elements and main interactions.

Desktop HD.png

Storyboard

With the user flow, I combed through the following scenario.

storyboard_画板 1.png

[VIRTUAL] Virtual character would dial and call out.

[VIRTUAL] The installation is in idle state for 10 seconds.

[REAL] Viewer enters. Light is on and telephone is ringing.

[VIRTUAL] Virtual character hangs up and leave.

[REAL] Viewer hangs up and check instructions then.

[VIRTUAL] Virtual character will guide and say, 'Hi, I'm so glad you picked up. I'm your screen saver. I can see you, but cannot hear you. If you never used rotary phone before, please first check the instructions near the rotary phone. Please call me back!'

storyboard#2.png

[REAL] He dialed wrong number.

[VIRTUAL] Light won't be on, phone won't be ringing.

[Virtual] Then she leaves.

[VIRTUAL] Then she hangs up and leaves.

[VIRTUAL] Virtual character gives gesture feedbacks to alert you just dialed wrong number.

[REAL] Then viewer dials and calls to second screen.

[Virtual] She gives funny feedback #1.

[REAL] Then viewer dials and calls to second screen again.

[REAL] Then viewer dials and calls to second screen again.

[REAL] He dialed right number.

[Virtual] Light on and phone rings.

[Virtual] Light on and phone rings.

[Virtual] She won't pick up and ask you to dial another screen.

[Virtual] Then she hangs up and leaves.

[Virtual] Light on and phone rings.

[REAL] Then viewer dials and calls to third screen.

[Virtual] She hangs up and leaves.

[Virtual] She gives funny feedback #2.

[REAL] Viewer leaves too.

[Virtual] She gives funny feedback #3.

[Virtual] Light on and phone rings.

[REAL] Then viewer dials and calls to forth screen.

[Virtual] She hangs up and leaves.

technical process

05 Technical Process

We mainly used rotary phone, arduino, openframeworks, 4 screens, 2 laptops. I took the lead of physical parts of our projects. Cezar and I worked on getting digits from dial pad together, and he also gave me a lot technical support.

1. Get digits from dial pad

We followed some tutorials and found the dial pad is connected with 4 cables: 2 white, 1 green, 1 blue. Actually, there are two switches inside dial pad, one normally closed ready switch to alert the telephone to change number, one normally open pulse switch to generate the same number of pulses of number dialed.

2. Hear dial tone from receptor

I added a normal speaker fitted receptor size, and connected it to ground and positive to original speaker pins, so that it connected to the phone with original curly phone cable. For testing, we used headphone adaptor to laptop instead.

3. Reset button function

We found 2 connected cables with multimeter, so we used it as normal two cables of pushbuttons to get digital signals and added with pull down resistor.

4. Ring without telephone connection

The rotary phone does have an original motor, however it is driven by 60V. So we added a vibration motor between the ringers.

5. Turn on and off  AC bulb with 5V relay

We followed a tutorial, to cut one wire of bulb and insert both sides to relay.

Screen Shot 2020-01-08 at 2.55.54 PM.png
未标题-4.png
Screen Shot 2020-01-08 at 3.18.03 PM.png
relay-open.png
winter show

06 Winter Show

We presented our project at 2019 ITP Winter Show, around 100 people tried our installation.

Here's some photos with their permission.

未标题-5.jpg
reflection & next step

07 Reflection & Next Step

Next step

Some said, I wish I can literally talk to her or she can response a little to my words. Actually, voice recognition was the thing we wanted to avoid at the beginning, because we prefered to focus on the interaction instead of technology and also time was tight. However, I didn't know there was such much people brought this up. I think this could be in very beginning part of the experience that, when viewers first pick up receptor, virtual character would response to the first sentence they said to surprise them.

Reflection

Our three advisors, Tom, Danny and David inspired us a lot, our vision became larger after every time we talked. Besides, working with Cezar was also a big pleasure. Though we came from different backgrounds, Cezar has good sense in art and design and he is very supportive in everything. I had learnt a lot from working with him, from cleaning up breadboard wires to setting up everything in the show. Most importantly, he is truly solid in programming.

This project also raised my interest in combinations of digital and physical interfaces, like artist Neil Mendoza did, I hope i can try more in this field.

SEE MORE WORKS

Telemedicine

Service

CityCare

UIUX

fengm -01_edited.png
fengm -01_edited.png

Intestine Health

Record App

Pooro

UIUX

Rotary Phone

Installation

Joys of being a screen saver

Experience Design

Interactive Meme

Fluffy Fairy

Wearable Device

Hand Shadow Game

SHADOW

Experience Design

Vent Anger

Installation

Mad Clinic

Experience Design

Hakka Style Visual

Tulou

Animation

bottom of page