Tucker's Portfolio
Share
Explore

Draw it Out

Tech4Good
A Pictionary-style game that supports community engagement. Prompts and answers are used to survey players.

Duration
10 weeks

Roles
UX Design
UI Design

Team
3 Designers
4 Developers

Draw it Out - Thumbnail.png
Project context
What is Tech4Good?
is a HCI research lab created by Professor David Lee. He and his students explore new concepts in social computing. They have some cool ideas and it’s a unique place to work. Undergraduates team up as designers and developers to help PhD students turn their research into tangible products.
What is Relate?
Relate is one of Tech4Good’s projects. It’s a platform designed to improve team bonding and collect feedback regarding issues within a community. By playing an activity, people submit opinions and ideas during the setup process or during the gameplay. Draw it Out is one of Relate’s main activities.
Final Design
Problem Space
Relate’s activities were originally designed to improve relationships among groups using the same device in the same physical space. With the onset of the Covid-19 pandemic, we were tasked with redesigning this activity to work remotely on different devices.
The original design was a charades game, but given the limitations of a conference call, we didn’t think it would be as engaging. Our initial testing on the project team confirmed these concerns. We went back to the drawing board. This game needed to capture the excitement the comes from an in-person activity while still being remote.

Original Act it Out.png
The original gameplay for Act it Out

Another large constraint was the data being collected. The ultimate purpose of this activity was to gather useful feedback about a community. The original activity simply surveyed players and it used their answers for gameplay. Our questions prompted short and pithy answers. This design made for easier charades, but ultimately the feedback it gathered wasn’t very rich.
For example, a question could be, “What do you dislike about the Tech4Good lab?” And an answer could be, “Remote work.” This answer might be easy for charades, but it doesn’t tell us what this person specially doesn’t like about the lab. We needed richer, more in-depth answers.
Survey Richness.png

The original survey for Act it Out
Solution
1) Artists rather than actors
We made it into more like Pictionary rather than Charades. In the context of remote work, we believed that people, of any artistic background, can more easily convey their message with colored paints on a white canvas rather than with their physical body on a dim screen. Furthermore, a variety of paint colors and thickness allow players to make something more unique, frivolous and precise than they could ever capture in-person.
Drawing Canvas.png
Draw it Out canvas
2) Richer answers and more rounds
We asked players to submit rich detailed answers rather than short ones. Yes this drastically changes the gameplay, but asking for anything short of that would defeat the purpose of the game. Detailed answers are what we’re looking for. It something we had to work with and I believe we played it to our advantage.
Now, in order to win the game, players had to guess someone’s full answer from the drawing. A good example would be, “David is always asking us to turn our video on but I just want to do audio.” That’s pretty daunting, so we added a few things to make it easier. Of course players wouldn’t be able to see the full answer, but we gave them a few words scattered throughout the sentence. Words that weren’t included had dashed lines separated by spaces to indicate their letter count. This gave players a starting sense of what the sentence could be, but it wasn’t enough to win the game. Furthermore the sentence was too long to be captured by one round of charades.
Response Bubble.png
A player’s concealed answer
To make it more digestible, we broke down the full answer into separate rounds of charades. Once the players guessed each word correctly it would be revealed. Perfect right? Not quite. Think about the types of words that make up a sentence. The types of words that are always used, but are not necessarily easy to draw. Words like, “the,” “it,” “to,” etc. We could ask the development team to have players only guess words in the sentence that are easy to draw, like nouns, but remember this is a student lab. We have limited resources and experience. What we lack in flash we have to make up for in cleverness.
We realized that the words used for drawing don’t necessarily need to be directly related to the full sentence. So, we created a huge word bank of things that are fun and easy draw. Things like, “Hippos,” “Trees,” and “Airplanes.” Once the players guess the drawing correctly (whatever it may be), the words in the sentence starting with the same letter are revealed. Boom! This may sound like an overly elaborate way of allowing richer answers, but it also made for richer gameplay. Now there can be be sub-rounds with increasing difficulty and a final round for guessing the full-sentence. I’ve played it a few times and it’s fun.
Revealing Words.png
Players revealing words from the full sentence
3) Promoting active engagement
We gave more active roles to more players. Before, the only people talking was the person who submitted the answer, the submitter, and the most dominating voice trying to guess their answer, the guesser. We created a third active player, the drawer, who's sole purpose is to draw the given word. Roles are given to new players each round, allowing players to contribute more equitably.
We emphasized this in the interface. Unique icons, names and roles are used to clarify who is participating and how. The drawer has a pencil overlapping their player icon. For even more clarify, the drawer’s name is listed a second time on the canvas. The submitter has their name listed above the full-sentence being guessed. This helps give context to the guessers and remind the submitter that it’s their answer being guessed. Now this design gives all players an opportunity to participate.
Avators.png
Player’s unique avatars
Time is also used to prevent inactivity. When drawers are selecting which word to draw, they’re given 15 seconds to make their decision or the system chooses a default. Each round is limited to a minute. Now players have to stay focused if they’re going to win.

Want to chat?
Send me a message or find me on the internet:
💼

Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.