For web: Volley imagined 

For Xbox/Kinect: Volley imagined 

Last summer, I interned at Microsoft Research at the Future Social Experience lab (FUSE). Working with design mentor Richard Zaragoza, I spent 3 months intensively brainstorming, conceptualizing, designing, and pitching a concept for an online collaborative animation app called Volley. A year after my summer’s work, I can finally openly talk about my project which I just recently presented and published at CHI 2012.

Inspiration for Volley
Users are increasingly empowered to produce visual content by a proliferation of online tools to create, publish and share within online communities and social networks. Despite the popularity of websites that showcase animated GIFs – where users can crowd-source images to build from, upload their works, rank or comment – the act of animation building has not migrated into these social communities. The creation of animated content – even in simple animated GIF form – is not considered available to a mainstream audience and is considered something that users, savvy in graphic design, photo editing, or illustration, would do.

Design Challenge

So, can animation building become accessible to a general audience if it becomes a social activity?

Collaboration in animation is rare due to logistics and skillsets. Current computer setups and animation workflows do not encourage group work. Users use proprietary software (Photoshop, Fireworks, etc) for image assembly and animating, store files offline, and are not incentivized to share works-in-progress.  Skills-wise, collaborating users must be dexterous to coordinate and manage their files online, have compatible animation proficiency, and communicate with each other to produce progress. Creative collaboration is stifled as a result of these challenges.

We address these gaps by presenting Volley, a proposed framework that enables creative collaboration of animations.

The main contributions of our work are to:

1. Design a composer for interactive animations
2. Support user interaction
3. Outline an open community environment where visual and animation works can be tracked, attributed, and supported.

Design Framework

To enable content creators to collectively build an animation, we outlined core goals of how Volley would be designed and built. These core goals evolved from a small series of interviews that took place with four target users who are involved in GIF animation building. These users range from a hobbyist to a professional. Findings will be elaborated below.

1. Make It Simple: Minimize barriers to content creation by reducing the cost of learning and using the interface.
2. Be Engaging: Build social support and a variety of participatory roles into building, sharing, and publishing aspects.
3. Hub for Discovery: Make finding new animations and pictures easy, sharable, and responsive.

Make It Simple.  For users to quickly start making, the interface has to have a low threshold for cognitive learning. The act of animation building is, in itself, a list of actions with visible outputs. The intention is to chunk the animation process into a series of smaller steps. This will guide users to think about their actions in a step-by-step methodical manner.

The user interface is fluid and dynamic for a natural behavioral feel. Users can drag-and-drop pictures, shuffle, stretch, and drag animated objects. It is intended to give immediate visible feedback to users. The toolbar is a radial menu to help users to quickly navigate to frequent actions to take. Two panels occupy the screen: an animation timeline and a picture library. Both can be minimized so users can gain more screen space to concentrate on specific tasks when not in use. Also, animations are stored so that the file, and all attributed pictures and animated objects, can be viewed and used by every invited member during its editable state. A majority of the interviewed animated GIF users prefer Photoshop, an image editing application over animation software due to its simple design that lets them quickly output animations.

Be Engaging. Reduce user apprehension to creation-making by building multiple entry points for participation. Allow users to assume different roles. Let users tag each other in cases like: start an animation project, find and share pictures that may be of interest to others, or share animated objects from other projects started in Volley. Users could riff on a published animation and remix it. This reduces the burden or anxiety of creating something from scratch.

One interviewed user, who makes animated GIFs as a hobby, noted that he rarely saw collaborations in the animated GIF world. “Sharing is easier than making [something],” he said.  Another interviewed user, an artist, remarked about the feeling he had when he posted his work on an animated GIF showcase site (Dump.fm) and saw his animated GIF reworked and posted afterward. “When your GIF gets remixed, it’s an interesting moment. It’s different from someone that chats you up [online]. It’s collaborating with people you’ve never met. [It] totally gives you a sense of encouragement. People will only remix your stuff if they like it,” he said. Another interviewed user remarked, “[The animated GIF community] is a riffing culture. Constant one-upping because you can bang this stuff out really quickly. It’s for the LULz. We just really do stuff to see what we can get away with. It’s for fun.”

Be a Hub for Discovery. Published animations are stored so that users can see a personal archive of their work and of others. Interviewed users agreed that is a key aspect of viewing their stored work online. An animation would be listed with a family-tree view of attribution from pictures used in the work, collaborators listed, and further iterations – remixes – associated. This was made explicit to address a key concern by a GIF animator artist who wanted clear attribution to their work and being properly sourced to their original version. “People get upset when their GIF was posted and it wasn’t linked back to their blog. It’s a sense of wanting to be identified with your own work.  People will be happy to be remixed but they want the credit too,” she said.

Aside from creation making, users can surf the site for inspiration by seeing the community’s work. All animations and pictures used would be open for remixing. As a benefit, users should see a history of their animated work and offer feedback.  Users can “like” an animation, follow or be followed by others, remix an existing animation or share it in other social networks or websites.

An interviewed user, a member of an animated GIF artist group, agreed with this sentiment. “The most common incitement [for us] is the re-tweets, the [tumblr] posts, and the analytics. We have had people remix our own [animated] images. That was the pinnacle of recognition for us. Even if it was a nobody doing it — that person — we didn’t know them. It was just having them be inspired and spending time with it and sending it back to us. It’s [more meaningful] because they spent time with it.” he said.

Notes

Volley is a different approach from traditional animating applications. With the web, community crowd-sourcing and user contributions can help build a library of visual content (pictures, animations, etc.) that can be dynamically used, shared, and attributed. An  important distinction from prior works is that socialization could occur before, during, and after content-creation.

Read my CHI paper:

VOLLEY: Design Framework for Collaborative Animation – Short Case Study

After 2 eventful years in the Big Apple at one of the nation’s technologically advanced graduate program, I finally finished. Published the thesis, presented my research, and now I’m packing my bags to head to Microsoft Research as a summer design intern in Fuse Labs. But, this blog post, isn’t really about that. It’s about finally taking the time to think about my time spent at NYU ITP: how I got here, what I got from this helter-skelter ride, and thanking the people who’ve helped me.

Sheer F@c#king Stubborn Streak

First, I’d like to thank all the people who dealt with me in adversity. From family to coworkers to school mates, I’ve had people tell me to my face that I couldn’t do something because of my appearance, what my background was, and/or my circumstances in life . The more they said, the more hellbent I became in proving them wrong. Sometimes that’s not healthy, other times it became a survival instinct to get me through the day.

What do you do when you’re smaller then your enemies? Plot. Think about what you don’t want to be in life.  Stay mentally hungry, set ambitious goals, listen to your intuition, don’t follow the crowd, and be empathetic to others – these were all good things that came from that personality quirk I developed and sharpened.

Success really is the best revenge.

Build a Bucket List

It took 2 close deaths in my family to make me wake up from an apathetic job, take a look around, and decide that life was too short to not set higher goals for myself. In my teens, I didn’t think I’d live to see age 30. In my 20s, I started developing a bucket list of things I wanted to do before I turned 30. Even at age 27, I still wasn’t sure if I wanted to see age 30. I kept adding and subtracting things to that list. Now, I’m on the eve of turning 29.

The act of building a Bucket List makes your goals feel more tangible and by placing an age right next to it, it felt like putting a gun next to my head. It builds a sense of urgency, immediacy in my achievements, and honed what was necessary and desirable. It kills mental fog.

This quote by Karl Lagerfeld summarizes my feelings best.

“The worst thing is when friends say, ‘Remember the good old days?’ Forget about the good old days! That just makes your present secondhand. What is interesting is now. If you think it was better before, then you might as well commit suicide immediately.”

Being in New York

The culmination of this mental mindset created an interesting set of challenges at ITP. Surrounded by ambitious classmates, a hectic city lifestyle, and an overwhelming set of new skills I had to learn in a short amount of time (coding? physical computing? user experience?), I quickly was overwhelmed. Was failure acceptable? Not really because of how I was wired from what I wrote just above. However, I learned to accept failure as part of process and learned not to fear failure in itself. There’s a reason why in my grad school application, there’s a question my program asks which is “What is your biggest failure in life?”

When people ask me about my experience at ITP, I tell them jokingly about my first day at school and how my graduate advisor, being helpful and dead serious, told me that my health was more important then anything in my life – and that the mental health counseling services were right across the street. He was right though. In tackling graduate school full-on, I took my share of hard knocks, mental breakdowns and sought professional counseling. If anything, it’s made me more realistic about my goals, re-calibrate how I pace myself, my abilities, and what I considered my own self-satisfaction versus what predetermined paramaters of success I had established previously.

Play is important. Be fearless in your ideas. Ask for forgiveness later. Have fun.

Thank you NYC and ITP. I can’t wait to see what is next.

Doki Doki Dash is my thesis idea that I conceptualized in Jan. 2011., a culmination of my final work at NYU ITP that touches on mobile, gaming, and social/skill play. It’s a prototype of a mobile fitness app that uses a mystery game to get players outdoors, solving crime and getting fit. In the game, players become detectives in accepting crime cases, gathering clues and hunting criminals. Doki Doki Dash’s storyline is propelled by the player’s physical movements – as the players get more active in movement, the more the game rewards them by propelling them down the mystery trail – and further into the interactive game.
[Visit dokidokidash.com for more info including my thesis paper]

During my thesis process, I really enjoyed the conceptualizing and heuristic (experiential) research that went into realizing Doki Doki Dash. A few things I learned:
1) Designing stuff for play is really, really hard.
It’s okay for things to fall splat, when things aren’t fun in reality. Play test, play test, play test.
2) Users can surprise you, be flexible to adapt.
My original concept was to build this “Little Prince”, help-space-boy-back-to-his-home-planet. Then, after sharing it with people, no one really connected with it. So it got dropped in favor of my crime-detective narrative doing character design and set designs from scratch.
3) Show, don’t tell. Designing new interactions around exercise / gaming / social interactions can be abstract for non-gamers. Video concepts is super key to showing people your vision.

Initial Screens: Receiving a new crime case, setting initial Pace in pursuing criminals, activity screen for users to see when in motion.

Game Mechanics I: Interviewing in-game characters, searching for locations where events take place, trailing criminals

Game Mechanics II: Clue-gathering, checking into physical locations, chase and pursuit

Game Mechanics III: Fingerprint scans to submit completed cases (which are really capturing a player’s pulse to gather exertion data)

Game Data: User’s progress, point in game storyline, multiplayer view.

Zombie Caller is a phone game where the player’s voice powers their zombie to eat brains on screen.
Players call into the on-screen phone number. Once connected, players can speak into their phone, preferably moaning “BRAAAAAINS!” to help their lil’ zombie cross the screen, gobbling brains. Say “BRAINS” slowly and the lil’ zombie slumbers across the screen. Scream “BRAINS!!!” and the lil’ zombie jumps to nab the brains. Collect all brains to win the game!

Zombie Caller is powered by Asterisk, Megaphone SDK, and Processing (Eclipse). It is my final project for Chris Kairalla’s Redial Class at NYU ITP.

Process:
Zombie Caller was inspired by my love of zombies, public spectacle, and gaming. I was really motivated to hear people’s best impersonation of a zombie, whether it was hearing “ARGHHHH” or “MRRGHHHH” or “BRAAAAINSSSS.” I kept the design super simple to work on the code. Plus, I wanted to test Chris’s Megaphone SDK and see how we could use voice (volume, pauses, and duration of sound) to game.

Coding
Why, I decided to tackle Processing, another coding language, in my last semester/weeks of grad school, I don’t know. I give thanks to Chris, Meredith Hasson, Steve Aquillano, Frankie Cheung, and Aaron Urmacher for taking my endless questions about Processing/Eclipse/Megaphone. The Megaphone SDK was a breeze but the tricky part was establishing the brain and zombie as objects and calibrating their on-screen animation. Plus, I could’ve fiddled forever trying to map the right audio ranges to cue movement and jumps depending on caller voice input.

I set 3 ranges in the voice interaction.

• Audio levels below 50% of the established volume spectrum would keep the zombie motionless. That way,  the Megaphone SDK wasn’t just picking up random ambient background sounds and jerk the zombie around.
• Audio levels within 50-75% of the established volume spectrum would cue walking. This makes sure players’ worked on their voices.
• Audio levels that were 75%-100% of the established voice spectrum would trigger jumping. However, I established a boolean value to insure that players wouldn’t endlessly abuse the playing by mindlessly screaming into their phones. After a super-high voice volume is detected for more than 2 seconds, the game resets the zombie to ground level.

Left: New User prompt by in-game character, the Big Chief. Right:. Set initial fitness actions, choose to start out walking or jogging.

Here’s a series of snapshots of my app under design, Doki Doki Dash.

Thesis abstract that’s under development:

Doki Doki Dash is a mobile fitness game app that uses a mystery to get players outdoors, solving crime and getting fit. In the game, players become detectives in accepting crime cases, gathering clues and hunting criminals. Doki Doki Dash’s storyline is propelled by the player’s physical movements – as the players get more active in movement, the more the game rewards them by propelling them down the mystery trail.

As a mobile application, Doki Doki Dash takes advantage of the smartphone’s geo-location sensors to trigger events based on the player’s physical activity and location status. Doki Doki Dash attempts to provide a gaming interface for personal fitness that rewards players for their curiosity and also takes advantage of a player’s neighborhood space. The result is a concept fitness game application that centers arounds exploration, social play, and a fantasy world set around a user’s real-world environment.

The study of persuasion technology and fitness activity routines is a large field populated with researchers studying motivational behavior and user participation. However, this paper will highlight the user experience challenges faced in current fitness applications and how that feedback resulted in the creation of Doki Doki Dash.

Left: Player makes in-game decisions. Right: Activity screen when player is in motion (provides stats + music player).

Intro:

The field of mobile health is exploding with new devices and applications geared to monitoring people’s physical activity. From a technology standpoint, there are many devices and programs geared toward the aspiring fitness buff. But, what about other users who don’t fit that profile? How do we get the non-exercisers involved?

From that social perspective, researchers are studying how persuasion technology may impact people’s attitudes and instill an active lifestyle. Health promotion programs designed to increase physical activities have placed a significant emphasis on techniques to maximize a person’s motivation to become active. However, the research attention has focused on educational concepts (informational) versus the emotional compulsion (enjoyability) to desire exercise. A few researchers have argued that the “major reason for the very limited success of physical activity interventions is that they failed to consider the experiential aspects”.

[..]

Left: Game tracker that marks progress, time, distance and actions. Right: Player profile.

The purpose of my thesis is to make exercise more enjoyable for the non-fit by bringing gaming outdoors. In order to make fitness effective, make it fun for players. So, why not turn fitness into a game that rewards real-world physical activity?  The explicit goal of Doki Doki Dash is to get players to nab criminals. The implicit goal is to get players to be physically active. The storyline directs characters to hunt around their neighborhood on their running/jogging/walking routes.  It imbues a solitary activity, like running, with a social component to connect others within the circle of friends or neighborhood. Throughout the player’s journey, the game is helping them build behaviors and routines that slowly increase their physical fitness. By combining familiar elements like mysteries

(Where in the World is Carmen San Diego) to fitness apps (Nike+ GPS) to geo-location (FourSquare), Doki Doki Dash could introduce a fitness activity that’s more enjoyable for the exercise-adversed because it is a game rather than an exercise tool. This paper will highlight the user experience challenges faced in current applications and how that feedback resulted in the creation of Doki Doki Dash.

Left: Geo-location capabilities of smartphone can trigger in-game events, alerting players based on their speed/location proximity. Right: Map view of player to the next in-game destination.

So, what is Doki Doki Dash?
Imagine a mystery game but instead of hunting criminals on-screen, your detective skills pay off by pounding the pavement, literally.
Doki Doki Dash is a mobile exercise game I am designing for my thesis at NYU ITP. It’s a crime-solving game meets exercise app.

I want to inject a sense of play and social interaction for like-minded people interested in gaming for exercise.
The purpose of my thesis is to bring gaming outdoors and make exercise more enjoyable for non-fit gamers. It’s important for me to make the game graphics be playful, fun, and not-too-serious. I think that in order to make fitness effective, you have to make it fun. So, why not turn fitness into a game that rewards your physical activity?

In drawing the game characters, I wanted something fantastical,  zany, and colorful. Alot of the characters here are villains in a crime syndicate ala Where in the World is Carmen Sandiego. I drew everything in Illustrator.

Spending a Sat evening listening to this webinar: How to Design and Prototype for Mobile Devices led by Amir Khella and Josh Clark. I decided to jot my notes that I found really interesting from a user experience/product design focus from this 80-min. podcast.

Mobile Design Context
What is the STORY OF YOUR APP?
What FEATURES will drive your users to desire your app?
What is your app’s PERSONALITY?
Who do you want to be to your users and MAKE THEM FEEL?

From Josh Clark:
There are 3 diff mindsets that people are in when launching app.
Micro-tasking.
Devices of convenience and context. Things you do in between routines. Grocery line, to-do-lines. Distracted environment. You have to anticipate quick dashes of activity.

Local.
What’s nearby? What’s in front of me? Map pattern to show whats around us.
Compelling/interesting way sensors are being used that we can think of this more subtly? Shopper, grocery app. Reshuffles grocery list depending on what store you are at. Subtle intervention that can help your situation.

I’M BORED
Reality is, we aren’t always productive with these mobile devices. We are turning to our phones for entertainment. Software as entertainment is new for the mainstream (exception: geeks, YAs). The web started this notion and is sealed by mobile. Personal collections of software as content instead of tools. A lot of people think of their apps on their phones as almost like accessories instead of the phone yourself. The apps that you have on your phone say as much about you as the things you keep in your bag or on your office desk.

On the other thing, you have micro-tasking (15 sec and you’re out) and when you’re bored (several minutes to an hour). Lose yourself from the tedius environment you find yourself in. There are opportunities to get people to slow down/lose themselves in the world. Productivity apps give you a lot of data for you to explore (self-stats) like an exercise journal or a to-do list. My story of my accomplishments/aspirations.
Help people get stuff down quickly and on the other hand, give them an opportunity to slow down and explore things through data.

Process your app idea.

THINK of DEVICES FEATURES.
DESIGN.
SKETCH.
USER TEST.

BECOME AWARE OF THE FEATURES that changes the user application. Design itself isn’t the compelling thing off the bat.
Be completely expansive. Before you sketch/code, PUSH that idea. Think big. Pour in all the unicorns and double-rainbows. Pick the best idea out of all of them. Slaughter the rest.
Whats the 1 thing I want to help people be awesome with?
Be small/focused. It’s a distracting environment. Mobile apps are also small utilities that work best FOCUSED.
What’s the minimum you need to do to help them be awesome?
1x you have that, you can go and think about the DESIGN OF THE APP.
Think about the personality of your app. WHo do you want to be to your users and MAKE THEM FEEL?
Warm/reassuring? Business-y?

That helps a lot of design decisions.

User Testing
People may not know the appeal of a new thing that hasn’t been done before. Be careful. Understand their needs. Not how they want to do it. When you blaze new trails, users aren’t always as imaginative because they haven’t thought about it as much as you have. Whether or not to listen. Its a matter of understanding people’s needs/wants and what they can do better. It’s more about WHAT they want to do rather than HOW they want to do it. The designer figures out the HOW.

Wow, amazing what what 2 weeks can do. I came up with my thesis name, refined my game concept, started banging out a user experience flow…meet  my thesis, Doki Doki Dash! (Website is pending).

I decided to revise my thesis concept on 2 points:
1) Focus on the game/user experience over coding.
I’d rather spend more time designing the game and creating an initial demo than trying to bang (my head) with figuring out Corona at this point in the game.

2) Changing the game focus from a space-fantasy to a real, crime-solving mystery game. Think Clue or Where In the World is Carmen San Diego?

By shifting the game into more familiar territory  (everyone’s familiar with mysteries/crime-solving), it became alot easier for me to navigate and plot the game storyline. Plus, it allows for a more social experience as you interact with in-game characters (crooks, witnesses, your boss) or with other players (fellow detectives). The idea of leveling up is similar to working your way up in a detective agency (Agent, Detective, Inspector, Chief).

For my midterm, I focused on a tight keynote presentation that showcases the mobile app I’d like to eventually create.
User starts up the game, signs up, starts off the mission, is given a choice of actions to make, repeat.
Here are some screengrabs from my post.

Last semester, my team and I proposed and pitched an emergency mobile health system to the Unicef Innovations team. Stemming from NYU’s ITP coursework, Design for Unicef, we examined the issues of mobile health from the framework of emergency humanitarian deployment. The result was:  Code MAMA (Mobile Assistance for Medical Aid) is a mobile outreach service aimed to reconnect community health workers after major disasters strikes. Research shows that NGO organizations need easy communication tools to quickly reassemble  and assess their staff/volunteers after emergencies. Code MAMA aims to provide an easy telecommunications tool kit.

However, in our first iteration, we had defined our user audience and how we wanted to craft our solution to them : pregnant women. Our initial idea we called Project MAMA (Mothers Acquiring Medical Assistance).Here’s our project proposal outlined in our presentation, above. Code MAMA is a mobile outreach service that aims to connect pregnant women to a network of health professionals. In humanitarian disasters, displaced people are (hopefully) relocated to refugee camps where aid workers distribute food, shelter, and medical aid. For this vulnerable population, we wanted to know if there was a better way to target medical aid for pregnant mothers.

After conducting research into mobile aid field and talking to Unicef, we ended up steering our case toward helping aid workers who cater their work to helping pregnant women.

Challenges that steered us away from our initial concepts:
* People spoke to us about the challenges of targeting women in the developing world due to reading literacy, technology literacy (ability to use phone SMS), and whatnot.
* We had seen some interesting projects that tackled those issues through ChildCount+ and Project Mwana.
* Deployment of people-labor (medical staff/volunteer counselors on board to answer questions from pregnant women in camps).

Was it the right decision? Some people in my team really, really liked our original concept. I liked it. This was a hard decision for my teammates and I to make. The users were compelling and the amount of relief we thought we could give to this audience we thought was very utilitarian. However, for post-disaster humanitarian bang for buck, we ended up shifting our ideas into another realm. So we revised, we pitched our idea and that was the end of the story as we thought.

However, I’m happy to see that the seed idea of Project Mama has lived in others. I was looking at my Twitter stream and found this from my news feed.

Jordanian Health Program Connects Bedouin Mothers With MDs via FastCompany.

“SOHITCOM (Social Health and IT for Rural Communities) is a health initiative that connects rural mothers with competent doctors via mobile phones in an effort to overcome literacy and other social barriers. The service, in development for more than two years and available in five areas, is now gearing up for national expansion.”

Progress this week:

Game Research
- Interviewed two leading game designers, Adam Simon and Michael Dory of SocialBomb about my thesis idea. They led me to check out Nike’s The Grid and further inspection of Area/Code’s games and other outdoor games created by ITPers.
- Continued adding to my thesis bibliography by researching user motivation (and measurements) related to fitness games in peer papers. Also kept reading Jane McGonigal’s Reality is Broken and Greg Trefy’s Casual Game Design, both excellent reads. So far, that makes 8 points in my bibliography.

User Research

- Created a game simulation in Keynote that used scenario-questioning to lead test users through an interaction prototype of mobile fitness game. Goal: Create a simple game mechanic that rewarded/encouraged user’s chosen actions. Rough wireframe interaction, just basic design. Screen grabs included in the post.

Ex A: You are half-way to helping the main game character, Character A, to achieving his 1st mission. Halfway through, another character, Character B, pops up and asks you to help them. Either you can achieve it through:

A) Running for 12 Min

B) Walking for 25 Min

Ex B: After helping Character B, they want to thank you and reward you a Bonus Challenge. Bonus Challenges can help you grow faster in the game and collect more points/achievements. Do you accept?

A) Sure, let’s do it!

B) Nah, I’ll keep going.

After creating this, I tested it through 5 individuals at ITP and recorded their decision-making during the simulation. Beforehand, I interviewed them about their gaming and physical fitness habits to see what spectrum they inhabited in their daily lifestyles. Their testing was recorded via screen capturing software. Transcribing the notes I scribbled for further documentation…

Technical note
Last week, I had applied for an app license with Corona and the developer license with the App store.
Today, I was testing Corona’s GPS demo code on my iPhone and noticed it was able to handily note my location (Lat/Long), walking speed, altitude, and time. Now, I hope to start modifying the code so I can log distance, time, speed, and lat/long into the iPhone app and then be able to manipulate signals based on that data.