This project was created as part of the Google UX design bootcamp.

Timeline

February - April 2022

Role

Solo UI/UX Designer & UX Researcher

Responsibilities

  • Survey

  • Wireframes

  • Prototype

  • Usability Study

Tools

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

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


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

For this project, I utilized the following design thinking process steps to take my app from idea to reality:

1) Empathize

Understanding the user

2) Define

Figuring out the problem

3) Ideate

Brainstorm solutions

4) Prototype

Creation and experimentation

5) Test

Refining the product

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:

  • 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:

  • Provide scan feature to give relevant information about artworks

  • Provide audio and visual impairment features in app

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

"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."

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




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


Close Up Storyboard



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








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






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






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





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.mov

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

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:

  • 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





Based on these findings, I changed the following things.

1. Added a "See art exhibitions" and "Scan artworks" button

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.

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





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




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




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

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:

  • 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:

  • 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!