Timeline
September 15th- October 30th (6 weeks)
Deliverables
High-fidelity prototype of a mobile application
Role
Solo UX Designer, User Research, & UI Designer
Tools
Figma, Miro, Google Workspace
The Problem and Solution
Visitors would like to access succinct information about artists and sculptures as they explore The Dallas Sculpture Garden. The descriptions that typically accompany artworks at museums or galleries can be inaccessible or may lack detail.
A high fidelity prototype of a minimum viable product that allows users to search, browse, and explore was designed and created.
Takeaways
As my first real exploration within UX design, I learnt more than a couple of things along the way:
Experiment with tools. I taught myself new tools throughout this project, primarily through experimentation. I turned to online tutorials for help when necessary (there's so much!), but built my first prototype with Figma through lots of trial and error. I appreciate all the "ah-ha" moments and am motivated to learn more about the tools used in UX design and beyond. It's difficult to find a stopping place, especially as you learn a new tool.
Consistency and repetition is key. When conducting initial interviews and usability tests, I noticed users has similar pain points. For example, a finding from usability tests was that users expected the search bar to be consistently placed throughout the app. I realized how important repeated mistakes and concerns are. An inconsistent design was just inefficient.
Keep it simple (and accessible). I struggled with narrowing down ideas and concepts, especially because of the lack of direct competitors and constraints of the prompt. By conducting research with participants and focusing on accessibility, I was able to design with more clarity.
This case study was conducted as a part of the Google UX Certification Course. The Dallas Sculpture Garden is completely fictional.
EMPATHIZE
Background
The Dallas Sculpture Garden showcases local artists and temporary exhibitions that change with the seasons. They aim to make art accessible for everyone and encourage connections between artists, and visitors from near and afar. Around 70% of visitors are local and 40% of those visit repeatedly. The garden is family-friendly, but a majority of visitors are between 20-65 years old.
The garden would like to design a product to enrich a visitor's experience by offering more information about art and artists as they navigate the garden.
User Interviews
I interviewed 5 participants who have visited an art gallery or exhibition within the last year. I focused on asking open-ended questions to encourage conversation.
Goals:
To understand the processes and emotions that users experience around seeking out information about an artist while at a gallery, exhibition, or museum.
To identify common user needs and behaviors and understand how these are in line with the task this product is trying to address (enriching a visitor's experience by offering more information).
Some research questions:
What kinds of information, if any, do you seek out when visiting a gallery and observing artwork? How is this information represented usually? Do you like or dislike the way it's represented?
Share any frustrations you may have with guides that you have used at an art gallery. Guides include audio, maps, or docents that conduct tours.
What information or details would you like to accompany a piece of art? What would you like to learn more about? Do you inquire or search for information before or after your visit- How?
Affinity Mapping
I noted down relevant comments in Miro to organize themes. It helped to better understand users and their needs as well as define initial product requirements.
Pain Points
I noticed common pain points that participants mentioned at least 60% during interviews:
All users would like more information than just the description that accompanies artworks. Descriptions on plaques can often be lacking depth.
All users want an accessible way to retrieve information quickly. Written descriptions can often be hard to read from a distance.
Some users also mentioned that the ability to find this information prior to visiting would also be useful.
Some users like guided tours for the insightful information but like the freedom of exploring and appreciating art on their own time and pace.
Storyboarding (Big-Picture and Close-Up)
Personas and User Journeys
Using the quantitative and qualitative data from interviews, I defined two target group profiles, Andrea (25, the solo art-enthusiast) and Jonas (68, the intellectual caregiver) to better empathize with my primary user groups and prioritize goals according to their needs.
I considered local visitors- new and repeat as well as out-of-town visitors.
There are of course other target groups, like the significant other that was dragged along.
Competitive Analysis
By conducting a competitive analysis of various mobile apps, internet apps, and websites, I was able to gain more insight into how information about art/artists is presented.
Gotta get ahead of the competition...
Some findings include:
Instructional splash screens, simple bottom navigations, and interactive maps that guide the user.
Multimedia content (audio players with or without a transcript) that is easy for the user listen to or skim through as they observe art.
Easy to follow sections of information, organized by relevant categories.
Simple, yet artistic UIs that don't distract from images.
Multiple methods (i.e. scanning, entering a number, searching, using the map) to access the same information about a particular piece of art.
Some apps lacked the ability to search.
Some apps did not have a transcript to accompany the audio guide.
DEFINE
Problem Statements
Constructing problem statements allowed me to define the problem and begin to ideate. I referred to the goals and frustrations of the personas and opportunities from their user journey maps.
Andrea is a busy university student who needs an app with insightful information about artworks and artists because she want to be able to guide herself around the sculpture garden.
Jonas is a visiting grandfather who needs an app with interesting but brief information about artists and art because he wants to be able to inspire his grandchildren while teaching them about the art they see.
Goal Statements
Findings from both research methods helped to define the initial product. As I began to ideate, I focused on these goal statements:
Help users navigating the garden on their own find and learn more information about artworks and artists quickly and easily.
Help users in a group to view visitor information prior to visiting and share insightful information about artists and artworks during their visit.
I knew the solution had to:
Help guide a user throughout the garden.
Provide a way for users to both search and browse art and artists.
Be equitable and quick to learn.
A mobile app was decided to be the best platform for the product. as it was easily accessible and could present information more effectively. Handheld audio guides and a physical guides were also explored.
How Might We
“How might we” (HMW) is a design thinking activity that can be used to translate problems into opportunities for design. Here are some HMWs I explored:
How might we...
Improve artwork and artist descriptions for those interested in learning more?
Effectively present information about artists and artworks in a way that’s easy to access for both repeat and new visitors?
Provide an enjoyable and as seamless as possible experience for our users by using a product such as a mobile guide app?
IDEATE
User Flow and Sitemap
Before sketching, I created a user journey flow and sitemap to visualize common pages. These pages were then organized as a sitemap.
A lot of the pages are repeated- still figuring out the right way to create site maps.
Paper Wireframes
Below are paper wireframes where I began to ideate main pages, such as the homepage, artist and art informational pages, browse pages, settings, and scanning.
Low-Fidelity Prototype
After building low-fidelity wireframes in Figma, I prototyped each screen.
Don't mind the mess, this is my very first prototype.
TEST
Usability Testing
By conducting a moderated usability study with 5 participants, I was able to see where users struggled and discussed how the product could be improved upon.
Some tasks and questions included:
Browse through the artists, pick one, and locate where their artworks might be on the map.
Change the app’s language.
Use the scanning feature to find information about an artwork.
How would you organize the information and layout of the app to best fit your needs?
How did you feel about this artist bio/guide app overall? What did you like and dislike about it?
I organized comments and observations with an affinity diagram to organize themes and discover insights.
Based on the theme that: the scan or search features were not accessible or clear enough for almost all users, an insight is: users need a clearer way to access and navigate the scan and search features.
Based on the theme that: most users want easier access to the audio feature, an insight is: users need the audio feature to be more noticeable.
Based on the theme that: most users would use the map to guide themselves, an insight is: users need a map with some type of route or indicator so users can guide themselves.
Based on the theme that: some users thought that the language settings could be more clearly organized, an insight is: users need a more organized way of changing the language.
Iterating the Low-Fidelity Wireframes
Before creating a high fidelity prototype, I iterated upon the first prototype with the insights I gathered from the usability test. I also researched best practices online. Some changes include:
Creating an expanded search bar, consistently placed at the top of each page, so users are able to access the search/scan feature from all pages and without an extra step.
Adding more negative space around the art/artist pages to help draw attention to the audio player.
Adding a tracking icon on the map to indicate where a user is while at the garden to help guide the user.
Creating a drop down menu to select a language in the settings.
Differentiating artists from sculptures by shape.
Organize information into 1 column, rather than 2 to improve readability.
UI
Mood Board/Brand Personality
To help guide the visual identity of the product, I constructed a mood board based on the brand personality. This helped define the user interface (UI) of the app.
A mood board for anything is fun.
UI Style Guide
Below are many of the UI elements, colors, and typography utilized throughout the app.
Not exactly a design system, but we're getting there.
Iterating Further and Accessibility Considerations
After creating the first high fidelity prototype, changes were made to clarify certain sections. These changes are depicted below:
A splash screen with brief explanations of features was added and animated.
Replacing icons on the search page with images of artists and sculptures so users can find a sculpture they may be viewing more quickly.
Adjusting the layout and spacing on the artist info page to improve readability.
Creating a "sculptures by this artist" section on the artist info page.
Increasing touch target sizes throughout the app (social icons on the artist info page).
Other tests and changes not pictured include:
Testing for color contrast and adjusting certain colors (reviewing WCAG).
Removing items that could not be interacted with (map) from the homepage to create a more straightforward experience. By introducing the map feature on the splash screen, users were aware ahead of time of the feature.
Adding state changes and motion to provide additional responsiveness without detracting from the accessibility of the app.
The Product
Access the Figma prototype using the button or screen below. Press R to restart the flow.
Reflecting on the MVP
Ultimately, the goal is to create a product for the user. The current product addresses the most common pain points and the basic goals outlined during the define stage (helps guide a user throughout the garden and provide a way for users to both search and browse art and artists).
The app can evolve and address additional user needs in the future. If I could have revisited a step in the process, I would have conducted field research at an actual sculpture garden or museum to focus in on users that are more passionate about learning more and may have been more active about retrieving information.
Next Steps
Some next steps include:
Ideate a way for users to plan a route based on what they would like to see.
Add directionality to the location icon on the map. (So users know which way they are facing.)
Brainstorm how visitors will be informed of the app- Is it featured on the website, Google maps, or physically throughout the garden with QR codes on signs or map guides?
Consider other target groups, like those who visit the garden to accompany someone else- How can we inspire or interest them?
Observe how users utilize the app at the garden and collect reviews of the app.
Conduct additional usability tests to reveal new insights.
Some additional features that can be explored in the future include:
Add features for users that may want more interaction (notifications of new sculptures or liking/commenting on sculptures).
Experiment with different platforms, such as accessing the audio guide on an Apple Watch.
If the stakeholders want to feature more than just artists and art on the app, like interesting flora, additional research and ideation of how to incorporate those items can be conducted.
And so much more...
Nice. You made it to the end!
Thanks for reading through this case study- If you have any questions or comments, please don't hesitate to reach out.