Project Overview
Project Overview
Project Overview
Fake Art Gallery is a century-old art gallery situated in the suburbs of a bustling metropolis. With a collection spanning from the Renaissance era to the contemporary, it boasts over a thousand pieces of art, including oil paintings, sculptures, interactive installations, and photography. The gallery is dedicated to providing visitors with a comfortable and convenient viewing experience, aiming to cater to art enthusiasts of all ages and ensure that everyone leaves with a meaningful encounter with art. The target audience for the art gallery's audio tour app includes art enthusiasts, tourists, students, families, and art professionals seeking diverse and enriching art experiences.
Fake Art Gallery is a century-old art gallery situated in the suburbs of a bustling metropolis. With a collection spanning from the Renaissance era to the contemporary, it boasts over a thousand pieces of art, including oil paintings, sculptures, interactive installations, and photography. The gallery is dedicated to providing visitors with a comfortable and convenient viewing experience, aiming to cater to art enthusiasts of all ages and ensure that everyone leaves with a meaningful encounter with art. The target audience for the art gallery's audio tour app includes art enthusiasts, tourists, students, families, and art professionals seeking diverse and enriching art experiences.
Role
UX Designer, UI Designer, User Researcher
Role
UX Designer, UI Designer, User Researcher
Tools
Figma, Adobe Photoshop, Miro
Tools
Figma, Adobe Photoshop, Miro
Date
September to October 2023
Date
September to October 2023
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity
prototyping, conducting usability studies, accounting for accessibility,
and iterating on designs
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
Problems Statement
Problems Statement
Problems Statement
The current audio guide devices lack portability and are limited function, confined to use exclusively within the gallery premises.
The current audio guide devices lack portability and are limited function, confined to use exclusively within the gallery premises.
Goal
Goal
Goal
Design an audio tour app for Fake Art Gallery that allows the user to listen to an audio tour without having to carry an additional device and can be used anywhere.
Design an audio tour app for Fake Art Gallery that allows the user to listen to an audio tour without having to carry an additional device and can be used anywhere.
User Research
User Research
User Research
I conducted interviews and created empathy maps to understand the users I was designing for and their needs. The research revealed that the main user groups of this audio guide app are art enthusiasts, tourists, students, families, and art professionals seeking diverse and enriching art experiences.
This user group confirmed my initial assumptions about the audience of Fake Art Gallery. Additionally, the research revealed that the low portability of the original audio tour device was not the only factor affecting the audience's experience of visiting the gallery; other user issues included, accessibility, time-consuming to rent/return, and one-time purchase mechanism. These issues impacted the audience's choice to rent an audio tour device or not.
I conducted interviews and created empathy maps to understand the users I was designing for and their needs. The research revealed that the main user groups of this audio guide app are art enthusiasts, tourists, students, families, and art professionals seeking diverse and enriching art experiences.
This user group confirmed my initial assumptions about the audience of Fake Art Gallery. Additionally, the research revealed that the low portability of the original audio tour device was not the only factor affecting the audience's experience of visiting the gallery; other user issues included, accessibility, time-consuming to rent/return, and one-time purchase mechanism. These issues impacted the audience's choice to rent an audio tour device or not.
Pain Points
Pain Points
Pain Points
Low
portability
Low
portability
Traditional audio tour devices typically include an additional playback device with wired headphones. This adds an extra carrying burden to the audiences.
Traditional audio tour devices typically include an additional playback device with wired headphones. This adds an extra carrying burden to the audiences.
Accessibility
Accessibility
Traditional audio tour devices are not equipped with assistive technologies.
Time
Time
Traditional audio tour devices need extra step to pick up/return them.
Purchase
mechanism
Purchase
mechanism
Traditional audio devices often employ a one-time purchase mechanism, making it expensive for individuals who wish to use them multiple times.
Traditional audio devices often employ a one-time purchase mechanism, making it expensive for individuals who wish to use them multiple times.
Personas
Personas
Personas
User Journey Map
User Journey Map
User Journey Map
User Flow
User Flow
User Flow
User task: Check-in for the exhibition and listen to the audio-tour.
User task: Check-in for the exhibition and listen to the audio-tour.
User task: Check-in for the exhibition and listen to the audio-tour.
Design
Design
Design
Paper Wireframes
Paper Wireframes
Paper Wireframes
In the wireframing step, I mainly show the most critical user flows to ensure that the app can solve the user's main problems.
In the wireframing step, I mainly show the most critical user flows to ensure that the app can solve the user's main problems.
In the wireframing step, I mainly show the most critical user flows to ensure that the app can solve the user's main problems.
Digital Wireframes
Digital Wireframes
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
The easy-to-use, intuitive audio player is designed so that viewers can control play/pause, font size, voice playback speed, and more.
The easy-to-use, intuitive audio player is designed so that viewers can control play/pause, font size, voice playback speed, and more.
The easy-to-use, intuitive audio player is designed so that viewers can control play/pause, font size, voice playback speed, and more.
Usability Study
Usability Study
Usability Study
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 Findings
Comment page: Users want a visible page entry (e.g., button). Users want a place to write and post comments.
Tickets page: Users want more hits about what to do next in this page.
User want more explainations of the placeholders.
Round 1 Findings
Comment page: Users want a visible page entry (e.g., button). Users want a place to write and post comments.
Tickets page: Users want more hits about what to do next in this page.
User want more explainations of the placeholders.
Round 2 Findings
The app's color palette is not accessible enough.
Lack of animation on some pages.
Round 2 Findings
The app's color palette is not accessible enough.
Lack of animation on some pages.
Mockup & Prototype
Mockup & Prototype
Mockup & Prototype
Visual System
Visual System
Visual System
Accessibility Considerations
Accessibility Considerations
Accessibility Considerations
Visual Tools
Visual Tools
Provides adjustable font size, prominent icons and explanatory text to aid accessibility for visually impaired users.
Provides adjustable font size, prominent icons and explanatory text to aid accessibility for visually impaired users.
Icons
Icons
Used icons to help make navigation easier.
Used icons to help make navigation easier.
Audio Tools
Audio Tools
Provides adjustable playback speed in the audio player page to aid accessibility for people with different language proficiency levels and those with hearing impairments.
Provides adjustable playback speed in the audio player page to aid accessibility for people with different language proficiency levels and those with hearing impairments.
Mockup
Mockup
Mockup
During the initial wireframe design, I didn't consider a place for users to post comments, which I added in subsequent designs.
During the initial wireframe design, I didn't consider a place for users to post comments, which I added in subsequent designs.
During the initial wireframe design, I didn't consider a place for users to post comments, which I added in subsequent designs.
In the early wireframe designs, the tickets page lacked an obvious entry point. In subsequent designs, I updated the design of the tickets page by adding a short introductory text as well as obvious buttons to prompt the user's next step.
In the early wireframe designs, the tickets page lacked an obvious entry point. In subsequent designs, I updated the design of the tickets page by adding a short introductory text as well as obvious buttons to prompt the user's next step.
In the early wireframe designs, the tickets page lacked an obvious entry point. In subsequent designs, I updated the design of the tickets page by adding a short introductory text as well as obvious buttons to prompt the user's next step.
High-fidelity Prototype Showcase
High-fidelity Prototype Showcase
High-fidelity Prototype Showcase
Tickets management
Tickets management
The app allows users to purchase and manage tickets for easy check-in.
The app allows users to purchase and manage tickets for easy check-in.
Find the interested tour
Find the interested tour
Using paper tickets? That's okay, users can search for keywords to find the audio-tour they need and access it by ticket serial number.
Using paper tickets? That's okay, users can search for keywords to find the audio-tour they need and access it by ticket serial number.
Explor Recipes
Users can explore recipes through homepage recommendations or by clicking on related tabs.
Audio-tour player
Audio-tour player
The music player interface is used to play the audio-tour. In addition, this feature provides interactive subtitles that make it easy for users to jump to the part they want to listen to.
The music player interface is used to play the audio-tour. In addition, this feature provides interactive subtitles that make it easy for users to jump to the part they want to listen to.
More accessibility
More accessibility
In the player, we also provide adjustable font sizes and adjustable audio playback speeds to ensure that all users can enjoy their voice journey.
In the player, we also provide adjustable font sizes and adjustable audio playback speeds to ensure that all users can enjoy their voice journey.
Explor Recipes
Users can explore recipes through homepage recommendations or by clicking on related tabs.
Reflections
Reflections
Reflections
Use Personas
This project was the first UX design project I did in Google's UX Professional Certification Program. After conducting user research, I identified our product's target users as art enthusiasts, tourists, students, families, and art professionals—representing a diverse range. Recognizing the impossibility of catering to all their needs, I streamlined my approach in the design phase by creating two personas: Nancy and Jacob. Crafting these personas proved instrumental, providing a clearer understanding of this broad user group. Designing with Nancy and Jacob in mind felt like addressing the needs of two friends, making their problems and requirements tangible. The use of personas significantly enhanced my ability to empathize with user challenges, and I find this method effective. Moving forward, I am committed to integrating personas into my future design processes.
Sufficient explanations must be given in the design
In my first usability test, I used a low-fidelity wireframe prototype and received feedback indicating confusion like 'it's not clear what this image/button/placeholder does.' Reflecting on this, I identified two key reasons for the feedback: insufficient detail in the low-fidelity prototype, which primarily used symbols and placeholder text, and a lack of consideration for participants' a priori knowledge, particularly those unfamiliar with UX or design industry conventions.
To address these issues, I refined the low-fidelity prototype, incorporating clearer explanations, and conducted a subsequent round of usability tests. Notably, participants exhibited an improved understanding of the app's interface. This experience highlighted the importance of providing adequate, explicit explanations even in the early stages of low-fidelity wireframe prototyping, ensuring seamless user comprehension.
Use Personas
This project was the first UX design project I did in Google's UX Professional Certification Program. After conducting user research, I identified our product's target users as art enthusiasts, tourists, students, families, and art professionals—representing a diverse range. Recognizing the impossibility of catering to all their needs, I streamlined my approach in the design phase by creating two personas: Nancy and Jacob. Crafting these personas proved instrumental, providing a clearer understanding of this broad user group. Designing with Nancy and Jacob in mind felt like addressing the needs of two friends, making their problems and requirements tangible. The use of personas significantly enhanced my ability to empathize with user challenges, and I find this method effective. Moving forward, I am committed to integrating personas into my future design processes.
Sufficient explanations must be given in the design
In my first usability test, I used a low-fidelity wireframe prototype and received feedback indicating confusion like 'it's not clear what this image/button/placeholder does.' Reflecting on this, I identified two key reasons for the feedback: insufficient detail in the low-fidelity prototype, which primarily used symbols and placeholder text, and a lack of consideration for participants' a priori knowledge, particularly those unfamiliar with UX or design industry conventions.
To address these issues, I refined the low-fidelity prototype, incorporating clearer explanations, and conducted a subsequent round of usability tests. Notably, participants exhibited an improved understanding of the app's interface. This experience highlighted the importance of providing adequate, explicit explanations even in the early stages of low-fidelity wireframe prototyping, ensuring seamless user comprehension.
Use Personas
This project was the first UX design project I did in Google's UX Professional Certification Program. After conducting user research, I identified our product's target users as art enthusiasts, tourists, students, families, and art professionals—representing a diverse range. Recognizing the impossibility of catering to all their needs, I streamlined my approach in the design phase by creating two personas: Nancy and Jacob. Crafting these personas proved instrumental, providing a clearer understanding of this broad user group. Designing with Nancy and Jacob in mind felt like addressing the needs of two friends, making their problems and requirements tangible. The use of personas significantly enhanced my ability to empathize with user challenges, and I find this method effective. Moving forward, I am committed to integrating personas into my future design processes.
Sufficient explanations must be given in the design
In my first usability test, I used a low-fidelity wireframe prototype and received feedback indicating confusion like 'it's not clear what this image/button/placeholder does.' Reflecting on this, I identified two key reasons for the feedback: insufficient detail in the low-fidelity prototype, which primarily used symbols and placeholder text, and a lack of consideration for participants' a priori knowledge, particularly those unfamiliar with UX or design industry conventions.
To address these issues, I refined the low-fidelity prototype, incorporating clearer explanations, and conducted a subsequent round of usability tests. Notably, participants exhibited an improved understanding of the app's interface. This experience highlighted the importance of providing adequate, explicit explanations even in the early stages of low-fidelity wireframe prototyping, ensuring seamless user comprehension.
Thank you for reading.
Thank you for reading.
Thank you for reading.
Check out my other case studies below ↓
© 2025 Shiyi Chen – All Rights Reserved