Bijutsu
User Interviews - Iterative Wireframes - Functional Prototypes
Creating a new and convenient way for art gallery visitors to interact with art and artists
View final prototype here.
Responsibilities
UX Researcher: Competitive Analysis, User Interviews, Usability Tests
UX Designer: Wireframing, High-Fidelity Mock-Ups, Prototyping
Project Details
July 2021 to August 2021
Part of the Google UX Design Certificate
Tools: Figma, Adobe Photoshop, Miro
Background
The Bijutsu Art Gallery is a fictitious institution based in Tokyo that houses the works of artists from around Japan. Its curators strive to showcase lesser-known artists and expose their talent to the more prominent Japanese art scene. This project was created as part of a certificate course.
Problem
Bijutsu's priority is introducing smaller artists to the general public, but the typical gallery format minimizes this exposure. Visitors are forced to learn about art and artists through brief descriptions plastered on the walls and left to their own devices in finding more information. Artists, in turn, are unable to connect with new fans or promote other projects.
Solution
My solution was an app which visitors could use as they make their way through the gallery. This would allow them to instantly learn more about any pieces or artists showcased. Users could then save their favorite works or artists for future reference. Additionally, artists would be able to lead visitors to their own social media, online stores, or portfolios. The app would contain other features to accommodate gallery visitors such as a map of the building and navigation to any specific work.
Competitive Analysis
My research consisted of two main stages. First, I conducted a thorough examination of the current landscape of art gallery apps. This competitive audit helped inform my decisions as to what features would be necessary in my own design and what unique value propositions I could present to the user.
After using each of the other apps, I compiled my findings into a report, making note of each company's branding, design, quality, market positioning, strengths, and weaknesses. In doing so, I was able to find the gaps left by my competitors and create a product that would fill them.
User Interviews
In my second stage of research, I conducted 6 different user interviews. Talking to people who regularly visit galleries similar to Bijutsu helped me understand user needs and pain points in the current experience. Having this information allowed me to construct personas, empathy maps, and user journeys.
Storyboarding
I began my design process by brain storming unique value propositions I could offer the user. I eventually settled on a camera feature that would allow users to scan any piece in the gallery to pull up a page about the work. This would create a seamless learning experience for users walking around the gallery, allowing them to access information instantly rather than scouring the internet for descriptions of smaller artists and their art.
With that in mind, I drew out both big picture and close-up storyboards to demonstrate the procedural flow of the app. Doing this let me put myself in a user's shoes and design with realistic use cases in mind. It also allowed me to consider potential hiccups in the user flow without actually encountering them later in the design process.
Wireframing
Once I understood which functions the app would encompass, I began to create paper wireframes for key screens in the user flow. I came up with numerous solutions as to how the information could be displayed.
I was able to pick and choose which aspects of each design worked the best and compiled them into a single wireframe. I repeated this process for each key screen. During this process, I specifically focused on the ease of navigation through the app and the availability of information to the user.
Low Fidelity Mockups
I then converted these sketches into digital wireframes, adding any screens or features I left out during the paper wireframes.
After the screens were wireframed, I learned how to use the prototype tool in Figma and constructed a basic user flow found here.
Usability Testing
Once the prototype was functional, I conducted a usability study on 8 individuals, focusing on user navigation and information density. My findings from these interviews were construed into an affinity board that guided my iterations on the wireframe. It was specifically mentioned that the iconography alone was not enough to help guide all users to where they wanted to go. This was resolved with better iconography choice as well as labels for each tab in the navigation bar. Additionally, some users suggested creating a way for visitors to be able to save their favorite artists to follow in the future, which was then implemented in the "Saved Artists" and "Saved Pieces" screens.
High Fidelity Prototyping
As I finished up iterating upon the basic wireframe, I began to develop a design system for the app. I drew inspiration from Japan's famous cherry blossoms as well as the clean and modern design language seen in contemporary galleries like The Menil Collection.
As I designed the high-fidelity wireframes and prototypes, I made iterative changes based on feedback from the usability studies, a series of peer critiques, and my own thoughts from testing the app. This included features like favoriting functionality, navigation bar labels, a new carousel design, and the ability to navigate backwards.
Eventually, I had a fully functional high-fidelity prototype which can be found here. I then had the same 8 individuals from the previous usability studies test the new prototype. I went through the same process of constructing an affinity map and making the necessary changes to the design. Finally, I put together a slide deck to present the app concept and design process to my peers. This forced me to sit down and consider each of my design decisions and the reasoning behind them. I logged their responses, making sure to consider their thoughts in future designs.
Learnings
As this was my first solo design project, each and every step was a learning experience. I learned how to conduct proper research prior to designing, including competitive analyses, user interviews, persona construction, and user journey mapping. I also learned how to administer usability tests and organize the results in affinity maps. Finally, I learned how to take a paper wireframe all the way to a high-fidelity prototype through iteration. Going through the process on my own really allowed me to understand just how much work goes into every stage of the design process.
