Mobile app | Excercise for Google course UI/UX specialisatioin|February-April 2022
Where art is the epicenter and virtual
tours enhance the experience of the
gallery visits.
Project overview
The product is a virtual tour web application to provide online access to the exhibitions held in the Edin Art Gallery in Edinburgh.
Problem Statement
Art should be accessible to all. Ongoing lockdowns around the world for several months stressed the need of using online solutions to recreate the feeling of being in a gallery, as access to them had been restricted. A virtual tour soon became a necessity making art reachable again.
Idea
The goal is to provide a seamless experience to the art lovers and showcase the art of well known and emerging artists.
Role and responsibilities
As this project was part of the course for the Google UX design certificate I worked on all aspects of the project as a UX designer from conducting the user research to wireframing and prototyping.
Understanding the user
-
User research
-
Personas
-
Problem statements
-
User journey maps
User research - Summary
For this project I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. User research was based on reaching out to friends and art lovers that were willing to provide their thoughts and contribute to this project.
Before commencing the research I assumed that not many people would have experienced a virtual tour, and that most of the existing virtual tour apps would be offering an adequate experience of a virtual art exhibition which proved not to be the case.
Pain points
It is difficult to navigate through the artworks all at once and there is no easy way to highlight the artworks that you would like to revisit
Navigating through the 3D space is not always smooth and it is hard to find an easy way to exit the exhibition when you decide to do so.
It is hard to find extra information easily about an artwork or the artist.
Information for the exhibits obstruct the view of the artwork when overlayed on its image and can be destructive
Persona: Sofia
Problem statement
Sofia is an art enthusiast and an online Art History lecturer who needs easy access to virtual galleries in order to discover new art and collect material for their lectures because they want to connect with their culture through art and keep updated with new artists.
User journey map
Creating a user journey map will help me understand the user’s needs and expectations. A source that will provide inspiration to design a useful, functional app.
Starting the design
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability Studies
Paper wireframes
My aim is to allow users to browse the art works offered through the gallery. Also I want to emphasise the virtual tour option that will provide a more engaging experience to users. I went through iterations of the home screen trying to find the most appropriate design to fulfil my goals.
Home screen
After several iterations, I ended up with a final design for the home screen
Digital wireframes
Users can access all functions from the home page with more than one way.
Actions include:
-Browse collections
- Enter the Virtual tour gallery
-Find info about the gallery
-View favourite art work
Virtual tour option at home screen
Easy access to functions with icons menu
While browsing the art works you have the ability to see more information when you click on the images, share art works or request a price from the gallery.
Users can share an artwork or request a price
Users can click the image to find more info about the artist and the art work.
Low-fidelity prototype
Usability study: parameters
Study type - moderated usability study
Location - London
Participants - 5
Length - 3 days
Usability study: findings
Overall users found the app easy to use but they would want to see some more functions and easier access to information about the art work and the artists.
Some icons used where not very clear to the users.
Users want to be able to save their favourite art.
Users found it difficult to find more info about an artwork while in the virtual tour.
Refining design
-
Mockups
-
High-fidelity prototype
-
Accessibility
Mockups - note 1
Before the usability study there was no option to save your favourite artwork. Also the price tag did not present clearly the request price function.
A like button added as an option to save artwork and a dollar icon replaced the price tag icon to better reflect the function and blend with the rest of the design.
Mockups - note 2
Before the usability study there was a small bubble to show the art work’s details which made it difficult for users to access more information.
The size of the bubble increased and a distinct ‘MORE’ button added to make access to info for the respective artwork easier.
Mockups Sample
High-fidelity prototype
Accessibility considerations
Followed high contrast rules to make the app visually accessible to users.
Use of icons for easy navigation.
Use of images to make the app looking close to the finished product that helps users better understand the design.
Going forward
-
Takeaways
-
Next steps
Takeaways
Impact
The app makes art accessible to a bigger audience through an engaging experience.
One quote from peer feedback:
“I found browsing art through Edin’s gallery app fun and interesting, I like the idea of visiting curated exhibitions online”
What I learned
As design was evolving through the process I feel I learned a lot from the users. Their feedback introduced new features and different flows that increased the functionality and usability of the app.
Next steps
Get feedback from more users and identify areas of improvement.
Conduct more usability studies to validate the changes in the design process.
Conduct more user research to identify new areas of need.
Thank you
