top of page
MockupDesktop.png
Mockup_Mobile.png
sfacLogo.png

StreetSmARTS Mural Program

Mobile First Website Design

PaintSplash.png

Timeline: 3 weeks

Role: UX/UI Designer

Methods & Approach: Heuristic Evaluation | 
Competitive Analysis | Survey | Interviews |
User Flows | Ideate | Usability Test | Iterate

PaintSplash.png

Deliverables: User Personas | Journey Maps |
Design Studio | Moodboard | Mid Fidelity Wireflows |
Hi Fidelity Prototype

 

Tools: Figma | Zoom | Trello | Google Drive |
Typeform | Otter.ai | Paper & Pen 

 

MuralArt_1.jpg
MuralArt_4_Intermission.jpg

Overview

StreetSmARTS is a program, administered by the Arts Commission and Intersection for the Arts. The program connects artists with private property owners to create vibrant murals on their buildings, enhancing the character of their property and surrounding neighborhood while deterring ongoing vandalism. 

They want to expand their reach and provide a much wider access to its artists and community. 

Challenge

While they have been focusing on helping property owners who have received Notices of Violation, it has become apparent that many other property owners are interested in being connected with a street artist. These new owners would not fit into the original payment scheme setup by the program, but instead will negotiate directly with the artist (s) they want to hire.

The program has limited information on the SFAC website. The application link is broken and people have to submit via email. There is no proper website for the mural program.

Goals

My team wanted to discover how we might effectively connect private property owners with artists. How might we promote their expanded services to more artists, more property owners, and the community as a whole?
 

OUR PROCESS 

Empathize

My team wanted to get a holistic view of the situation and gain
a deeper understanding of user needs. For this we used a few different methods:


Heuristic Evaluation | Competitive Analysis |
Surveys | Interviews | Affinity Mapping 

Define

Design

Prototype & Test

Based upon what we found in our research, we were able to further define the situation. We then created: 

User Journey Maps | User Flows | Personas |
Problem Statement | Proposed Solution 

Now that we had a clear understanding of the problem, we started to ideate and design solutions with:

Design Studio | Sketches | Mid Fidelity Wireframes 
 

We then wanted to test the solution:

Usability Test Plan | 8 Usability Tests | Iterated
Based Upon Feedback 
| Hi Fidelity Prototype

 

EMPATHIZE

Heuristic Evaluation

We conducted a website audit based upon the Nielsen Norman Group's 10 usability heuristics for user interface design.  We found some violations of best practices throughout the site. The most severe being:
 

  • StreetSmARTS program is not accessible from the homepage, and cannot access it without using search

  • They use a third party application system that takes the user out of the program page

  • There was too much information to digest on one page

Competitive Analysis

We then conducted a competitive analysis of comparable mural programs to get a sense of what may be important to potential
artists and property owners of the program, as well as community outreach as a whole. 


We found that comparable sites are mission driven and community minded, whereas StreetSmARTS focused solely on graffiti prevention. Clarity about the application process is consistent among comparative websites. 

Comparative programs focus heavily on community based projects

Community Based

Screen Shot 2022-01-13 at 6.59.40 PM.png
Screen Shot 2022-01-13 at 7.00.34 PM.png
These sites made it clear how to participate in their programs, which is key for success

Clear Process

Screen Shot 2022-01-13 at 7.05.58 PM.png
Screen Shot 2022-01-13 at 7.28.17 PM.png
Screen Shot 2022-01-13 at 7.28.36 PM.png

Surveys

SurveyIcons1.png
SurveyIcons2.png
SurveyIcons3.png

By conducting surveys, we gained some key insights: 
 

  • Respondents feel largely positive about murals in
    urban landscapes 

  • People feel that murals create a sense of community, inclusion, and safety

  • People don't like urban landscapes to feel too "corporate"

Interviews

InterviewIcon1.png
8 In-Depth Interviews
SurveyIcons1.png
Ages 32-47
SurveyIcons2.png
5 Visual Artists
SurveyIcons3.png
3 Property Owners

After recruiting people from the survey process, we conducted
in-depth, one-on-one interviews to get to know potential users better. We had some important
research goals:

 

  • To understand how artists connect with their communities

  • What motivates people to seek out art

  • How people purchase art

  • Where artists get inspiration

  • How artists promote their work
     

Through our interviews, we found key insights:

  • Artists feel they need help negotiating rates and pricing

  • Artists decide concept based on client and community needs

  • Property owners want to support local artists

  • Early and frequent communication is key to a good experience, for both artist and the client

UserQuote2.png
UserQuote1.png
UserQuote3.png

Affinity Map

To help synthesize our research findings, we conducted an affinity mapping exercise as a group. This is a research method that helps to identify patterns and themes among potential users. We started to see key patterns emerging:
 

  • Artists prefer to speak directly to the client

  • Artists feel they must put their work in front of a wide audience to gain exposure

  • Property owners, when looking for art, prefer to look within their local community

hugo-rocha-qFpnvZ_j9HU-unsplash.jpg

DEFINE

Personas

After gathering useful insights from the research, we started to narrow down the scope of the project. We created 2 distinct user personas:

 
The Artist: representing potential users who are artists looking for new opportunities in their local communities

08 Andres Persona.png

The Property Owner: representing potential users who own properties, and looking to hire an artist to paint a mural on their property

09 Daniel Persona.png

Journey Map

We wanted to visualize the process both the artist and client go through in order to make a mural come to life. We did this by mapping out the steps they each take on their journey, and how they feel along the way.

The Artist who gets hired by a private client through
his network. 

AndresJourneyMap.png

The Property Owner who is looking for a local artist to paint a mural on his business, which has just been vandalized with graffiti. 

DanielJourneyMap.png

Problem Statement

After synthesizing our research findings, we started to see a clear problem emerging:

"Artists and private property owners need a way to connect so that they can beautify property, create exposure for artists, negotiate pay rate, and add value to the community."

Proposed Solution

Based upon this problem, we came up with a proposed solution:

"To create an easily accessible platform that connects artists with clients and helps guide them through the process of making a mural come to life."

User Flows

After we had a deeper understanding of the problem, and
each persona's process, we then created a diagram that
mapped out how they each would accomplish their goal within
the StreetSmARTS website. 

18 Andres - Userflow.png

How would an artist look for available walls and make a proposal?

17 Daniel - Userflow.png

How would a property owner find and hire a local artist?

DESIGN

Design Studio

Once we empathized with and defined who the potential users and their needs were, we got to designing! The first thing we did was to conduct a design studio. This is a workshop that helps to quickly generate a wide set of ideas in a short amount of time. It involves brainstorming, critique, and prioritization as a group. This was an effective way to discover potential design solutions. 

DeisgnStudio1.png
DesignStudio2.png

Mid-Fidelity Wireframes

After a successful design studio, we decided on the sketches we wanted to move forward with. We laid out some of our main screens in the flow as wireframes. This helped us start to see the user flows come to life. 

MidFi1.png
MidFi2.png
MidFi3.png

TEST & PROTOTYPE

Usability Testing

Once all of our main flows were designed on the clickable prototype, we wanted to test them out on both mobile and desktop. We observed 7 people going through the flows and, though everyone loved the look and feel of the site, we discovered a few main issues to address:
 

  • 33% of participants felt frustrated by repetitive input fields on two of the forms​
     

  • 67% of participants had a hard time finding more information on the program's process. Based on feedback, they didn't notice the button and when they saw it, the copy "our process" under the "about" section was confusing
     

  • 50% of participants successfully found details on existing murals, but 33% of them were confused because the page was labeled "Projects" which isn't what they expected it to be called

Iterations

After finding what problems people were experiencing, we decided to make some important changes. 

Problem
Solution
MockUpProblem1.png
MockUpSolution1.png
ProjectsSolution.png
Projects.png
Problem
Solution

Prototype

Welcome to the new and improved StreetSmARTS! Try it out below!

RETROSPECTIVE

What I learned

A group project sounded intimidating, but once we dove in I found out how much I enjoy working on a team of talented designers! We thought we each would focus solely on one aspect of the design process, but found ourselves involved every step of the way. This gave everyone in the group a chance to add their skillset throughout the entire project, which created a strong, cohesive product

Communication came naturally to us, and our team was able to
give and receive criticism professionally, which helped us iterate and make important decisions as a group. This became very valuable since we created the whole site from the ground up. If I were to do anything different, I would bring in more images to make our story telling more powerful when presenting the project. I am excited to work with more talented designers! 

Thank you!

 

bottom of page