UX Case Study: Modified Design Sprint Challenge

Landing page for mobile site prototype

Landing page for mobile site prototype

GalleryPal Prototype

As part of my Springboard UI/UX Design course, I tried my hand at one of Bitesize UX’s design sprint challenges. The challenge was to design a way to improve the experience of viewing art in a museum or gallery—and ultimately improve overall visitor satisfaction. The design for the startup, GalleryPal, would be constrained to a mobile site or app for improving the in-person viewing experience. I did a modified version of the GV design sprint, where I worked through each day’s tasks alone, at my own pace, and developed this final product in about four days. Here, I will share my process, the solution I created, and what I learned from the results and the process as a whole.

Day 1- Mapping/The Problem

After synthesizing the primary research provided by Bitesize UX, I noticed that most gallery goer gripes were based around getting the best insight on the artists and context in which their art was made. Online searches before visits didn’t encompass the full story of the artwork or collection. Visitors also felt like they got more out of the artwork if they knew more about the artist’s process, backstory, and concepts behind the particular pieces.

I decided to build an MVP that answered, “How might we improve the in-person art-viewing experience for gallery visitors?” The end goal would be to design a mobile website that allows said visitors to experience the full stories of featured artwork and leave fulfilled—that is, educated, inspired, and/or opinionated.

 
User journey map for Day 1 planning

User journey map for Day 1 planning

 

Day 2 - Sketch

I began day 2 with lightning demos, finding inspiration from art history apps, museum apps, and tour guide websites. One inspiration was the site Museum Hack and how they described their offering to site visitors. They stated that they “do deep research into the museum collections to learn the facts you won't find on the plaques, and then build out stories that connect with stuff in your life.” I definitely want the product to leave a lasting impression with visitors, and a great way to do that is to pique their curiosities and share stories they can connect with.

 
I found UI inspiration from two apps during lightning demos: DailyArt (left) and National Gallery of Art (right).

I found UI inspiration from two apps during lightning demos: DailyArt (left) and National Gallery of Art (right).

 

I enjoyed the National Gallery of Art app and its options for viewing artwork onsite or away. Their UI is clean and simple, and they want users to “be captivated by stories behind art and artists” and “discover new exhibitions,” which is aligned with how I want to present my product. DailyArt is an app that features a different piece of artwork and its background each day. Their layout is great, too, as they offer users the options to save, share, or mark each piece as seen. This app goes in-depth about size, materials, period, and location, which our audience might enjoy.

After sitting with these designs and ideas for a bit, I did a Crazy 8s exercise and sketched eight versions of my product’s potential key frame. I pulled my favorite parts from these and developed my 3-frame solution sketch, which would be the basis of my GalleryPal prototype.

My Crazy 8s sketches

My Crazy 8s sketches

I decided to go with an “art card” concept for my solution sketch. The gallery visitor would scan artwork (or an assigned QR code), and this art card would give the basic information about the piece. From there, the visitor could see the highlights at a glance, and most importantly, learn more. The art card would be a simple landing page for all, while offering curious visitors the freedom to learn more either onsite or remotely.

Final solution sketch

Final solution sketch

Day 3 - Storyboarding/Decide

After developing my solution sketch, I revisited some interfaces I found during the lightning demos and sifted through more related platforms. My solution sketch was missing a key part of the user’s journey: the resonating feeling of fulfillment after discovery. 

I decided to create a second solution sketch that included ways for viewers to hang on to the experience longer (with saving, sharing, and learning even more about art pieces). I thought the savable, shareable art card should give the user a feeling of possession. I put the two sketches up against each other and decided that the newest version would offer a more full experience that would resonate more with viewers.

Storyboard

I made sure the user flow included context, instructions, and ways to navigate to learn more or start over. I started with a landing page that visitors would access upon entering the museum. From there, they are given the context of the tool and a call to action for starting. The start button leads to the first frame of the solution sketch. The camera page flows into the art card screen, where visitors can get quick info about the artwork and share or save it for later, and mark it off as seen. The highlights of this page are:

  • the “full story” option for deep-diving into the work,

  • the option to scan something else, and

  • the freedom to go back to the homepage from that point.

The storyboard includes six frames from five screens to be developed. The bottom left and bottom middle frames are one screen, and the copy includes notes about what sort of content would be placed there (highlights, fun facts, creative inspirations…

The storyboard includes six frames from five screens to be developed. The bottom left and bottom middle frames are one screen, and the copy includes notes about what sort of content would be placed there (highlights, fun facts, creative inspirations, and the like).

When a visitor wants to learn more, they access the next screen, which includes the same info as the art card, plus:

  • Artwork size & materials used

  • An overview featuring highlights, backstory, “Did You Know” facts, and anything else of general importance

  • An “Artist View” that includes any commentary about the work from the artist, the materials and techniques the artist used, how the piece fits into each period or collection, and any other information that others might find inspirational or impactful

  • Recommended artwork related to the given piece

The storyboard flow ends with a new homepage, populated with a carousel of Favorited Art and recommended works based on the visitor’s favorites. This gives the visitor a chance to reflect on the artwork they enjoyed and motivation to discover more.

Day 4 - Prototyping

See Prototype

The goal here was to create a prototype that was clean, simple, functional, and easy to understand. I was unsure about some design choices because of how fast they were made, so I built this with those questions in mind, hoping for answers.

I included two ways for the user to start: from the site’s landing page or by scanning artwork via phone (assuming they have a mobile device with camera functionality). The landing page features GalleryPal’s logo, the museum’s text logo above a photo from the museum, and a quick description of what the site is for. I chose to offer “scan to start” as a button to push people to do that, but they also have the freedom to start with general suggestions. This button leads to the camera function, and scanning the artwork leads to art card.

The final “art card” and other key frames from the final prototype.

The final “art card” and other key frames from the final prototype.

gallerypal-flow.gif

I developed the art card as a way to give the users the main points of the artwork in their hand. The general art viewer can get the main points of the artwork from here. For the full experience, they can dive into the full story, favorite the art, share the card, or access other cards for art nearby. During the prototyping stage, I realized that for my target users, recommending artwork that was related or nearby was much more important than checking items off as “seen.” I did away with the “seen” option to make room for more learning.

The icons below the text are for main actions, but for the discovery side of the product, I chose to present the “full story” option in text form at the end of the artwork summary. I hypothesized that those interested in learning more would first read or skim the full text, and the “full story” option would be a given continuation instead of a new choice.

The “full story” screen satisfies some of the pain points the target audience had. This is where those interested in pulling more from the artwork can learn about the significance, style/technique, history, and other facts about the piece. The art card gives a brief synopsis, the full story lets the person submerge in it, and the “favorite” and “share” options let users take the art home with them. Having built the full prototype, I was ready to share it with the world and see how well I did on this challenge.

Day 5 - Testing & Results

Screenshot from a remote user test I did via Skype

Due to the constraints of the pandemic, I had to do some remote testing for this project (three of six tests were unmoderated). Testers were either in the tech industry, museum industry, or creatives who appreciated art. Most were interested in art history and art processes, so their input would be in line with GalleryPal’s target users.

Some screens represented the phone’s camera view, which confused the first testers initially. I had to add a disclaimer for those screens so other testers understood the full context—that this was a tool for use in a gallery setting. Facilitating this understanding helped the tests run more smoothly.

The usefulness and flow of the site proved to be intuitive because there wasn’t any friction between the first frame and the main “full story” frame. Choosing to add “full story” as bold text instead of another art card icon proved to be a good choice.

Here are some of my top insights from users:

  • The “Art Card” was a good way to get the basics about the art without having to get to close to the placard (in times where there’s a crowd or text is hard to access)

  • Those who wanted to learn more about the art went straight for the “full story” text

  • “Share” and “favorite” options made users feel like they could go in depth at a later date or come back to the art they enjoyed the most

  • It was unclear how “related” art options were populated, but users appreciated the further guidance and option to start their viewing journey with recommendations

  • Many assumed “related” art was nearby, so “Nearby” option may be redundant

  • Design was easy to read, understand, and access. Design was clean and colors fit the elegance of the context

I would make only a few changes based on this insight. First, I would better define the related/recommended artwork option. I could recommend them by proximity (what’s close by or what else is in the exhibit), artist (in case they are in more than one exhibit), or style/era. I would probably do more research with the gallery client’s visitors to see which fulfills them the most.

The second change would be whether or not to include the “nearby” icon option. I would have to better define “related” art to separate it from what is considered “nearby.” One solution would be to add nearby items to the bottom of the “full story” screens and include the remaining art card icon options there as well. This would give the visitor another shot to save, share, and see recommended work, while seeing clickable photos of other art pieces physically in front of them.

Art Card screen I built the prototype around

Art Card screen I built the prototype around

During testing, I realized that I should have built out a favorites page too. For visitors to hold onto their cards for longer than a couple weeks, they would need to create a GalleryPal account and be able to see their favorites’ art cards. Given that this was a sprint, it would have been a task to mock this up in the given time. I believe the MVP proves the concept and meets the challenge, but I do recognize how this would be an unfinished full product.

Reflection

I enjoyed this modified GV design sprint. This was my first, and I did it by myself. I typically try to be pixel-perfect, even while sketching, and this process helped forced me to stick with an idea, build it up, and stand behind it. With future designs and idea implementation, I can see myself going with my best idea and tweaking as needed, instead of waiting for the perfect storm. I loved doing the sprint process alone, so I look forward to doing these with a team in the near future. 

So, “how might we improve the in-person art-viewing experience for gallery visitors?” I think I succeeded in creating a useful tool for the target users—something simple and pleasing, that helps add texture to the artwork’s stories, and offers a better way to savor the viewing experience. As an art fan, I built this with myself in mind, too, though I separated myself from this as much as I could. The minor hiccups I had were easily understood and fixed, but the overall user experience my testers had made me feel like I hit the mark. I’m confident in being the voice of the user and look forward to bringing new ideas alive.