StreetSmARTs

Web and Mobile Platform Design

streetsmarts homepage desktop.png

Client

StreetSmARTs

Role

UX Researcher

Scope

2 week sprint

Tools Used

Figma

Trello

Otter

Zoom

Overview

What is StreetSmARTs?

before and after.jpeg

​​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.

​Sirron Norris “Soy de Aqui”, 2019

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.

My role

iPhone XS mockup Perspective Style (Righ

In a team of 3 UX designers, I focused on research, where I conducted initial interviews, affinity mapping, user personas, and usability testing of mid-fi and hi-fi prototypes.

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:

quotes.PNG

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 want a place to:

upload-icon-vector-illustration.jpg

Upload their work

Have business owners upload their space

Communicate about budget, timeline & expectations

Business Owners want a place to:

Reach out to artists

Put out their ideas

See portfolios

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.

Artist Persona

streetsmarts artist persona.png

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.

Business Owner Persona

streetsmarts business owner persona.png

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.

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.

streetsmarts c&c analysis.png

Based off out C&C, we decided 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.

userflows.png

Sketching

sketches.png

Mid-Fi Wireframes

mid fi wire.png

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.

Then we progressed to desktop wireframes:

Mid-Fi 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)

Most common issues in Mobile:

Too many steps in messaging

Disliked progress bar in messaging

Disliked built in contract in messaging

I wouldn’t have thought to see a checkout process in a messaging section.

Most common issues in Desktop:

Confusion on how to get back to homepage

?

Confusion with chat icon

If I want to go back to the homepage, I’m not sure how I would do that.

Synthesizing our Data

For each user during usability testing, we recorded:

  • whether or not they completed the task assigned

  • the time it took to complete each task

  • the number of errors taken for each task

This was done for tasks completed in both the Artist and Business Owner scenario, as shown.

The data shows us that:

  • 100% of users were able to complete every single task that was assigned

  • 50% of users made no errors at all

What does this tell us?

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

But how about areas for 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

wuoteeee.png

What does this tell us?

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.

foundational change.png

Prototype

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.

alsdkfhsd.png

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

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!