Problem: Artists are underpaid, and their products are often able to be consumed for free
Solution: A simple platform that combines a gift registry with a way for artists to collect tips
Tools: Figma, Miro, Balsamiq, Google Forms, Google Jamboard
Date: April 2020 – August 2020
Deliverable: High-Fidelity Prototype
Table of Contents:
I created Arts Raiser as a capstone project in my user experience design bootcamp with support from my mentor. I decided to execute an idea I had thought of during my time employed at various arts institutions. Working during the Covid-19 pandemic, I conducted interviews over videochat and tested sketches and prototypes by screen-share.
Arts Raiser is a website application where artists can quickly and easily raise funds and receive other types of support from their fans. Artists list links to their payment service accounts to receive tips, and to any other website or profile that they want to direct their fans.
There are two levels of consumption that occur with one artwork: the first is when this artwork is acquired by a buyer or parton; and the second is when an audience views or experiences this artwork. It’s the second level of consumption that I want to focus on. We live in an ‘experience economy,’ which is a term coined in 1998 by Harvard economists to describe a level of economic value that is beyond goods and services where consumers primarily seek out and pay for experiences. An example of this is the pay-per-view business model such as buying a ticket to visit an art exhibition. However, many artists with artworks prevalent around the world are not renumerated for that second level of consumption.
Even if an artwork is paid for and an artist is compensated, the life of an artwork extends far past that initial transaction. I believe that artists should financially capitalize on the prevalence of their images around the world in every form. Artists often beautify our world for free, and in an Experience Economy, people should show their appreciation by paying them just like any other worker.
The main questions come to: “How can artists get paid by people who have seen their art? And, How can artists monetize the popularity, reach, and exposure of their art around the world?”
I also researched blockchain technology and art. Developers are looking for ways to monitor when digital images are reproduced and distributed online. Although the intent is to prevent copyright infringement, I could learn from how they’re approaching the problem of art’s circulation online.
I searched different keyword combinations in Google, like ‘support’ + ‘artist,’ to see what else I could find. I stumbled upon this news article for a virtual tip jar to support musicians uable to perform live during the Coronavirus pandemic. Although it is for musicians, I believe the concept can fit visual artists.
I interviewed 5 working artists in my network to ask them about the troubles they face earning money with their art, and how well different solutions work for them. I also specifically wanted to know about earning money from fans without selling an artwork, such as if they get tips or gifts.
To recruit qualified participants, I sent a screener I made on Google Forms to artists I know personally and posted it to art Facebook groups. I primarily needed to make sure my participants were ‘working artists,’ rather than ‘hobby artists,’ in that they are actively trying to earn money with their art.
I collected key points and statements that the artists made during the interviews that reflect their perspective on earning money as an artist. Similar statements were grouped together to create two empathy maps for two different types of users.
The artists in the “Career-Development” type often make artworks without being fully compensated as a way to gain exposure. I noted that many of these artists would sacrifice pay for publicity, but they still aspire for a stable career as an artist.
The artists in the “Community-Advocate” type primarily want to raise money for other causes. They are passionate about something, and they want to use their art and themselves to draw attention to it.
For both types of artists, I also noted that they don’t want to use more marketing platforms. All of my interview participants mentioned how they hate spending time on marketing.
To create the final personas, I gave identities to the two types of artists that I kept in mind as I designed Arts Raiser. Jo represents the ‘Career-Development Type’ who wants to raise support for themselves. She gets paid to paint murals, but currently not enough to support herself full-time. Nick represents the ‘Community-Advocate Type’ who wants to raise support for other causes. He supports himself with his art and is a relatively well-known influencer. He wants to use his popularity to raise money for causes he cares about.
to start thinking of viable ideas to solve the problem of artists being underpaid, I took major insights from my research and rewrote them in the form of “How might we…” questions. Rephrasing the issue as a question helped me generate ideas because I had to think of different ways to answer the questions.
I rewrote the tasks that artists want to accomplish with Arts Raiser in the form of user stories in order to start to see the path users would take in the app.
I started with the stories in the blue post-in notes below thinking about all the ways that artists want to be supported online. Then I grouped those stories into a larger “wishlist” story in the yellow post-it note above. The three yellow post-it notes show the main stories I focused on creating as I developed more detailed user flows:
I created a user flow diagram in Miro to illustrate how the user stories will be realized in the app. Each story is broken down into three elements: pages, actions taken on a page, and inputs necessary for an action. Then I connected these elements to create the path that a user would follow to complete a task. This diagram helped me make sure that all steps in a task are accounted for so I could start sketching the screens that are apart of each user flow. Additionally, each user flow section became “Red Routes” in my wireframes.
In the future, this diagram will also be helpful when adding new functions to the app by expanding existing flows.
Starting at the homepage, there are three sections a user can flow into: support an artist section, log in/sign up section, and the account and wishlist section.
This section on the top right is like most search engines. First, enter a search term. Then, click on the desired artist in the results list. After, view this artist’s page. Last, click on a wishlist item, which will open a link in a new tab. In the future, this section can be expanded to include other features, such as filtering or image search.
In the section on the top left, starting from the homepage, a user can log in or sign up by using their email or their Google or Facebook account. In the future, more security measures could be added to this section to prevent users from creating multiple accounts, or impersonating someone else.
This section on the bottom is for users to manage their identification details and wishlist items. Currently, the only users I am designing for are artists themselves, but in the future, this could change. There could be other useful reasons for people who aren’t artists to have an Arts Raiser account, such as bookmarking artists or wishlist items. There are many other funtions I could add to this section.
I quickly make sketches in Miro to illustrate my idea for Art’s Raiser’s interface.
The first line of my sketches show the screens to log in or sign up for an account. The second line shows the screens to edit a wishlist once inside an Arts Raiser account. The last line shows the path to support an artist, including the artist search results screen and the individual artist profile screen:
Before developing wireframes, I tested my sketches with a round of Geurrilla Usability Testing:
In order to build a Minimum Viable Product (MVP) or prototype for the purpose of user testing, I first designed the app’s three main “red routes.” These are the screens necessary for a user to interact with to accomplish the main goal of the app. They correspond to the three sections of user flows. There is a lot of potential functionality that I could add to Arts Raiser.
The screens in the ‘support an artist’ route include the home screen, the search results screen, and an individual artist’s page:
This red route shows the screens a user sees if they decide to sign up for an Arts Raiser account by using their email address. Creating an account is a simple email verificaiton process with a link sent to a user’s email:
All the items on an artists page are added by links. Artists smply add the URL of the item they want their fans to find. For example, instead of connecting a user’s Arts Raiser account to their CashApp profile, that user will add a link to their Art’s Raiser page to direct visitors to their CashApp profile.
At this point I also decided to change the term Wishlist to Linklist. I was concerned that people will think that a wishlist item is something that the artist wants someone to buy for them. With a wedding or baby registry, the wishlist is a list of items that the host wants the guests to gift to them. Since I don’t use the word ‘registry’ on the app, I didn’t think it was still appropriate to use the word ‘wishlist.’
In this red route, the user clicks on the ‘Edit My Links’ button to view their whole Linklist; then they click on a Linklist item to edit that link.
Since items are all added by links, the app can easily support links to websites or payment services that are not in the Arts Raiser app at that moment. This is ideal for artists with their own website, and to accomodate new or less popular websites.
I put together a board filled with images to use as a visual guide as I designed the interface. I imagined an interface that was mainly black-and-white so that artworks and call-to-action buttons could stand out. The top row shows black-and-white interface suggestions, and the rest of the board shows the color palette I created to pair with them. Ultimately, I only used one accent color: Muted Gold.
I created a set of icons for popular websites that artists use. These will be on the Artist Profile pages:
I also collected a set of self portraits of various styles to use around the app. They represent Arts Raiser’s target users:
The logo was inspired by modern art and designed to look like the initals, AR, in the shape of an arrow pointing up. I tried to be minimal and only use one color so the logo can be used in all sizes and in various places:
I recruited 5 people to participate in my testing over video conference. I opened my sketches on my screen and had my participants tell me the action they would take on that screen.
I asked my participants 3 different questions. First, starting from the first slide in the “welcome” tutorial, I asked them to create an account. I expected a couple people to X-out of the tutorial to view the home screen, but they all scrolled through the whole slideshow, and clicked on the “create an account” button. Second, from their account page, I asked them to add their website to their wishlist, which they all did easily. Last, from their “edit wishlist item” page, I asked them to find an artist named “Mike Smith” and find his Etsy store. Most users immediately clicked on the search bar in the header, but one person clicked on the back arrow in the footer until he reached the home screen, then searched from there.
The biggest issue was that only a couple of the participants clicked on the wishlist items on the artist profile page, after hesitation. They explained that the wishlist items don’t look enough like links. The wishlist items should look a lot more like buttons and invite the user to click on them.
Another issue comes from the way icons look in Balsamiq Cloud. In the slideshow tutorial, a few people tried to click on the images because they looked like icon buttons. What’s even more confusing is that the last slide has an icon that actually is a button. When I go to make high fidelity prototypes, I should make it obvious what elements are buttons and what elements are not.
The first screen shown to my participants confused most of them. Although it helped in the long run to have the tutorial slideshow when a user goes to the website the first time. But the first screen in the slideshow doesn’t look enough like it’s part of a tutorial. I decided to condense the tutorial so that it is all on the same page underneath the hero section. Users can more naturally scroll down and access that info on the same screen.
I built in the prototype the path to find a sample artist I created named Zoe Marshall, and view her Flickr Linklist item and visit her Paypal page to send a tip:
Starting from the homepage, I built the path to sign in to a sample Arts Raiser account:
Starting from the sample account for Jo Zhao, I built the path to add her Flickr page to her Linklist:
After setting up paths on the prototype, I had 10 participants go through these paths in structured tasks. Over video conferece, I shared my screen with my participants and had them verbally direct me through each task since they couldn’t have direct control of the prototype. This ended up being very useful to me because it was easier for them to talk about their actions. In the first round, 5 participants tested the app by trying to accomplish 4 tasks. Then I corrected some flaws I had in the testing process to improve my test results moving forward. In the second round, 5 different participants tested the app by trying to accomplish the same 4 tasks.
All of the participants were able to accomplish the tasks, but some of them struggled or hesistated with certain things. I redesigned Arts Raiser to make tasks easier to complete and address other issues.
User testing suggested that I add more signals on the homepage that describe what the app does. Although users could scroll down to learn more, this isn’t a primary action and my participants didn’t do it. To fix this, I added artworks of money and dollar bills on the homepage above-the-fold.
I also changed the primary color to try to signal that Arts Raiser is for fundraising. The gold color I was aiming for actually looked like mustard I changed it to green which is similar to Kickstarter and GoFundMe.
At first, I thought it would be simpler for input to automatically save when a user goes to edit their details on their artist profile page and Linklist. The green ‘save’ button would instantly turn gray after input is entered to show that the task is complete. But not only did this confuse many of my test participants, it also wasn’t as convenient as I thought it would be. I updated this so that a user has to click on the ‘save’ button to know the task is complete.
For example, when a user uploads a sample artwork, the ‘save’ button turns gray only after it is clicked:
User Testing showed me that I had to make the language on a few key pages more inconsistent. The primary button should lead to the page with the exact same title so that a user knows what to expect when they click on that button. For example, when a user wants to add a payment service, the ‘Add Payment Service” button leads to the ‘Add Payment Service’ page, and the ‘Edit Payment Service’ button leads to the ‘Edit Payment Service’ page:
All-encompassing resource for WordCamp Philly 2020 Virtual Conference
App to improve art exhibition experiences without distraction
Website resdesign for a web accessibility consultant to drive conversions and optimize content