Tour AGO
An app designed to help visitors interpret art within the Art Gallery of Ontario.
Role:
UX designer, researcher, copywriter, UI designer
Time Frame:
3 Months
Method:
Double Diamond
Project Type:
Product Design, Service Design
Project Prompt:
Improve an experience within the AGO
Tools:
Figma
Discover
Interviewing art gallery visitors to uncover the problem area's
To kick start the project I started off with an interview process where I interviewed 5 people about their experiences. This interview would inform me of any existing gaps within the art gallery experience what could be mediated by an app design.
-
Learn about people's general experience within art galleries
-
Learn how users interact with information provided about art
-
Unearth barriers gallery visitors experience
-
understand visitors relationship w their phones while at a gallery
Key Interview Insights
Users express feeling alienated and excluded within the gallery due to "not understanding art".
Many users find constantly reading information to gain value from the art they're viewing boring.
Guided tours often move too quickly for visitors to form their own opinions of the art, in addition to tour guides dictating visitors opinion of the art.
Long descriptions can overwhelm visitors, who often take photos to review later but rarely do.
Visitors said their favourite part about visiting art galleries was forming their own opinions and interpretations about art.
Defining and Ideating
Defining Persona's
Defining "How Might We" Statements
By synthesizing all of the visitor interview themes and insights as shown previously I created "how might we" statements which I will use to help me in the brainstorming and ideation process.
How might we...
relay information about art that visitors care about
How might we...
help visitors "understand art" to feel less excluded/ alienated within the gallery space
How might we...
aid in the process of creating interpretations
How might we...
deliver information about art with minimal phone usage?
Inclusivity and Accessibility Considerations
-
Varying attention spans.
-
Disabilities such as visual impairment play a role in how well users read content.
-
Some gallery rooms are dimly lit, so a dark mode should be readily available.
-
Varying languages.
-
jargon used within art studies may not be known by those not educated in art studies.
Brainstorming/ Looking for an Opportunity
While I'm not showing the messy and hard to organize brainstorming which led to my final concept, you can view the brainstorming process work here. I will also will summarize it in words below.
-
Since majority of problem area's revolved around information about art and comprehension, I knew I would be making an app that delivered information about art to users.
-
Since users said interpreting art was their favourite part of the gallery experience, the app would have to deliver info that would prompt them to do some solo interpreting.
-
To avoid constant phone usage, the app would have to deliver info quickly and at the right times.
-
Since many users reported inconsistencies in valuable information available at the gallery I knew the information delivered would have to be concise, and relevant.
The final how might we statement:
How might we create an app which delivers information about art to users efficiently, summarized and with content that helps them interpret art on their own?
Develop
User Journey
The on-boarding aspect of the app was crucial because it would uncover which type of information the user would like to see about art, so a majority of the planning was figuring out how to get information from the user on this topic.
Wireframing
Lo-Fi wireframes
Testing
Gathering Feedback
From the ideation phase to the final product I conducted a total of two usability tests, where my goal was to test the functionality, the usability, the comprehension and most importantly, if the product concept solved the initial problems.
Test #1
In the first test, I was focusing ore on the on-boarding process as this is the area in which I would be explaining the product concept to people. The goal during this test was to see is people comprehended the explanation/tutorial, and what they thought of the concept. In addition, I would also be testing the usability of the on-boarding process
Test#2
After the on-boarding process was finalized and more presentable, I would be able to test the entire app with ease. The second test was more hands on, since the app was meant to be used within a gallery setting, I set up a fake gallery where users would be able to directly interact with the app and paintings and pieces of art they were viewing.
Shown above is the fake art gallery I set up, so I could see how this app might work in a real gallery setting. You can also view the interview and test outline.
Iterations
Change #1: Landing page.
Problem: Text is overwhelming
Users said they felt like they were reading a novel, and the middle-aligned text made it hard to read.
The purpose of some of the text was to explain to users the purpose of the app and how it works.
Solution: I decided to narrow down the text and convey the purpose in a different and easier way, by using a simple straight-forward line.
Change #2: Tutorial
Problem: Product Concept Comprehension.
Not all users immedietly understood what the app does based on the tutorial because it was a new concept, required lots of reading, and the chosen words didnt immedietly make sense to readers.
Solution: To make it immedietly obvious and clear the apps purpose I refered to cognitive overhead design principles which recomend using visual explanations, to the point instructions, and titles that can be skimmed and still explain the purpose and use.
Draft 1
Draft 3
Change #3: Set up page.
Problem: Too Many Options
Problem: Many users said the set-up options were confusing and distracting, because they were wordy and also because they didnt understand what they meant. In addition many didnt use the "randomize" option, and found it confusing. Many reported being unclear what notification delivery would look like, if it would vibrate, make a noise or be silent.
Solution: I got rid of any features that werent neccessary, were confusing and re-worded the ones that were neccesasry.
Draft 1
Draft 3
I also got rid of the multiple prompts available on the Information page, and instead am only going to show the one "Prompt Depth" the user chose, to defer distraction.
Draft 1
Draft 2
Change #4: Notification setting.
Problem: Notifications are unclear.
Many found the notification settings too wordy and felt the process of choosing their settings too lengthy.
Solution: Used to the point and clear text, and opted out of explaining each setting and rather let the title of the setting convey the explanation. In addition i simplified and cleaned up the toggles and put all the settings onto one page to create a quicker completion time.
Draft 1
Draft 3
Change #5: Start/Stop tour mode
Problem: Unsure how to end tour mode.
Many did not know that to end tour mode, they must open the quick actions floating button. Many also did not think that they would have to end the tour mode at all.
Solution: I decided I would bring the "Quick Actions" menu to the user's attention immediately, by having them see it right when they turn on tour mode, the user will then have to close it, this interaction with the element right off the bat will ensure the user is aware of not only the quick action feature button, but also what it can help the users do.
Not shown is the automatic feature which turns off tour mode when the app is closed.
Draft 1
Draft 2
Refine
Deliver
Final Thoughts
Overall I am happy with how this project turned out.
This project taught me:
-
how to plan and conduct usability studies and interviews
-
how to interpret feedback
-
how to create animations in Figma
-
how to design for cognitive overhead
-
how to work on a product design completely solo
Things I found difficult
-
working on a design solo made it difficult to step outside of your own box and consider ideas you’re not married to
-
creating a design system based on existing AGO brand elements, mainly because many of them were not consistent or WCAG approved, so I had to create solutions which met WCAG standard’s and were still on brand for the AGO
If I could redo this app I would:
-
do more A/B testing surrounding the actual product concept
-
visit app templates and use more standardized UI design systems
-
reconsider the color pallet and animations I used to be more simple