Solving pictionary gameplay experience

Solving pictionary gameplay experience

Picto is a first-of-its-kind mobile app designed to facilitate Pictionary gameplay.

Picto is a first-of-its-kind mobile app designed to facilitate Pictionary gameplay.

PROBLEM CONTEXT

After playing Pictionary with my friends, I noticed that our choice of Pictionary app led to a lot of arguments and cheating during gameplay.

I decided to design a different app experience to reduce arguments and cheating.

ROLE

Solo Designer.

End-to-End Product Design.

TIMELINE

2 months

SOLUTION

Picto is a first-of-its-kind mobile app designed to facilitate Pictionary gameplay.

FINAL OUTCOME

When I presented the final solution in front of users…

Outline

1

Empathise

  • Backstory

  • Setup

  • Research - Pain points

  • Research - Personas

  • Research - user stories

2

Ideate

  • Brainsorming

  • Solution

  • Competitive analysis

3

Prototype

  • Information Architecture

  • Wireframes

  • Branding

  • Final Designs

4

Test

  • Usability study

  • Measuring success

  • Outcome and conclusion

Backstory - How I discovered the problem

Friends gathered to play a game of Pictionary….

We picked a bad mobile app to play Pictionary.

Arguments ensued…

I decided to design a different app experience for it.

Let's dive in…

Let's understand how the game is played

The components of the game

  • The Pictionary mobile app → generates words, sets the difficulty of the words, etc

  • The whiteboard → Artist draws on it

  • 2 teams → Red and Blue (equal number)

  • The representative artist → from the Red team, for example.

  • The representative watcher → from the Blue team, for example.

  • Timer app → to limit the time artist gets to draw

How to win?

  • The artist from the Red team holds the Pictionary app that generates words he draws on the whiteboard.

  • Red team members have to guess by looking at the artist’s drawing to earn points.

  • Blue team members time it. 1 min.

  • Watcher ensures that the word being drawn is indeed the word displayed.

  • The teams alternate, and those with the most points at the end win.

The components of the game

  • The Pictionary mobile app → generates words, sets the difficulty of the words, etc

  • The whiteboard → Artist draws on it

  • 2 teams → Red and Blue (equal number)

  • The representative artist → from the Red team, for example.

  • The representative watcher → from the Blue team, for example.

  • Timer app → to limit the time artist gets to draw

How to win?

  • The artist from the Red team holds the Pictionary app that generates words he draws on the whiteboard.

  • Red team members have to guess by looking at the artist’s drawing to earn points.

  • Blue team members time it. 1 min.

  • Watcher ensures that the word being drawn is indeed the word displayed.

  • The teams alternate, and those with the most points at the end win.

I immersed myself in the gameplay to deeply understand the pain points

The loading pain point

  • This was the app we used for the game.

  • Generating new word

    • A flaky network leads to random, unfair loading times

    • Unfairness leads to arguments

The loading pain point

  • This was the app we used for the game.

  • Generating new word

    • A flaky network leads to random, unfair loading times

    • Unfairness leads to arguments

The cheating pain point

  • This is the main reason for the watcher to exist.

  • A team could cheat by having predetermined words and act as though they are guessing them in real time.

  • Watcher also helps by not letting the artist’s teammates get too close to be able to see the word on the phone.

  • But the issue with having the watcher is he must continuously peek over the artist’s shoulder.

  • It's annoying for both parties.

The cheating pain point

  • This is the main reason for the watcher to exist.

  • A team could cheat by having predetermined words and act as though they are guessing them in real time.

  • Watcher also helps by not letting the artist’s teammates get too close to be able to see the word on the phone.

  • But the issue with having the watcher is he must continuously peek over the artist’s shoulder.

  • It's annoying for both parties.

The timer pain point

  • People don't agree on when the timer started or ended.

  • Sometimes the team forgets to call it out.

  • Argument ensues.

The timer pain point

  • People don't agree on when the timer started or ended.

  • Sometimes the team forgets to call it out.

  • Argument ensues.

The difficulty mode refresh pain point

The artist could secretly change the difficulty mode.

The difficulty mode refresh pain point

The artist could secretly change the difficulty mode.

The score-counting pain point

  • After a session, sometimes it's unclear how many words a team got right.

  • It is up to the other team to dispute any guesses.

The score-counting pain point

  • After a session, sometimes it's unclear how many words a team got right.

  • It is up to the other team to dispute any guesses.

The holding context

  • This is more of a context constraint.

  • We should know that the artist only uses one hand during a stressful period.

  • Most likely, their non-dominant hand

The holding context

  • This is more of a context constraint.

  • We should know that the artist only uses one hand during a stressful period.

  • Most likely, their non-dominant hand

Meet the Riatans

We don't have individual personas here. This is a “Groupona”. What each member says, does, feels, and thinks is an emergent property of the group activity.

  • Some try to cheat

  • Some will argue

  • Some want a peaceful game

  • All of them want to win

We don't have individual personas here. This is a “Groupona”. What each member says, does, feels, and thinks is an emergent property of the group activity.

  • Some try to cheat

  • Some will argue

  • Some want a peaceful game

  • All of them want to win

We also have specific roles - an Artist and a Watcher

  • The artist wants to go through as many words as possible and is under stress.

  • The watcher is concerned about the artist cheating, and he is anxious.

We also have specific roles - an Artist and a Watcher

  • The artist wants to go through as many words as possible and is under stress.

  • The watcher is concerned about the artist cheating, and he is anxious.

So, what do the Riatans need?

Riatans are a group of friends who need a Pictionary facilitation app so that they can have a fun game experience.

Riatans are a group of friends who need a Pictionary facilitation app so that they can have a fun game experience.

Addressing each of the pain points individually

The solution I decided to go with

A mobile app with artist mode and watcher mode.

A mobile app with artist mode and watcher mode.

Let's lay out a basic hierarchy for the app

  • Difficulty mode setting

  • Red and Blue teams?

  • Time limit setting

  • Difficulty mode setting

  • Red and Blue teams?

  • Time limit setting

  • Role signifier

  • Word flip interaction

  • Timer countdown

  • Role signifier

  • Word flip interaction

  • Timer countdown

  • A way to pair the apps

  • Start game

  • A way to pair the apps

  • Start game

Let's draw some inspiration from our competitors

Improving our solution with user testing and feedback.

How they address Riatans

✅ They do have a separate “artist” mode - thats validating

✅ They do have a mode setting on the home screen.

✅ They have a setting to change the time limit

Where they fall short:

❎ The words are initially grouped into categories - Riatans don't care.

❎ Artist draws on the phone screen and mirrors it on a TV - Not how Riatans play

❎ Words flip using the next button, and there is an option to go back.

How they address Riatans

✅ They do have a separate “artist” mode - thats validating

✅ They do have a mode setting on the home screen.

✅ They have a setting to change the time limit

Where they fall short:

❎ The words are initially grouped into categories - Riatans don't care.

❎ Artist draws on the phone screen and mirrors it on a TV - Not how Riatans play

❎ Words flip using the next button, and there is an option to go back.

How they address Riatans

✅ It's super simple and the color contrast is pretty good.

✅ The mode is easily visible at all times

Where they fall short:

❎ The transition from one word to the next is a bit delayed

❎ Missing a lot of needed features.

How they address Riatans

✅ It's super simple and the color contrast is pretty good.

✅ The mode is easily visible at all times

Where they fall short:

❎ The transition from one word to the next is a bit delayed

❎ Missing a lot of needed features.

How they address Riatans

✅ Produces sound when the timer is down to 0

✅ Super simple. there are no distracting screens

Where they fall short:

❎ Someone could accidentally hit the reset / start buttons while playing

❎ No option to set difficulty or the time limit

❎ Overall the Riatans might use this app but will still face a lot of hurdles.

How they address Riatans

✅ Produces sound when the timer is down to 0

✅ Super simple. there are no distracting screens

Where they fall short:

❎ Someone could accidentally hit the reset / start buttons while playing

❎ No option to set difficulty or the time limit

❎ Overall the Riatans might use this app but will still face a lot of hurdles.

Sketching early ideas on paper

I went on to ideate what Picto’s app would look like.

Some constraints I was thinking through:

  • The emotional state of the Artist.

  • Artist holding the phone in 1 hand, are the correct buttons reachable to the thumb?

  • Should we swipe left/right OR top/bottom?

Creating a fun brand ( Full details here )

Choosing typeface

Choosing typeface

Choosing typeface

Choosing typeface

The first set of designs

Since the visuals are relatively simple, I decided to design the screens and use them for a usability test instead of using a wireframe clickable prototype.

This design solved a couple of problems:

  • Toggle between red and blue teams.

  • Blue and red colors were chosen in such a way that they barely met the WCAG contrast guidelines. The contrast ratio is 3:1. This is cleverly using accessibility guidelines.

  • The swiping interaction meant we could count the number of correct guesses.

What I learned when Riatans used my app

I immediately noticed some issues.

😓 It might be difficult for the artist to make the split-second decision between the right and left swipe.

😓 There is no point in having two different colors for the teams (on the app)

because

  • If I can't have a 2-way swipe, then

  • I can't have the artist count the correct guesses.

This leads to :

  • Fewer colors to manage on the app ( Good )

  • Not restricting to 2 teams anymore. You can have more than 2. Keeping it flexible (Good for the app’s scalability)

😓 App cannot avoid counting disputes

The count dispute can easily be managed offline because players have a memory of recent events.

  • The app cannot avoid disputes even if there is a design to count the correct guesses.

  • It's worth leaving it out of the app entirely so that we can prevent frustration when the artist uses the app.

😓  “Can I play without Watcher as well ?” - a Riatan

This one statement caught my attention. Riatans want flexibility when it comes to using an app. So I decided to design the Watcher mode as an optional feature.

So, the designs evolved…

Splash screen

A fun animation to introduce the user to the app.

Artist mode

The start button starts with a countdown, which helps the Artist prepare to become alert.

I make sure that the start button and the cards are in the “Natural” thumb zone to address the accessibility issue of holding the phone single-hand.

Watcher mode

A fun animation to introduce the user to the app.

Watcher syncs the card's data and relays which word is being shown on the Artist’s phone app.

What I learned from all this…

✅ I enjoyed the ethnographic nature of research for Picto.


✅ Riatans valued flexibility. Deprioritizing features with hard constraints increased user satisfaction.


✅ The best-looking UI didn't have the best usability in this case. I had to drop addressing the counting problem and prioritize usability.

✅ I enjoyed the ethnographic nature of research for Picto.


✅ Riatans valued flexibility. Deprioritizing features with hard constraints increased user satisfaction.


✅ The best-looking UI didn't have the best usability in this case. I had to drop addressing the counting problem and prioritize usability.

How I would measure success…

✅ Download to activation → What % of users who downloaded the app start multiple games immediately after download? This is an indication that they found the app easy to use immediately.


✅ Churn → What % of users who downloaded the app play multiple sessions on the app? This shows the app works for them, and they don’t bother using other apps in the future.


✅ Playing with changing settings → What % of people experiment with changing time and difficulty settings and discover/ use the Watcher functionality? This would show us how discoverable/ usable these extra features are.

✅ Download to activation → What % of users who downloaded the app start multiple games immediately after download? This is an indication that they found the app easy to use immediately.


✅ Churn → What % of users who downloaded the app play multiple sessions on the app? This shows the app works for them, and they don’t bother using other apps in the future.


✅ Playing with changing settings → What % of people experiment with changing time and difficulty settings and discover/ use the Watcher functionality? This would show us how discoverable/ usable these extra features are.

Outcome and Conclusion

Picto is the first App design that I have come across that solves the needs of a group of people playing Pictionary. It balances features with flexibility and reduces the probability of arguments and cheating.

When I presented the final solution in front of Riatans…

Thank you for taking the time to read my case study. I’m grateful to the Riatans who participated in the usability study and helped me understand user pain points deeply.

Picto is the first App design that I have come across that solves the needs of a group of people playing Pictionary. It balances features with flexibility and reduces the probability of arguments and cheating.

When I presented the final solution in front of Riatans…

Thank you for taking the time to read my case study. I’m grateful to the Riatans who participated in the usability study and helped me understand user pain points deeply.

Let's bring delightlful products to life

Email

LinkedIn

© Sanketh Shetty 2023