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.  

Personas - Sofia VG.jpg

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. 

User-Journey-Map-Virtual tour app Sofia.jpg

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 sketches.jpg
HOme screen final.jpg

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

Group 46.jpg

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 

save art before.jpg

Users can click the image to find more info about the artist and the art work. 

screen 3.jpg

Low-fidelity prototype

Front wireframe.png

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.

save art before.jpg
save art after.jpg

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. 

virtual tour art info before.jpg
virtual tour art info after.jpg

Mockups Sample

Home screen.jpg
collections.jpg
art work screen.jpg
Virtual tour iso.jpg
about.jpg

High-fidelity prototype

mockup-home-2.png

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

Image by Michele Caliani