Art World Tour Case Study

project overview

For my Google UX Design Professional Certificate, we were required to move through a version of a full user experience process, beginning with research and ending with a high fidelity prototype for a mobile application. While there were a select number of prompts for the assignment, I chose one that resonated most with me, and didn’t seem to exist in plenty already. With a degree based in fine arts and a self-proclaimed artist at age 5, creating a mobile application to help others explore art easily fit perfect. As you move through my process, you’ll see the standard ‘what they teach you in school’ steps. While working in the real world has taught me these steps look different everywhere you go, I think this was a wonderful refresh and expansion from what I learned many years ago in college.

who was involved / timeline

I was the sole user experience researcher, product strategist, and designer for this project which I worked on over the span of 3-4 months.

user problem

The goal of this mobile application is to utilize museums art tours for more accessible art education and exploration. Right now, this application is in phase 1, with features coming to ease the tour check-in process, create a detailed profile for the users goals and interests, and more.

Art World Tour high fidelity mock-ups - phase 1


early research methods

To begin creating a product strategy and path for creation I completed a competitive audit, looking at other applications that offered information on art tours. My results were pretty sparse on direct competitors, so I looked at specific art museum applications and their corresponding websites, such as the National Gallery of Art and Rijksmuseum. The results of my audit led me to believe there would be space for a mobile application serving users interested in different activities surrounding art history and art tours.

To gain further insights, I created user personas for Joseph and Cathy, which you’ll see below. From creating big picture and detailed user scenarios, I was able to plan how my users could use the application. From there, I chose one path to focus on - the action of users booking art tours at an art museum - to complete phase one and create a minimum viable product.

Persona of Joseph, an art history teacher looking to share his love of art history with his students

User Persona for Joseph

User Persona for Cathy


design ideation and iteration

After learning and discovering what I could about who my users could be, I began to iterate on design possibilities for each frame. For these ideas, I took inspiration from some of my own favorite applications, while making my own decisions that were more specific to my user. Annotating on each idea I’d drawn out helped the transfer of my hand-drawn wireframes to Figma, where I began building my application!

Moving from low fidelity to high fidelity, my branding and visual design skills came to the forefront. I haven’t explored a full brand design yet, but aimed to create initial consistency and begin to create a base design system. I created the color palette with accessibility in mind, making sure that almost all color combinations pass standards for contrast.

Rough sketches for the initial Art World Tour wireframes

Initial Prototype for the Art World Tour app showing the user flow and path of interactions

Initial primary user flow used for low fidelity prototype


usability testing

Once I had my initial primary user flow laid out as an interactive low fidelity prototype, I put together a user experience research study plan and set out to conduct a usability test. With limited resources, I gathered a few friends and performed a usability test - taking notes as they navigated the first draft of Art World Tour. It was incredibly valuable to see and learn where they clicked, the little things they noticed, and what they voiced as features they’d like to see in the application. I used this information to create an affinity map and organized insights to make the most important changes to my prototype.

This part of the research has to be the most enjoyable and eye-opening for me. It brings up my favorite aspect of product design - gathering insights that allow you to see past your bias and what you thought would be the best design route.

From my first usability study, I made updates to the map page, added in functionality surrounding creating a list of favorites, and created buttons and easier choice selection for tour times. You’ll be able to notice these changes in the two prototypes below.

You can find my high-fidelity prototype using this link.

 
 
Moving image of the primary user flow in a low fidelity prototype

Art World Tour Low Fidelity Prototype

Art World Tour High Fidelity Prototype

 


learnings and next steps

Moving forward, there are features to be added and testing to be done! I’d like to do another round of usability testing and continue to build out other frames and functionality. There are tweaks I’d like to make to refine the interactive elements and check to make sure they’re accessibility-minded. I’d like to continue to apply my forever-growing understanding of accessibility practices to the content and visual design - swapping a few elements to create more color contrast and testing using assistive technologies.

This project was a fun learning experience for me, refreshing my knowledge on user experience design and diving deeper into research and the specific practices of the work. I learned a lot about bias and accessibility in content and design, and look forward to continue building on that knowledge to apply it to future phases of this project.

Incorporating Responsive Web Design

From mobile application to website, you’ll see a snapshot of how Art World Tour shows up utilizing the same goals and journeys, as a web page - in desktop and mobile sizing. You’ll see the purpose of the website is to inspire action and exploration outside a confined environment like the mobile application.

Decisions differed slightly in the creation of buttons, horizontal scroll, and divisions of information - helping the user best find what they’re looking for with a route that resonates with them and their relationship with art and art tours.

 

Homepage responsive web design high-fidelity mock-ups for Art World Tour