This project was created as part of the Google UX design bootcamp.
Embedded Files
Timeline
Timeline
February - April 2022
Role
Role
Solo UI/UX Designer & UX Researcher
Responsibilities
Responsibilities
Survey
Wireframes
Prototype
Usability Study
Tools
Tools
Goal
Goal
The goal was to design an art app like Artful that on the one hand allows users to scan artworks in order to easily gain knowledge about the artwork and the artist behind a painting and on the other hand helps users find nearby art exhibitions and efficiently purchase an art exhibition ticket.
The Problem
The Problem
Art interested people don't have a quick and easy access to relevant information about the art at art galleries (e.g., summaries, artist's biography) to understand the displayed artwork.
Art interested people don't have a quick and easy access to relevant information about the art at art galleries (e.g., summaries, artist's biography) to understand the displayed artwork.
Furthermore, artists and people with a busy working schedule don't have the time to efficiently find and purchase a ticket for art exhibitions in their nearby area.
The Solution
The Solution
An artist bio app for art galleries that offers a scan tool for people to scan the artworks at art galleries to gain information about the art and the artist and support mobile purchase of art exhibition tickets to skip waiting lines at art galleries.
An artist bio app for art galleries that offers a scan tool for people to scan the artworks at art galleries to gain information about the art and the artist and support mobile purchase of art exhibition tickets to skip waiting lines at art galleries.
Design Thinking Process
Design Thinking Process
For this project, I utilized the following design thinking process steps to take my app from idea to reality:
1) Empathize
1) Empathize
Understanding the user
2) Define
2) Define
Figuring out the problem
3) Ideate
3) Ideate
Brainstorm solutions
4) Prototype
4) Prototype
Creation and experimentation
5) Test
5) Test
Refining the product
Competitive Analysis
Competitive Analysis
Before doing any other research or design work, I conducted a competitive analysis to identify the competition's strengths, weaknesses and what opportunities I have to let my art app stand out from competitors.
My main goal here was to compare the experience of receiving information about art for each competitor's app.
After I was done with the analysis, I have written a competitive audit report to highlight and organize the information I found to have a better overview of it. The following are insights I found that I wanted to implement in my design choices for the app.
Gaps I identified:
Gaps I identified:
3 out of 4 competitors don't offer a scan feature to scan artworks at an art gallery and receive relevant information about the art itself
All competitors lack in visual and audio impairment features
Opportunities I identified:
Opportunities I identified:
Provide scan feature to give relevant information about artworks
Provide audio and visual impairment features in app
Interviews
Interviews
At first, I conducted interviews with potential users (ages 25-74 years old) who visited an art gallery before or admire art in general to get a feeling of who my users are and what needs and pain points they have to design my app as best as possible.
Questions I asked my participants:
Can you describe your last visit to an art gallery?
How often do you go to an art gallery? What is your motivation for doing so?
What do you admire the most about artworks?
What challenges do you face when visiting an art gallery or looking at art? How does this make you feel?
Is there any way in which you feel these challenges could be resolved?
Quotes
Quotes
"It's annoying when it's too crowded inside an art gallery and I don't get the chance to have more time to look at an artwork I admire."
"It's annoying when it's too crowded inside an art gallery and I don't get the chance to have more time to look at an artwork I admire."
"Sometimes it's difficult to understand the motive or background story behind a painting when there is no additional information or summary presented."
"Sometimes it's difficult to understand the motive or background story behind a painting when there is no additional information or summary presented."
Insights
Insights
After my interviews, I gained deeper knowledge of possible pain points my users could be experiencing. I determined the following 3 main pain points.
Storyboards
Storyboards
To make my design ideas even more clear, I drew storyboards. This helped me shape the personas and user journey to know what to expect when users will interact with my product. The most important focus was on the scan tool that I had in mind so that users could attend art exhibitions, scan the displayed artwork and get all the information they need about the artwork and the artist in order to understand what the art is about.
Scenario: An app that allows users to gather information about an artwork and the artist at an art gallery.
Big Picture Storyboard
Big Picture Storyboard
Close Up Storyboard
Close Up Storyboard
Personas
Personas
To step out of myself and get an even better understanding of my potential end-user of my app, I created two personas. This helped me gain a perspective similar to the user that I could utilize to design the Artful app that addresses all user needs.
User Journey Map
User Journey Map
Mapping Ryo’s user journey gave me better insight into how a user would overall interact with a dedicated art app and it revealed that such an app would be benefitial to a lot of users.
Paper Wireframes
Paper Wireframes
Next, I have taken the time to draft iterations of the app by creating paper wireframes which I have drawn in Procreate.
For the home screen, I prioritized a specific element list including a scan icon for users to scan artworks at art galleries to receive enough information about the art and the artist.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital Wireframes
Digital Wireframes
The design phase started with creating digital wireframes in Figma.
First, I designed the home screen of the Artful app which you can view below.
Lo-Fi
Prototype
Lo-Fi
Prototype
The low-fidelity prototype connected the primary user flow of scanning an artwork, and purchasing an art exhibition ticket so the prototype could be tested in a usability study with real users.
To enhance the overall UX of my app, I created Log in and Create account screens to make new users more familiar with my app.
View the full and interactive Artful low-fidelity prototype here.
Video Lo-Fi.movUsability Testing
Usability Testing
After I have finished designing all screens for the lo-fi prototype, I conducted my first round of usability study in Maze. Next, I refined my design with this feedback to create a high-fidelity prototype and I conducted another second usability study in Maze.
For both usability studies, users were given a scenario and asked to do the following tasks:
Create an account
Find and select an art exhibition you would like to attend
Select to purchase a ticket for the "Nature Exhibition", confirm the order and complete the checkout process
From the home page, start scanning an artwork
Click through the information screens of the artwork and the artist's biography to get a better understanding of your scanned artwork
Findings
Findings
1st usability study:
1st usability study:
Users had trouble finding the scan tool and want to scan art more quickly.
Users had a difficult time finding art exhibitions and want to find them quickly and efficiently.
2nd usability study:
2nd usability study:
Users wished for a bigger font size of the artwork and the artist's biography because it was difficult to read.
Users were frustrated that there was no dropdown menu to manually select a date and time while purchasing an art exhibition ticket.
Design Changes
Design Changes
Based on these findings, I changed the following things.
1. Added a "See art exhibitions" and "Scan artworks" button
1. Added a "See art exhibitions" and "Scan artworks" button
2. Adjusted and increased the font size of artwork and artist information screen.
2. Adjusted and increased the font size of artwork and artist information screen.
3. Created a dropdown menu to be able to select a date and time while purchasing a ticket.
3. Created a dropdown menu to be able to select a date and time while purchasing a ticket.
Visual System
Visual System
I created a sticker sheet in Figma to have an organized overview of my elements (e.g., colors, typography) and UI components which made up my layouts in the mockup screens.
I also drew a logo for the Artful app to ensure a more realistic feeling of an app.
Hi-Fi Prototype
Hi-Fi Prototype
The final high-fidelity prototype presented cleaner user flows for scanning artworks and purchasing an art exhibition ticket. It also met user needs for gaining information about the artwork and the artist’s biography as well as more customization.
View the full and interactive Artful high-fidelity prototype here.
Video Hi-Fi.mov
Accessibility Considerations
Accessibility Considerations
To make my app besides being useable also accessible, I used:
Detailed imagery for art exhibition venues and artworks to help users better understand the designs and the app function
Icons to help make navigation easier
High contrast ratio colors to adjust the app to accessibility standards
Values
Values
Artful would be definitely valuable to users and potential businesses by being:
a tool to accompany art galleries in finding nearby art exhibitions and purchasing an art exhibition ticket beforehand
useful in providing a summary and detailed information about the art and artists to help people better understand the motives and intentions behind displayed paintings
intuitive and easy to use which makes the app usable for all different kinds of art interested users
Going Forward
Going Forward
What I learned:
What I learned:
I learned that research is such an important part to evaluate what would be useful to include in my designs
Research influenced how I viewed my project and made it easier for me to know what to design to make my app useful and usable
What I could have done better:
What I could have done better:
I could have implemented even more accessibility features (e.g., other languages, customization of text, dark/light mode)
I think that my designs could have been a little cleaner and I want to work on that in the upcoming project
Next Steps:
Next Steps:
Conduct another round of usability studies to validate whether the user pain points have been effectively addressed
Conduct more research to determine any new areas of need
Include people using assistive technologies to adopt inclusive user testing to find out if the app is overall accessible
Thank you for reviewing my work on the Artful app!
Thank you for reviewing my work on the Artful app!
Page updated
Google Sites
Report abuse