The Michael Pennie Gallery
Art Gallery Tour
PROJECT TYPE
Mobile Application
TITLE
UX/UI Designer
DATE OF PROJECT
February 2023 - March 2023 (4 weeks)
TOOLS USED
Figma,
Adobe Creative Suite,
Miro
Overview
The objective of the project was to explore the requirements for an interactive mobile phone art gallery application for the student gallery space at Bath Spa University.
Deliverables
At the end of the project I was tasked with creating a high fidelity prototype of a mobile app for the art gallery space, and providing a full case study to the gallery director for their reference and consideration, for future endeavors at Bath Spa University.
MY ROLE
I undertook this project from conception to delivery of a high fidelity prototype and full case study.
I assumed the following roles:
User Experience (UX) Designer
User Interface (UI) Designer
Project Outputs
Representative user interviews
Empathy mapping
Persona creations
Journey mapping
User flowcharts
Competitive analysis
Wire-frames
Information architecture
Low-fidelity Prototypes
High-fidelity mock-ups and prototypes
Design system
Usability testing and analysing
THE PROCESS
The project commenced by extensively researching and conducting one-to-one interviews with gallery visitors, students and staff from Bath Spa University to gather valuable information.
Through conducting interviews with individuals, I aimed to gain an understanding of their user requirements including their challenges and concerns when it came to mobile applications in the gallery space at BSU.
This approach enabled me to uncover a variety of issues that needed to be addressed and resolved. Armed with this information, I proceeded to create empathy maps, user journeys and personas.
Chris Davidson
Chris is an Artist who needs additional information on some artworks he has seen because without this he doesn’t understand everything he has seen on display.
Chén Yǎ
Chén is a Chinese student who needs all the information to be accurate and complete in her native language as without this she will not get a full understanding of the work.
Chén has limited time, she needs a way to navigate around the artworks to ensure she sees everything she wants to, without this she could miss important elements of exhibition.
Ava Brooks
Ava is a mature student who needs an easy to pickup and use application as she gets intimated by technology and will not use it
Ava wears bi focal glasses to read with, she needs a solution that will give her information on the works even if she has forgotten her glasses because without this she will be missing out on vital information.
THE CHALLENGE
Upon concluding this empathizing process, I drew this up as the main problem that needed addressing.
Visiters to the Michael Pennie Gallery required a solution that allows them to easily utilize an application to obtain supplementary information on art works in the gallery space, either while visiting the space or being able to view it at a later date.
Additional areas that posed challenges included:
The information for artworks should be clear and concise, while also allowing for further exploration if desired
Several users remarked the app should be simple to understand and operate
Real world navigation would be beneficial for indicating the location of the artwork in the space.
Users with additional language requirements stated that translations are often wrong, or missing important information.
The platform needed to addressed additional user needs such as dyslexia, visual impairment etc.
The app will let users effortlessly retrieve information while navigating the user to each artwork, this will affect users’ experiences when they go to the gallery by ensuring they don’t overlook artwork or information.
The Competition Audit
I looked at how different competitors use mobile phones for information presentation. The competitors I analysed were the Edge Gallery at Bath University, the London Gallery West, the Roman Baths, the Holbourne, and the Victoria Art Gallery.
To further my research, I visited various locations including Stonehenge, Tower of London, The Roman Baths, Westminster Abbey, and Frankenstein Gallery. This allowed me to observe first-hand the technological solutions used by these establishments to provide information to their visitors.
Competitors’ strengths
Informative videos, audio and text
Simple info that has extra indepth information when user clicks on links
Lots of photos including detail photos
Timelines/stories about the artworks
Printable documents of the artworks
Competitors’ weaknesses
Limited comprehensive or detailed information
The use of templates can make them seem somewhat uniform or lacking in uniqueness.
The minimum is done when it comes to accessibility
Low up take for mobile applications used on tours and information
Lack of ability to tailor experience based on time
Brainstorming
Some of the techniques I used for idea generation where Crazy 8's, How Might We, Sketching and Story-boarding to name just a few.
THE SOLUTION
After reviewing the brainstorming activities, I decided on the solution that I wanted to advance to the prototyping and testing stage.
My proposed solution included a user friendly interface that could be understood in 30 seconds or less. The interface would utilize the phone’s camera and AR technology to recognize artwork and display simplified descriptions and images with links for users to explore information further if they require.
Additionally, users would have the option to email a full information pdf document of each artwork for viewing at their convenience.
To navigate the gallery, users would utilize a GPS solution within the application. The navigation system would be user-friendly and visually uncluttered. It would have the ability to adjust the experience based on the time that the user has. Finally the navigation system would cross off seen artworks to help users keep a track of their progress
This proposed solution addressed identified pain points. However, during the prototype stage, I also needed to consider accessibility issues such as accurate translations, providing the option to increase font size and the use of text-to-speech.
Information Architecture
To aid in comprehending and organizing the information structure of the website, my first action in the process involved developing a user flow that outlined the anticipated user journey within the application.
Once I established this user flow, I proceeded to construct the hierarchical structure of the site, known as the tree structure information architecture.
Wire Frames
Handdrawn wireframes
Digital wireframes
Low-Fidelity Prototype
Using Figma I converted the digital wireframes into a low-fidelity prototype, when it was complete it was taken to the first usability testing stage. The low-fidelity model can be accessed through this link.
Useability Testing (Lo-Fi)
The low-fidelity prototype, needed adjustments these where based on the research from usability testing I conducted.
The study took the shape of one-to-one interviews where users where required to complete tasks. Through observations and information suppled by the users I created affinity diagrams to help analyse the findings.
Insights
Based on the theme that: Users were confused about where they were within the application, an insight is: users require an improved solution to know where they are in the application.
Based on the theme that: Information and options were not seen as they did not scroll, an insight is: areas that scroll need cues that they can be scrolled.
Based on the theme that: Users were frustrated when trying to click too small hotspots, an insight is: all click able objects need to be larger.
Based on the theme that: Users had confusion on what to click on and not all functions were understood, an insight is: button labelling needs to be simplified and revised.
Based on the theme that: Users were not aware of the email function and didn’t use it, an insight is: Email function needs to be placed in a more dominant screen position.
Based on the theme that: Users got confused about the camera function, an insight is: additional instructions and screen needed to make this process more streamlined.
Based on the theme that: Users found it difficult to change the language options, an insight is: reorganization of top level navigation structure to become more user friendly.
Adjustments
Adjustments where made to the lo-fi model and tested a couple more times before being taken forward to the next stage.
High Fidelity Prototypes
Subsequently, high-fidelity designs were created through the process of mocking up ideas. Before a final prototype of this version was developed, which can be accessed through this link.
Usability Testing (Hi-Fi)
The High-fidelity prototype, needed adjustments these where based on the research from usability testing.
The study took the shape of interviews where users where required to complete tasks. Through observations and information suppled by the users I created affinity diagrams to help analyse the findings.
Insights
Based on the theme that: Users did not explore the Scan Artwork function at all to start with, an insight is: Improve the wording of the Scan Artwork function to enhance its clarity and provide some form of instructions on the homepage that explains the meaning of each option.
Based on the theme that: Users were confused on what to click, an insight is: Ensure that all areas that need action to happen have a description on what to do (main issues are home screen and gallery screen).
Based on the theme that: Users did not find this language adjustment intuitive, an insight is: To check application hits Android and IO standardization for language options.
While only one person has identified these crucial issues that require attention, they are:
No audio controls for play,stop, and volume. - Need to add audio controls when audio is playing.
“Being a lady I would like to know where toilets are” (and other facilities) - Add general facilities to the map screen such as toilets and cafeteria.
What does the PDF include? - Email screen includes a short paragraph on what is in the PDF including size of document both page number and MB.
Motion icon was confusing - Look at motion control icon that meets Android and IO standardization.
Adjustments
Adjustments where made to the hi-fi model and then delivered to the gallery director along side the full case study.
If you wish to delve into more details of the project, you can follow this link to access my comprehensive case study on Behance.
LESSONS LEARNT
This project required a diverse range of skills. While I have previously worked in UI design, UX design demands an entirely new skillset in approaching design problems. By following the principles of design thinking, I was able to consider the user’s perspective, identify their pain points, and ideate solutions accordingly.
Moving forward with UX design projects, I aim to sharpen my interviewing and usability testing skills by arranging interviews with both familiar and unfamiliar individuals. Repetition is key to honing my abilities in this area. Additionally, I plan to adhere more closely to the guidelines for Android, iOS, and web design by thoroughly reviewing published documentation and incorporating it into my work.
Learning for this project Figma was a fun exploration, but having prior experience with Adobe XD helped me understand the flow of the program and adapt quickly. In the future, I intend to expand my knowledge of both programs. I anticipate returning to Figma to further familiarize myself with its features. From a personal standpoint, I find the field of UX design to be both exciting and intriguing, and I look forward to delving deeper into it in the future.
