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. 

And I…

Moderated user interviews, usability tests, conducted competitor analysis, defined player types and ideated game ideaz

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.

I lead…

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:

How Artle told us WHAT NOT TO DO

Artle was the subject to our  technical analysis and 6 moderated usability tests. It garnered a lot of negative feedback and usability issues. 

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?

We looked at Google Arts and Culture, Met Kids and Tate Museum’s website to understand how they gamify art history and culture.

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.

Our user research suggested the need of short, relaxed, simple games.

Short-form games have a factor of delight within them. Not only are they enjoyable but there is a depth of complexity.

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 so static, players thought there were not many cards left

All that I changed

I changed the design visually to demonstrate address the needs of the players.

I added instruction animations to clearly demonstrate how to play, as well as changed the writing

I added a visual effect indicating a stack of cards as well as 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 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

Key Takeaways

Branding is key

By making sure I used NGA’s brand guidelines, I was able to create a product homogenous to the organization.

Some limitations?

Limitations can come in when NGA Wants to showcase an artist with only one painting? How can ArtSwipe help with that?

Future of ArtSwipe

Daily updates and more artists irrespective of curated collections can increase more exploration and educational potential.

Come try it!

WORKS BEST ON MOBILE/PHONE

More like this!

PRODUCT DESIGN USER RESEARCH PROTOTYPING

A 0 to 1 product designed to make your NYC/NJ commute stress free and smooth.

UX DESIGN WEB DESIGN DESIGN SYSTEMS

A sleek and accessible design system created for the Rubin Museum of Art.

HACKATHON UX DESIGN PROTOTYPING

We introduced Amazon Room, a feature for Amazon Music, aimed to socialize the music streaming experience with AI.