September 15th- October 30th (6 weeks)
High-fidelity prototype of a mobile application
Solo UX Designer, User Research, & UI Designer
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.
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.
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.
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.
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?
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.
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.
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:
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.
Findings from both research methods helped to define the initial product. As I began to ideate, I focused on these goal statements:
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:
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.
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.
After building low-fidelity wireframes in Figma, I prototyped each screen.
Don't mind the mess, this is my very first prototype.
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:
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.
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.
Access the Figma prototype using the button or screen below. Press R to restart the flow.
Reflecting on the MVP
Some next steps include:
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.