Tourit Marketplace is a virtual tour-based NFT marketplace site allowing users to discover, collect, and sell art in an immersive 3D environment that functions like social media. Tourit Marketplace builds on user research and design concepts that were originally developed in the Tourit Mobile App case study below.
Users want to discover, collect, and sell art online in a compelling visual format and wish they could exploit immersive technology such as the one used in virtual tours to do so. Users report a strong desire to move past the idea of an online gallery as a static 2D catalog and toward the idea of an online gallery as an interactive 3D environment.
Design a straightforward marketplace website that combines the flexibility and connectivity of social media with the immersive visual quality of 3D environments such as those found in virtual tours and video games.
As one usability study participant memorably put it: “When I buy an NFT, I wish it didn’t just tack on to a bland grid of thumbnails. I wish it went to a sleek virtual tour that is like a trophy room of my purchases. NFT marketplaces should be way more immersive, exciting, and celebratory!”
The Tourit Marketplace website builds on user feedback gathered while conducting usability studies for the Tourit Mobile App project. During both usability studies for the Tourit App, almost all participants indicated that they would be very interested in seeing Tourit’s potential applied to a scaled-up, desktop-based marketplace driven by the same 3D interface and social media-centric approach as the app.
NFT marketplaces often have interfaces that make information about the art more prominent than the art itself.
As 3D art becomes prominent, NFT marketplaces rarely offer suitable ways to visualize it—especially interactively. 2D images or (at best) pre-recorded clips are still widely used to showcase fully 3D creations.
NFT sites struggle to make the process of purchasing art a memorable experience. A more compelling user experience is urgently needed.
Hiroki is an artist and collector who needs more immersive NFT marketplaces because he wants buying and selling art online to be exciting.
Hiroki is a digital content creator and artist with a very busy schedule. He is interested in the rise of NFT culture and enjoys the idea that NFTs make art more accessible to a wider public and (sometimes) more affordable. However, Hiroki is frustrated that NFT marketplaces often seem more geared toward a business audience than one of creatives, where the artwork itself becomes secondary. He is also disappointed that most marketplaces use outdated layouts that don’t give justice to emerging 3D artistic formats.
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.
I constructed a site map paying attention to structure the information architecture so that the trope of virtual tours could inform the main user flow as much as possible. Users repeatedly indicated that they want tours, and immersive visual content, to be front and center throughout the marketplace experience. Users are excited for virtual tours to be the place where everything happens — from viewing artwork, to getting information about it, to buying NFTs.
I sketched out paper wireframes for each screen on my site, paying special attention to the relation between pages with large amounts of content, such as the home page, and the more visually immersive virtual tour interface. The home screen paper wireframes variations below focus on providing access to virtual tours from different entry points. Orange dots were used to mark the elements of each sketch that would be used in the initial digital wireframes
I sketched out paper wireframes for each screen on my site, paying special attention to the relation between pages with large amounts of content, such as the home page, and the more visually immersive virtual tour interface. The home screen paper wireframes variations below focus on providing access to virtual tours from different entry points. Orange dots were used to mark the elements of each sketch that would be used in the initial digital wireframes
Moving from paper to digital wireframes I further refined the relationship between pages with a conventional layout, such as the home page, and the more visually immersive virtual tours. I took inspiration from digital art marketplace sites such as SketchFab, where a popup interactive viewport showcasing 3D models can be accessed by clicking on any thumbnail and easily made full screen. I found this layout to be very effective in that it provides an intuitive way to toggle between conventional pages structured around text and image grids and the 3D viewports that maximize the visual impact of 3D models.
To create a low-fidelity prototype, I connected all the screens involved in the primary user flow of browsing tours, finding artwork, and buying an NFT for the user’s virtual tour collection. At this point, I conducted a usability study to receive feedback on my prototype and implement changes to my design that address user pain points.
View the app's low-fidelity prototypeAfter 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 wanted a clear, one-click way to exit the virtual tour popup viewport and be able to return to the homepage at any point in the flow.
Users found that an additional info card appearing on the screen once an artwork is selected makes the screen too crowded. Information about an artwork is valuable but should be condensed and moved out of the tour viewport.
Users were disappointed to find that when they bought an artwork it ended up in the their collection as part of a grid of thumbnails. Users want the art to be shown in a tour right away. "Your collection" should be a virtual tour that feels like a trophy room which is immersive, exciting, and celebratory of the user’s purchases.
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 pages, design the mockups, and refine the high-fidelity prototype.
Usability study participants were disappointed that after buying an artwork they were redirected to a bland conventional page where the first encounter with their new item was as a small image in a grid of thumbnails. Participants consistently emphasized that they wanted the artwork they just bought to be seen prominently in a tour right away. They also wanted the viewport displaying their new purchase to be more exciting and celebratory. 3 of 5 users mentioned the word "trophy" while describing how they'd want a new purchase to feel in their tour, with 2 of these users adding that a spotlight should shine on the artwork dramatically from above. I carefully considered this feedback and decided to completely redesign “Your collection” as a kind of trophy room for the user’s art, with the latest purchase prominently framed in the center of the screen. I also changed the name of that page from "Your collection" to "Your tour."
Users found that the individual artwork info card activated by clicking on any artwork in a tour made the tour feel much too visually crowded. Users indicated that the individual artwork info should replace the general tour info on the left-hand side column when an artwork is selected. There should also be an easy way to go back to the general info or close the card as needed, which is why I added a “back” arrow as well as an “X” icon at the top of the info card.
I included considerations for additional screen sizes in my mockups based on earlier wireframes. Based on user feedback, Tourit should perform slightly differently whether it is accessed on a desktop/tablet or a mobile device. While the only variation between the desktop and tablet version consists of simple layout adjustments, the mobile version compresses much textual and thumbnail information for the sake of maximizing virtual tour real estate as much as possible on the smallest screen size.
The high-fidelity prototype follows the same user flow as the low-fidelity prototype and includes a range of design revisions made in response to user feedback from the usability study.
View the app's high-fidelity prototypeI used headings with different sized text for clear visual hierarchy
I used landmarks to help users navigate the site, including users who rely on assistive technologies.
I designed the site with alt text available on each page and within virtual tours for smooth screen reader access.
Most usability study participants found Tourit to be an original idea and a platform that would be successful in the emerging digital/crypto art market. They shared that the design was intuitive to navigate through and visually engaging, especially in the high-fidelity prototype.
Users are exceptionally excited about a field at the intersection of immersive digital environments, marketplaces, and social media. We have barely started scratching the surface of this emerging arena. Tapping its full potential may open up a significant amount of design and business opportunities in UX and beyond.
Conduct follow-up usability testing on the new website.
Develop the virtual tour interface through experimenting with photospheres, 3D modeling, and animation.
Pitch the project to engineers for possible real-world development.
