UX RESEARCH • PRODUCT DESIGN • CLIENT PROJECT
National Gallery of Art
National Gallery Of Art boasts of an extensive art collection for its visitors. Our main objective was to boost website traffic, foster engagement with art collection and bring in more visitors.
Details
Duration: 10 weeks
Team: 2 researchers, 2 designers (including me), 2 PMs, Data Analysts
Tools: Figma, FigJam, Zoom
About NGA
The National Gallery of Art provides a huge collection of artists, art collections, sculptures paintings etc.
What did NGA want?
NGA wanted to increase website traffic and boost public interest in their art collection. They wanted more visitors for their museum, and looking at the success from Artle, they wanted a second game that could bring in more people.
So, what did we do?
We first scoped the project with the NGA team, understood their limitations based on technology and overall headcount. We then looked into what Artle did and studied it to define organizational principles for our product.
My tasks
Moderated user interviews, usability tests, conducted competitor analysis, defined player types and ideated game ideas
The design development of ArtSwipe, spanning from lo-fi to hi-fi, interactive prototypes, conceptualized ArtSwipe and also defined research methods for understanding game preference. I also created user flows for the same.
What I led
TL;DR (Summarizing for a quick read)
WHAT DID NGA NEED?
A game! But this game had to be educational with the potential to attract users through word of mouth.
Have you ever noticed how Wordle is played by every other person and talked about? YES, EXACTLY!
btw… did you solve today’s Wordle?
IMPACT
ArtSwipe gained significant preference from our testers (75% loved it!) in terms of gameplay and the potential to help players learn about artists and their art styles.
Did you play ArtSwipe today?
Nope, let’s play together!
METHODOLOGY
To create a game product from 0 to 1, we decided to use the following strategy:
Let’s look at ArtSwipe first
ArtSwipe is a game that helps new website visitors learn about the artists and art showcased at the National Gallery of Art.
It uses widespread interaction patterns such as swiping to help the player categorize the artwork with its artist.
ArtSwipe comes with 2 playing options!
Single player for when you want to play by yourself!
Multiplayer when you have that competition ON!
By simply copying and sharing the link, invited player can join the room!
The host chooses the contents of the challenge!
ArtSwipe let’s you choose what artists and media you want to swipe from
The host has full control of the game specifics
There are only 2 levels; ‘Normal’ and ‘Hard’.
Swipe Left and Right to Win!!!
Simple swiping motions that can help categorize art to artists
Interaction gestures mimic swiping from dating apps that many visitors would be used to!
Points are reflected immediately and feedback is spontaneous!
Artle told us…
What not to do!
Artle was the subject of our technical analysis and 6 moderated usability tests. This was because we wanted to determine the mechanics behind NGA’s first game, the overall gameplay and any loopholes we would want to avoid.
We found out that Artle lacked better signifiers and did not make players feel motivated to play it. The overall interface lacked mechanisms that could create a successful game.
What did we find?
Reverse Lookup, Players feeling ignorant and extreme difficulty, made us realize..
We can’t create something based on these mechanics!
“My word bank is like 5 artists” [P2]
"This game made me feel ignorant" [P4]
Our user interviews made us realize that people play content similar to Artle differently than they play content similar to big name games (Eg. Fallout, Valiant, Pokemon Go!, you name it!)
But we needed more clarity… so user interviews were the key!
Play on Subways or when they wake up/lunch break
Prefer competition with themselves and close friends over strangers
Want to learn something about artists through the game instead of feeling ignorant
WAIT…. how are games designed?
Creating a short form game is a mental exercise in itself. We wanted to make sure we knew the recipe of engaging games and games that can help someone learn something, so we proposed literature reviews.
So, umm.. lit reviews anyone?
Through literature reviews, my team focused on 3 questions to ask ourselves when we designed the game.
What is the Goal?
What is the Obstacle?
What are the tools?
I undertook the task of researching and comparing effective games with competitors. Understand their mechanics and their product strategies to showcase their collections.
Watch and learn from competitors…
We found that the games catered to these 4 specific types of players:
All of that condensed to 4 player types!
Guessers
Solvers
Groupers
Fun lovers
Now comes the fun part…
ArtSwipe is Born
How is it played?
Imagine 2 artists
Now Sort
My team and I brainstormed around 8 different ideas. All the games had to do with NGA’s pre-existing collection.
I was wondering, how do I cater to players, bring an easy to play game that can be used to learn about art as well as create interactions which are fun? So much to think from, until I realized that I played a games (10 years ago) and felt that it could provide base for the ideation.
ArtSwipe caters to different flavors of artists and how a player can compare and recognize their distinct styles. It attempts to have multiple or all of the below flavors.
Deciding which games to develop further…
Dividing our forces
My team and I left no areas untouched when it came to game ideation, however, NGA shortlisted two of our ideas and our PM said, “Let’s give them two, instead of one!”
Since there were two ideas of two of our teammates, ArtSwipe being my idea, we had to lead two games to completion in the time allotted for one. So we decided to split into two teams, one worked on ArtSwipe, led by me and the other worked on Gallery Quest.
Starting the design process
Mid-Fidelity design
It is exceptionally hard to start designing without a clear flow in mind, so I created a user flow on FigJam first and started to refine it over time to ease prototyping stage.
There was not much time after NGA finalized the two games they liked. We had to conduct usability tests as well as create high-fidelity designs within a week or two after the tests.
So, we decided to iterate with mid-fi prototypes as they were a quick way to understand interaction playing out along with the media we were embedding it in.
Practice… uhhh.. Usability testing makes perfect :)
We received feedback from our participants for ArtSwipe. I suggested a within subjects test for both the games to indicate user preference as well as highlight any usability and playability issues. We had a total of 9 tests with recurring feedback.
Users could not figure out instructions
The highlights on swipe made the game easily cheatable
The deck felt static, players thought there were not many cards left
All that I changed
I changed the design visually to address the needs of the players.
I added instruction animations to clearly demonstrate how to play, as well as changed the writing
Created an accessible way of showcasing right or wrong answers stopping any cheating attempts.
How our principles played out…
Delivery to NGA
We presented our games to the NGA team, ArtSwipe received positive feedback and made me very confident in my product thinking skills.
We thought a lot about ArtSwipe and this was a novel approach, where it is used a comparison tool, something we never thought of...
Martin Franzini
Chief of Digital Product and Experience, NGA
With ArtSwipe, I really appreciate the nuances you were thinking of.. with the indicators, we are big with accessibility and the fact that you thought of naming levels like ‘Normal’... Great Job
Deanna Wood
UX Designer, NGA
This is really really cool, I love (Art)Swipe! Love the effects and the way you indicate what’s right and wrong. Can’t believe you did this in the amount of time you had.
Memo Saenz
Product Manager, NGA