Case Study:
NOMA(D) Mobile App
I envisioned NOMA(D) as a mobile app that could provide users with a virtual experience of the New Orleans Museum of Art. I started development in January of 2022 and finished two months later, in early March.
Initial Research
Interviews revealed that some people desired an alternative to visiting the museum in person during the COVID-19 pandemic. However, interviewees also expressed some skepticism about the effectiveness of a mobile app. Specifically, they worried about:
A lack of immediacy
A lack of agency with respect to navigating the virtual space and examining artworks in detail
The inability to ask museum staff questions about the artworks
After conducting interviews, I synthesized my findings and created personas:
Vince Simonson
Age: 58
Occupation: Antique dealer
I love to explore and have experiences. I only wish I had more time to travel.
Vince often uses Google Street View on his laptop to explore places that he doesn’t have the opportunity to visit in person. He’s looking forward to technological improvements that will make virtual experiences more lifelike.
Goals: Have an experience that feels authentic. Learn something new.
Frustrations: Limited ability to move within the virtual space and change vantage points.
Celeste Weeks
Age: 35
Occupation: Yoga instructor
When I look at great art, I feel like I can see right into the artist’s soul.
Celeste loves to visit art museums, but because of the COVID-19 pandemic, she’s been reluctant to go as often as she used to. While she’s open to the idea of virtual tours, she wishes she could ask questions and see the art up close.
Goals: Learn about artwork and artists. Appreciate art while limiting exposure to COVID-19.
Frustrations: Cannot ask museum staff questions about artworks. Unable to view a high level of detail.
By creating a storyboard, I arrived at the idea of creating an in-app messaging system to address one of Celeste’s concerns:
Then, as I shifted from the initial research to the design phase of the project, I mapped user journeys that could provide a closer look at how the app might address common pain points.
Wireframes and Lo-Fi Prototype
After some early sketches, I used Figma to create wireframes.
I then transformed the wireframes into low-fidelity prototypes to experiment with different user flows.
Usability Study
After I converted my wireframes to lo-fi prototypes using Figma, I conducted a moderated usability study.
During the usability study, the moderator asked participants to complete the following tasks:
Open the app and begin the virtual tour
Move forward and backwards. Look left and right.
Approach an artwork displayed in the first room and select it.
Leave the artwork and enter another room in the museum.
Participants performed the first task without issue, and all completed the second and fourth tasks as well, though one participant found it necessary to open the “Instructions” overlay.
The most common pain point was task three—in particular, selecting an artwork. This finding inspired me to develop a new way of highlighting selectable objects in later iterations of the design.
Primary Research Question
Can touchscreen users successfully move through the virtual space and select artworks?
Key Performance Indicators
Time on task, conversion rates, and system usability scale.
System Usability Scale
Participants will score the following five statements by selecting one of five responses that range from “Strongly Disagree” to “Strongly Agree.”
I find the app unnecessarily complex.
I think the app is easy to use.
I imagine that most people would learn to use this app quickly.
I feel confident using the app.
Mockups and Hi-Fi Prototype
This process ultimately resulted in the mockups and high-fidelity prototypes, which I created in Figma.
Accessibility
From start to finish, I kept universal design principles in mind and worked to ensure accessibility:
The foreground and background colors have a contrast ratio of 12.68:1.
All animations are between 150 and 500 milliseconds in length and can be disabled.
The use of paragraph styles, alt-text, and other web accessibility measures ensures compatibility with assistive technologies such as screen readers.
Universally recognizable iconography supplements and in some cases replaces English language text.
Users can employ a range of devices to interact with the virtual environment, including a touchscreen, game controller, or VR headset.