top of page
StreetSmARTS Mural Program
Mobile First Website Design
Timeline: 3 weeks
Role: UX/UI Designer
Methods & Approach: Heuristic Evaluation |
Competitive Analysis | Survey | Interviews |
User Flows | Ideate | Usability Test | Iterate
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
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
These sites made it clear how to participate in their programs, which is key for success
Clear Process
Surveys
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
8 In-Depth Interviews
Ages 32-47
5 Visual Artists
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
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
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
The Property Owner: representing potential users who own properties, and looking to hire an artist to paint a mural on their property
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.
The Property Owner who is looking for a local artist to paint a mural on his business, which has just been vandalized with graffiti.
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.
How would an artist look for available walls and make a proposal?
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.
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.
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
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