Project Overview
StreetSmARTs is a program administered by the San Francisco Arts Commission that seeks to connect private property owners with artists to create vibrant murals on their buildings.
StreetSmARTs turns graffiti into beautiful murals
In the past, StreetSmARTs has primarily focused on helping property owners who have received Notices of Violation to remove graffiti on their property. Now it has become apparent that many other property owners are interested in being connected with a street artist for a variety of reasons.
In this conceptual project, my team of 4 was tasked with expanding the reach of the StreetSmARTS program to provide wider access to its artists.
Our Process
Empathize
Competitive Analysis
By comparing the existing StreetSmARTS page with similar services in other cities we derived a couple of key takeaways: an interactive map of murals is a feature that all similar websites use, and all comparable websites focus on community building and social change rather than graffiti deterrent or beautification.
User Interviews
Using a survey to recruit participants, we conducted interviews with artists and business owners to help identify the needs and goals of our target users. From the artists we set out to learn how they price their work, how they go about finding new clients or commissions, and what their preferred level of communication with the client is.
From the business or property owners we set out to learn the motivations behind spending money on property improvements, how they discover artists, and how they make design decisions for their property.
Key Takeways
We learned from artists that showcasing their work to as many people as possible is a common goal, but that negotiating rates can be a pain point.
A common frustration among the property stakeholders was that finding muralists can be difficult. A unanimous desire was wanting murals that reflect the community or business in which they are displayed
A common goal among all interviewees was to create murals that represent their communities and are reflective of the space in which they are displayed. We used the aggregated data from user interviews to form two distinct personas.
Personas
Meet Andres, the artist. Andres wants to get exposure for his work, broker private commissions, and get paid his value. How might we help Andres negotiate pricing and balance client expectations?
Meet Daniel, the business owner. Daniel wants to commission art that adds value to his property and deters tagging and graffiti while supporting local artists in his community. How might we help Daniel discover artists that meet his needs and negotiate pricing in a fair way?
Define
Journey Mapping
In order to visualize the process Andres and Daniel go through to make a mural come to life, we mapped out the steps they each take on their journey, and how they felt along the way.
(The Artist)
(The Business Owner)
This exercise gave us a visual representation of the paths our prospective users are currently taking to achieve their goals, and where we could either alleviate a pain point, or elevate the fulfilling parts of their journey.
The Problem
After synthesizing our research data we were able to boil down our potential users’ desires and frustrations into a concise Problem Statement that you see below.
Mural artists and property stakeholders need a way to connect so that they can beautify property, create exposure for artists, and add value to the community.
Our Solution
To create an easily accessible platform that connects mural artists with property stakeholders and helps guide them through the process of making a mural come to life.
Ideate
Screen Flows
Now that we had a clear problem to solve for and a much better understanding of potential users’ needs and the market at large, we were able to start mapping out some user and screen flows.
User flows help us to map out every step our personas would need to take to achieve their desired goals. The steps in these flows can then be condensed down into screens and actions, like in the screen flows below.
Daniel's Screen Flow
The business owner looking for a muralist
Andres' Screen Flow
The artist looking for work
Design Studio
As a remote team we didn’t have the option to do a traditional whiteboard sketch session, but we did the next best thing over Zoom and ran a Design Studio Workshop! This workshop was about sketching out as many ideas as we could for pages that supported potential users in their goals and combining and iterating on the best ones to move forward with. We starred the sketches that we then turned into mid-fidelity wireframes.
Mid-Fidelity Wireframes
Dashboard
To achieve their goals of posting available projects, creating proposals to send to artists, and managing existing projects we created this dashboard to help registered property owners execute these tasks.
Mural Map
One of the key takeaways from our competitive analysis was that mural maps are an industry standard that help users locate murals or find more information about existing murals.
We decided to expand on that concept by providing a map of available walls to be painted, so artists can search for work by region and property owners can post projects they’d like to have done on their property.
Artist Profile
Another key screen is the artist profile, where artists can showcase their work, broaden their exposure, and be easily found by potential employers.
The artist profile page also helps property owners achieve their goals of finding artists to commission.
Once we had defined all of our screens we each took ownership of a section and completed the desktop and mobile versions, pulling from our pattern library and style guide to ensure continuity of tone, UI elements, and design. This was the most exciting part of the process because we watched the website come together and take form!
Prototype & Test
Usability Testing
Usability testing revealed a few barriers to success, which we used to iterate on the existing prototype.
33%
of participants were frustrated by repetitive input fields on different parts of the prototype, meaning they don’t want to fill out the same information twice.
67%
of participants struggled to find more information on the StreetSmARTs program, the path to which was by clicking a button titled, “Our Process.” Based on participant feedback, the label on this button was unclear.
50%
of participants were successful in finding details on existing murals.
Unfortunately, 33% of those participants were confused by the page being labeled “Projects,” and only successfully found it through process of elimination. This indicates that our navigation system lacks clarity.
Key Takeaways
Aside from some minor glitches in the prototype, the largest obstacle for our participants was navigating unclear information hierarchy and UX copy that did not reflect their expectations and mental models of how the site should function.
These actionable insights were wildly helpful in creating our second iteration of the high fidelity prototype, which can be seen below.
High Fidelity Prototypes
Reflections
We created a solution that we believe addresses several key pain points in in mural seekers’ and artists’ lives. The revised StreetSmARTs website takes into account real customer needs and solves them in an intuitive way that allows for two sided outreach.
User interviews were hugely helpful during the Empathize part of our process. Talking to actual muralists and business owners allowed us to either substantiate or invalidate our own assumptions that we gained while doing market research. Our pattern library allowed multiple designers to work separately in tandem, but still produce a product that looks cohesive and follows brand guidelines. In the future I plan to incorporate a pattern library into part of a larger design system for extra cohesion and brand identity when designing.
Our team functioned really well together, largely due to our constant communication and use of project management software. When any disagreements or conflict arose we intentionally put aside our own egos and made decisions based on research and data.
Going forward, we recommend more user testing to ensure that our UX copy and information hierarchy are clear, and that functions provide appropriate feedback.