Designing for an artistic community with the artist in mind

Mobile-First Approach Website Redesign Concept

Overview

Artists' Television is a non-profit artist run experimental gallery based in the mission district of San Francisco. ATA (for short) promotes culturally-aware, underground media and experimental art. Before the pandemic, ATA had a venue and gallery available for local artists to share their screenings, presentation galleries, exhibitions, performances, workshop and many other artistic events. Currently, they continue to promote art on their website.

Project goal

Before the pandemic, ATA had a venue for artists to meet and present their work live with the artistic community. As this transitioned to their website- a digital platform, they need help in improving their site by showcasing and organizing their content. They want to keep their community engaged by providing new content and videos.

Design team

Vincent Alojado, Mariana Gomez, Jacqueline Ma, Thatcher Snyder

Research

As excited as we were to dive deep into the redesign, our team and I took a step back and evaluated ATA's existing website. We each completed a heuristic evaluation to help us get familiar of the flow of the website.

I took it upon myself to follow my favorite-Nielsen’s 10 Usability Heuristics for User Interface Design. This process helped me get an understanding of how people navigate through the website as well as taught me about the client and the community that uses the ATA website.

As we compared our notes, we noticed the following key area that we all agreed was something we needed to revisit once we got deeper into the design process: to explore further into the experience users go through in order to share their work on the ATA website.

Before we get deeper into that design process, my team and I decided to research more to identify the target user and how we can help their website provide more content.

With these thoughts in mind, we all took a step back to identify the following further:

who are these people providing the content?

And what can we do to motivate them to produce more content?

After going through the ATA blog on the website, we figured we needed to seek out artists and interview them on their experience when sharing their work/ content with others.

Competitive Analysis

With the problem from the brief we were presented in the beginning, we had to brainstorm a way to keep the existing content organized. With this in mind, our team explored other art websites to get an idea of how art is displayed.

I soon realized it would be ideal to have the images on the website broken up with text. Since it is a mobile first approach, this format would be less overwhelming when only one image is shown with the text related to the image as opposed to multiple images at once.

Survey, User Interviews, Affinity Mapping, Empathy Mapping:

In order to seek out artists to interview, two batches of questions were created.

The first batch was a multiple choice screener survey. If participants passed the screener survey, they would then proceed to face to face interviews with a second batch of questions that were more in-depth. These questions were focused on artists and their experiences when sharing their artwork to the world.

I wanted to make sure I asked the appropriate question to gain further insight on how I would approach the redesign. With all the information received, my team and I moved onto affinity mapping using a program called MURAL. This technique helped us understand the data we collected from the 4 artists we interviewed by organizing direct quotes and grouping them by similarities and noticing patterns across the artists. We then took the important quotes to create an empathy map.

This helped us put ourselves in artists’ shoes: 



After the collected thoughts were discussed, I discovered something I did not expect.

This was when I realized the emotional roller coaster all the artists had expressed to me when I interviewed them. They were very expressive with the feelings they encounter from the moment they create art to when they decide to share it.

I thought to myself:

“so in order for us to get artists to submit more, we need to understand how we can get them excited and encouraged to share their artwork”.

I realized it was more than just restructuring the navigation or figuring out how we would replace the submit button. I had to learn how I was going to take their feelings into account and design with a focus on this.

Illustration credited to Pablo Stanley


User Persona:

I took the data and insights we gathered and moved onto creating a character to reference throughout our redesign to remind us who we are designing for. For this project, our character (also referenced as user persona) is cori grae, an artist who we wanted to make sure had all the important characteristics from all four artists we interviewed.

Name: cori grae

Illustration credited to Pablo Stanley

Scenario:

As an artist cori grae is always looking for way to put their art in to the world, but often tough to find places to take it. They usually put their work on instagram or any social media platforms but they want to engage more with galleries and community spaces.

Sometimes the highly personal nature of their work makes them hesitant to submit to places because they are anxious about negative critiques.

cori grae is looking for a place that makes them feel welcome to submit.

Goals:

Needs:

Pain Points:

Behaviors:

Journey Mapping

We then moved onto journey mapping.

This technique made it easier to map out the feelings artists go through when they are completing a goal of theirs (created on Figma):


Design Studio

Once my team and I had a clear vision on our target user from the fictional character we created named cori grae, we held a design studio session in which all team members would sketch ideas of what would cori grae see on the ATA website if all their problems were solved.

This methodology is a collaborative design process for product innovation. It pushed our team to focus on designing for specific problems, and to generate multiple design solutions within a short time frame. My team members and I would compare our sketches and communicate with each other on which ideas we would move forward with before we reach the visual design of the ATA website.

This methodology helped our team develop the follow solutions in which we applied to the redesign:


My sketches from design studio (see bottom left for progress bar design).

Visual Design

As we get closer to visual design, we made sure ATA’s brand was reflected throughout our redesign. I had the pleasure of creating a mood board from the experimental artwork they share on their social media :


Mood board created of images of ATA artists pulled from their Instagram Account

This mood board was influenced by the fun, casual and experimental beauty vibe we wanted to reflect to the ATA community. I believed following a similar color palette compared to their existing black and white design would have a more welcoming look and feel. 

As mentioned from our team’s design studio session, I made sure to focus on the following important features: 

We made sure focusing on these specific features on the redesign will motivate and encourage artists like cori grae to share their work with a community like ATA. These solutions will also help influence the growth of both artists and artists content on the ATA website. As the redesign is a mobile-first approach concept, we had to keep in mind to have the design minimal and clear. 

For more information of the submission flow we created, I am sharing the following wireframes as created on- Figma:

Wireframes before prototype

Wireframes after prototyping

Prototype + Usability testing:

Click HERE or view below for prototype

With a completed prototype, my team members and I conducted several usability tests. Usability tests help designers get insight from users on prototypes. This technique played a very important step in our design process because we need to make sure what we designed is user friendly. We asked our participants to complete the following 2 asks while voicing their actions and thoughts out loud:

The feedback we received from conducting these tests helped my team and I move forward on what iterations are needed before we move on to further testing until the prototype arrives at its final design. After reviewing our participants’ thoughts and actions while going through the prototype, we prioritize the following changes for our first iteration:

Next Steps

As our team worked on a time constraint, we listed the following changes we would make for the next iterations:

With these next steps in mind, we thought about the importance of each adjustment and why it would benefit cori grae. 

At the end of this group project, I realized how important it was for our team to focus on designing for a specific user. The details we discovered during our Discover phase turned out to be the most important phase of this project! The empathy we had as designers to understand the root of the problem helped us design a solution in the best way we believed for our target user.