The Fleeting

Mobile app design
July - September 2021
‍
Figma, pen and paper
Objective
Design a mobile app for a local art gallery that helps users build connections within the local arts community.
Solution
The Fleeting is a fictional contemporary art space that provides a space for visitors to gather, relax, and discover today's art. Its mobile app will allow users to connect with local artists, gallerists, and fellow visitors before, during, and after attending events at The Fleeting.
Image file of mockups
My role
This is a student project for my Google UX Design Specialization program. As the sole UX designer, I conducted user research, created paper and digital wireframes, created low and high fidelity prototypes, conducted usability studies, and iterated on designs.
I conducted six user interviews and created corresponding empathy maps. Two user groups identified were professional artists and visitors who visit an art gallery for social obligations.

Research revealed that the professional artists wanted multiple options to interact with featured artists or with the gallerist during an event, based on each user's comfort level being in a crowd or having an in-person conversation with the artist. Artists also shared that they appreciated experiences when visitors had "VIP" treatment while at an event.

Research also showed that users who attended gallery events for social obligations (e.g., dates, requests of friends or family) were interested in learning more about the featured artists and exhibit prior to the event or be able to privately chat with the gallerist or event organizer during the event.

Participants from both user groups also shared various accessibility needs in how they are able to access art or an art event.
Research
Research summary
Research interview questions
Pain points
Personas
User journeys
Competitive audit
Research interview questions and participant quotes
1. Can you describe your current schedule and how you balance your responsibilities with recreational events?

2. How often do you attend events for local artists, whether in person or virtually?
- When you do, what is your motivation for doing so?

3. Walk me through a time when you attended a gallery event, starting from when you made the decision to go.
- How did you find out about this event?
- What do you like to do while attending an in-person or virtual event?
- How do you access or interact with information about the artists during an event?
- How did the experience affect you after attending the event?

4. Why do you like or don't like to learn about the featured artists before attending an in-person or virtual gallery event?
- During the event? After the event?

5. What challenges do you face when attending an in-person or virtual gallery event?

6. Is there any way in which you feel these challenges could be resolved?
"The most impactful scenarios often involves some sort of sense of exclusive access and conversation with a passionate, knowledgeable individual, and also if there's an element of an aesthetic, like a beautifully designed environment. I think those all deepen the experience."
- Participant
"I don't feel comfortable with art because I don't understand it...having that interaction with a person where they can explain it is very important for me to enjoy it."
- Participant
"When you design an exhibit, you want to create multilevel interaction pathways for people who are the streakers, the strollers, and the scholars."
- Participant
Access to information
Users want the ability to access information about the gallery and featured artists before, during, and after gallery events.
VIP perks
Users want a unique or personalized experience while visiting the gallery and while using the app.
Networking options
Users want multiple outlets to interact with artists or with the gallerist.
Image of Dana's user persona picture and description
Image of Sam's user persona picture and description
An image file of Dana's user journey map
Big picture scenario:
Image file of big picture storyboard for Dana using the app to connect with a gallerist during the event
1. Dana is nervous in the art gallery with little knowledge about the exhibit.
2. She downloads and opens the app on her phone.
3. She relaxes some while reading the welcome and exhibit summary.
4. She finds the gallerist bio, reads it, and locates the gallerist photo.
5. She identifies the gallerist and approaches him.
6. She is relieved to have the help of the gallerist and excited to learn more.
Close-up scenario:
Image file of close-up storyboard for Dana using the app to connect with a gallerist during the event
1. Dana opens the app on her phone.
2. She sees the app's welcome message.
3. She clicks on the current exhibit page.
4. She clicks on the "BIOS" page.
5. She clicks on the gallerist bio.
6. She studies the photo, reads the info, and identifies the gallerist in the gallery.
Competitive audit
I reviewed four competitors' mobile apps for guidance and to identify opportunities.

Click below to view my audit spreadsheet notes and my audit report.
Audit spreadsheetAudit report
Image of homepage for Crystal Bridges' mobile appImage of homepage for Arkansas Museum of Fine Arts' mobile appImage of homepage for Google Arts and Culture's mobile appImage of homepage for Clinton Presidential Center's mobile app
Starting the design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability study
I started sketching paper wireframes for a homepage, a featured exhibit page, a bios page, a direct messaging page, and a lounge page.

For the homepage I wanted to use a large image space to catch the user's attention initially to raise appeal to visit the gallery and to have a semi-immersive experience if not physically at the gallery (depending on the type of media element). Separately, I wanted the lounge page to serve as a space for users to interact with one another before, during, and after gallery events.

I then made digital wireframes and conducted a usability study.
Image of paper wireframe for homepageImage of paper wireframe for exhibits pageImage of paper wireframe for bios pageImage of paper wireframe for direct messaging pageImage of paper wireframe for community page
Homepage
"Why do you have to click enter to see the current exhibit? Why not just open the app and it automatically shows the current exhibit and featured artists?"
- User
The majority of users had trouble finding the page to send a direct message to the gallerist, and one suggested moving the CTA to a more prominent location.
Image file of updated digital wireframes for the homepage
Lounge
"I'd have it where you could click into specific conversations that already exist, almost like how Reddit has subfeeds."
- User
Image file of updated digital wireframes for the lounge
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of accessing the current exhibit information, the feature to contact the gallerist, and the access to the lounge.
Low-fidelity prototype
Image file of low-fidelity prototype
Affinity map
Image file of part of the first affinity mapImage file of part of the first affinity mapAffinity map from first usability study
Usability study insights
Users need a more intuitive way to access the DM feature for the gallerist. Users want additional features within the app. Users need more information about the potential value of using this app.
Refining the design
Mockups
High-fidelity prototype
Usability study
After the first usability study, I created the initial design for the local gallery, incorporating the user feedback. However, I received valuable peer feedback that brought my attention to the fact that the UI elements were not indicative enough of an art gallery (as opposed to a brand of another industry). I decided to visit an actual local museum and study their use of color in their branding and environment. Using their UI for creative direction, I adjusted the color scheme and replaced all the images in my initial mockups with photos I took while visiting the museum.

I then conducted a second usability study for additional user feedback.
Image of comparison of digital wireframe, initial mockup, and final mockup of homepage
Homepage
Users wanted another access point to DM the gallerist placed above the list of featured artists on the current exhibit page to avoid confusion due to similar interfaces between the DM CTA for the gallerist and the DM CTA for the artists.
Image file of transition from the mockups of the homepage after a usability study with labels
Lounge
Users suggested that edits be made to the "Join" and "+" buttons in the lounge to better distinguish each of their functions.
Image file of transition from the mockups of the lounge page after a usability study with labels
Image file of mockups
High-fidelity prototype
The final high-fidelity prototype presented clearer flows and CTAs for contacting the gallerist, starting a new discussion, and joining a discussion.
High-fidelity prototype
Image file of high-fidelity prototype
Affinity map
Image file of part of the second affinity mapImage file of part of the second affinity mapImage file of part of the second affinity mapAffinity map from second usability study
Usability study findings
Users need a more intuitive way to make a clear decision to either start a new discussion or join an existing discussion in the lounge. Users want additional CTAs when accessing the gallerist and current exhibit. Users found the app appealing to use and envisioned themselves using the app with their favorite current features and ideas for additional features.
The app currently excites users to connect with one another before, during, and after an open exhibition and has inspired multiple users to brainstorm a long list of ideal features.

Moving forward, I plan to design additional features suggested by users to enhance their experience in the lounge and features that establish more purpose to use the app before and after a gallery event. I will then conduct another round of usability studies with new research questions that focus on the appeal of the app's new features to users.
Going forward
Next steps
Accessibility
Takeaways
A note on accessibility
When thinking about the current design in respect to accessibility, I have used text labels with icons to clarify functions and used appropriate color contrast ratios for legibility. I would like to integrate a translator into the design for multiple languages and to design a more immersive experience for users overall. I believe incorporating VR/AR would address some users' wants to feel like they are experiencing something unique, customized or VIP-worthy but also to feel like they can more easily access the art.

Participants in the user research defined accessibility in a variety of ways that are significant to keep in mind as this project develops.
Accessibility as an art viewer
Users felt more connected with the art when sufficient information was provided upfront to ground the user's understanding of the artwork. They noted without having to focus too hard on the art pieces themselves or too much on prior research of the artists, they could immerse themselves more fully in the exhibit space, making the experience more memorable.

They also noted how the use of interactive elements helped familiarize or educate users with the art's content.
Accessibility as a guest
Users also felt like they were provided for uniquely when offered curated or behind-the-scenes/exclusive-access experiences while viewing the art, a conversation with someone who was passionate about the art, or simply the privacy of an uninterrupted experience so they could take in their environment.
Accessibility as a visitor
Users felt that experiences with art should be easily accessible for all, mentioning:
- kids
- those with low income
- social media users
- those with mobility, vision, or hearing impairments
- multiple language users
- those at risk of overstimulation
‍
The venue's location should be easily accessible in the community (whether in-person or virtually).
Takeaways
Thank you for reviewing my work on this mobile app design!
‍
During this project, it was significant for me to understand how to let go of some personal aesthetics to develop fresh UI elements that represented The Fleeting more authentically. Though I had unique users in mind from the research group, I didn't have a unique gallery in mind for The Fleeting until later in the design process. Even though The Fleeting is a fictional client, I still needed identify what made it unique and adjust the UI accordingly. It was only then users were able to recognize that this app belonged to a gallery. A basic, clean design wasn't going to cut it in terms of readability.

Coincidentally, the museum that I used for inspiration currently didn't have a mobile app available to the public. I eventually reached out to them for feedback and possible collaboration but didn't receive a response. I considered it a win nonetheless to recognize the opportunity and initiate contact.
© 2023 - 2024 Christine Hogg Design | All rights reserved