Tourit is an app that makes it easy for artists and collectors to create, share, and follow art that is exhibited in a virtual tour format. Tourit's main goal is to enable users to showcase and enjoy art in a 3D environment similar to real space that functions like social media.
Users want to share and follow art in a more compelling format exploiting immersive visualization technology such as the one used in virtual tours. On the other hand, users are frustrated that typical virtual tours are siloed experiences isolated from social media. In general, users reported a strong desire to move past the idea of an online gallery as a 2D grid and toward the idea of an online gallery as a 3D environment.
As one interview participant memorably put it: "What I really want this app to do is to be the Instagram or Pinterest of virtual tours."
I conducted interviews and created empathy maps to understand the users I am designing for and their needs. A primary user group identified through research was art-minded individuals who are looking for virtual tours that are more connected and easier to personalize, share, and follow. Users in this group reported that they would like a platform for showing the art they create and/or the artwork they purchase in a virtual tour format, like a cross between Instagram and Pinterest but in 3D.
Virtual tours are usually unmemorable experiences that don’t do much more than mirror content that is already available somewhere else.
Virtual tours are usually experienced in a vacuum and not well-connected to each other or the rest of the web. As a result, they tend to be quickly forgotten.
Virtual tours can’t be personalized and don’t provide enough interaction with the art on display. Users want an active role in the design of virtual tours.
Kiara is a busy creative professional who needs more connected virtual tours because she wants to create and follow 3D art content.
Kiara is a graphic designer and coder who also creates cutting-edge jewelry using digital design software and teaches an evening C++ class at a local community college. Despite her packed schedule, Kiara makes it a priority to keep up with the art world. She regularly attends art events and posts her work online. Kiara would love for there to be a way to share and follow her favorite artwork that is as simple as Instagram but provides a more immersive experience.
Jim is an educator who believes that technology should be used to provide a compelling platform for underrepresented artists to show their work.
Jim is a professor who likes to support young artists and frequently buys their work. Jim believes that there are many social and cultural barriers preventing most artists from being as successful as they deserve to be. He thinks that technology should be used to overcome some of those barriers and to make it easier for artists who are not widely known or from underrepresented minorities to show their work online in a compelling format to reach a wider audience.
I constructed a user flow diagram to identify the basic start to finish journey for creating and sharing a virtual tour, which is the primary goal of this product. I also included two secondary journeys focusing on the steps needed to purchase an NFT and designing a custom gallery.
I drafted six iterations of the home screen and created a more refined version of that screen to ensure that the elements that made it to digital wireframes would be well-suited to address user pain points. I prioritized a quick and easy ordering process putting visual content and the "Create tour" button front and center.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research. A number of users mentioned that they would like the home screen to include a feed with art highlights and options to explore existing virtual tours. Users also mentioned that they would want an easy way to interface between 2D catalogs of their art and 3D tours. The “MyCollection” screen lets users seamlessly manage their art and the virtual tours that showcase it.
The low-fidelity prototype connects the primary user flow of creating and sharing virtual tours, and integrates a number of secondary flows, including adding a piece to your collection, adding a tour to favorites, and buying artwork. This prototype was subsequently tested with users in a usability study.
View the app's low-fidelity prototype
After creating the low-fidelity prototype, I prepared five prompts for participants to complete in a moderated usability study. We asked five participants to run through the actions described in the prompts to garner feedback for use in the next set of design iterations. Below is a summary of the key findings of the study.
Users want simpler UI throughout the app and minimal distractions from tours.
Users want a better way to add art to a tour.
Users want to buy art directly inside a tour instead of being sent to another screen.
Users want the home screen to be a virtual tour,
Users want icons instead of text where possible.
Users want a friendlier and more colorful graphic layout that appeals to a broader audience.
Based on feedback from the usability study, I developed a high-fidelity prototype, which was used to conduct a second usability study with a different pool of users. The findings from the second usability study were used to iterate on individual screens, design the mockups, and refine the high-fidelity prototype.
The home screen received productive critique on several levels during usability studies. In the low-fidelity prototype phase, users did not like that the home screen was a grid of 2D images linked to various content. Almost all users were clear that they wanted the home screen to be a virtual tour. In the high-fidelity prototype phase, users indicated that the home screen was too busy with icons and UI. Most users reported that while they wanted all the functions allowed by the UI, they should also be able to hide them to better focus on the tour.
Users wanted to be able to fully manage and buy art directly inside a tour, rather than being directed to different screens to do so. To this end, I created an art info tab users can access by clicking on any artwork in a tour. In the second usability study, users critiqued the art info tab, pointing out that the selected artwork image should be more prominent and aligned with the phone's screen, and any unnecessary information around it eliminated. The iterations below show my response to those comments aimed at refining this important item.
The high-fidelity prototype builds on feedback from the two usability studies and provides a more refined interface and visual layout for the app. Below are the screens representing the main user journey of creating a tour from the home screen and accessing the art info tab inside the tour.
View the app's high-fidelity prototype
Added alt text to images for screen readers, including color information, for users who are vision impaired.
Used icons where possible to make navigation more visual and intuitive.
Used image/text composites on gallery templates and virtual tour lists to help all users better understand the options and their content at a glance.
“I’d definitely be a Tourit user! Showing my art in 3D and seeing what people are up to in a realistic environment sounds like a dream come true. Can’t wait to see it released!”
Dakota
Digital Fabrication Shop Manager and Artist
Usability Study Participant
Fundamentals of UX Design and Research thinking, as well as key tools such as Figma, Webflow, and After Effects. I also had an opportunity to think about how to bring my experience in digital and spatial design to the UX arena.
Conduct another round of usability studies to validate whether the 3D tour interface is easy to understand, especially in terms of navigation and switching between the overall tour and individual artworks.
Conduct more research to better integrate the creation and management of NFTs within the app. 4 out of 5 users in the last usability study said they would be very interested to see this feature.
Conduct more research to refine the tone and scope of the social media functions within the app (comments, saving, liking, sharing, etc.).
