Case Study: StreetSmARTs Platform Design

Image for post
Image for post
Image for post
Image for post

What is StreetSmARTs?

Image for post
Image for post
Sirron Norris “Soy de Aqui”, 2019

San Francisco is known as a place where different cultures collide and artists can thrive, so what better way to represent that than with vibrant murals throughout the city. Street art, specifically murals, are also known to help prevent unwanted graffiti that keeps reappearing. Why? Because artists, even graffiti artists, respect street art and acknowledge that it should be left alone.

The StreetSmARTs program is a partnership between the San Francisco Arts Commission and Public Works, which pairs artists with private property owners who have received Notices of Violation for the removal of graffiti on their buildings. In SF, the responsibility of graffiti removal is put on the building’s owner, so essentially if you don’t remove the graffiti from your building, you get fined. StreetSmARTs was created as an alternative solution, where murals can replace and prevent graffiti, while also beautifying neighborhoods in the process.

So what’s the problem?

The number one goal of our 2 week design sprint was to expand this platform to be inclusive of all property owners in SF wanting to enhance their property with murals. The current process is a long, drawn out application, which needs to be reviewed before any action is taken. This could take long periods of time, and some aren’t even guaranteed acceptance. We immediately started brainstorming ways in which this could be solved.

How could we extend this existing experience into a new platform?

Design Process

Image for post
Image for post
We followed the Double Diamond design model to organize our process.

1. Research

We began our research process by pulling in both artists and business owners and conducted user interviews. Our goal was to gain a sense of understanding from both perspectives about their wants, needs, and motivations. After the interview, we pulled several notable quotes:

All the data was then taken from the user interviews and made into 2 separate affinity maps, for both the artists and business owners. We were able to locate key insights and themes from each.

Artists would like a place to:
- upload their work
- have business owners upload their space
- communicate about the budget, timeline, and expectations

Business Owners would like a place to:
- reach out to artists
- put out their ideas
- see portfolios

2. Insights

Our research helped us discover current issues our users faced, as well as some of their wants. Now the next step was to define our design challenge with an accurate problem statement, which helped set the tone and kept us in check with what we actually needed to design.


In order to get a deeper understanding of our specific users, their needs, and the most essential insights about them, we built 2 different personas.

Image for post
Image for post

From Jack’s persona, we were able to extract a problem statement that provided a wide enough scope for us to begin thinking about solutions:

Jack needs a way to find artistic opportunities in his community so that he can create pieces that viewers feel moved by and pay his bills.

Image for post
Image for post

The same was done for Jill:

Jill needs a way to discover and vet artists that meet her needs so that she can commission them to paint a mural on her property.

It became clear that we were not only going to be designing for two personas, but on two separate platforms as well, since that’s what users indicated they wanted.

3. Ideation

C&C Analysis

Since we’re designing for two different users, we wanted to focus on platforms that had two personas as well, such as Rover and Airbnb. We did a feature inventory for both competitors and comparators, so that way we can get an idea of what our platform should include.

Well, based on our C&C research, we decided that we wanted:
1. Quick onboarding
2. Ability to link social media
3. Two sided outreach, where both sides can initiate the conversation
4. Online payment

User Flows

Before we began sketching, we wanted to form an idea of exactly what screens were needed and what process we wanted users to follow.

Image for post
Image for post

Keeping Jack’s needs in mind, we gave him the ability to browse through available gigs and choose the right one for him. He’s able to directly contact the business and have an open conversation about his ideas and what he can bring to the table.

Jill is now able to have a platform where she can search for artists in her community and check out their portfolio and experiences all in one place. All her questions and communication are figured out because of the messaging feature.


We began sketching for a mobile device first, and then later expanded towards desktop. It was a challenge to keep focused and only design for the user’s needs instead of getting carried away and broadening the scope, so we made sure to look back and reflect on what exactly Jack and Jill needed.

Image for post
Image for post

Mid-Fi Wireframes

Through the sketches we were able to produce mobile wireframes that were complete in the sense that we wanted users to be able to go through the entirety of both artist and business user flows.

Image for post
Image for post

Then progressed to desktop wireframes:

Image for post
Image for post

Mid-Fi Usability Testing

To put these wireframes to work, we conducted usability testing.

Our Purpose & Goal: to find out if our product is meeting user’s needs
Scenarios & Tasks: have each user go through and complete tasks as both Jack the artist and Jill the business owner
Metrics: quantitative (success rate, time needed to complete tasks, number of errors) and qualitative (have them speak through their process)

Mid-Fi Usability Testing Results

Identifying Recurring Themes

Most common issues in Mobile:
- too many steps in the messaging
- users did not like the progress bar in the messaging
- users did not like the built in contract in the messaging page

Most common issues in Desktop:
- confusion on how to get back to homepage
- chat icon confusion

Image for post
Image for post
Photo by David Travis on Unsplash

Synthesizing Our Data

If we are to look at what went well during usability testing, it would be:
- 100% of users were able to complete every single task that was assigned
- 50% of users made no errors at all

We have a very clear and simple user flow that was understood by most users.

Now to look at areas of improvement:
- for a certain task (sign up as a business), users spent about 6.8 seconds longer on the desktop than on the app, which was the only instance where users spent a longer amount of time on the desktop compared to the app

Image for post
Image for post
Users voiced their frustration with the sign up pages.

Users were confused on the layout and amount of content on the sign up page.

Turning Insights Into Something Actionable

Our biggest finding was that users did not like our messaging feature because of the contracts negotiation function being inside of it, so we made an entirely new contracts page in the main navigation bar.

Image for post
Image for post

4. Prototype

With all the findings from the mid-fi usability testing in mind, we moved forward and created a high fidelity prototype

Image for post
Image for post
Landing page

With the final prototype, artists like Jack are able to create a portfolio within the app and get started on the job hunt. While business owners like Jill are able to post what job opportunities they have and search for the perfect artist to get the job done.
We’ve now included a contracts page, which users can create once an agreement has been made between artists and business owners.

Image for post
Image for post

5. Future Steps

Despite all we were able to accomplish, there’s more work to be done. We’d love to:
- Prototype and do further testing with the desktop site
- Allow cross-persona journeys where we can allow artists to also be a business owner
- Build out Favorites, Notification, and Setting pages

6. Learnings

This project gave me an understanding of the difficulties behind extending an already existing experience into a new platform, or in our case, into 2 new platforms. Working closely with my team throughout the past couple weeks has been a memorable experience, and they made this intimidating process much more enjoyable. I was able to learn from each of their expertise and am looking forward to applying this new found knowledge in my future projects.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store