StreetSmARTS Mobile App Design Case Study

Connecting Muralists with Clients More Effectively

A case study detailing the design process of researching StreetSmARTS and creating a mobile app for muralists and property owners based on their program.

Project type

Mobile App Design

Role(s)

UX/UI Designer - Research, Synthesis, Ideation, Wireframing Visual Design, Prototyping

Tools

Figma, Google Suite

Timeline

October 2024 - November 2024, 3 week sprint

Introduction to StreetSmARTS

For this project, I worked with fellow UX/UI designers Laura Tomos and India Cross to create a mobile app based on San Francisco’s StreetSmARTS program.

StreetSmARTS is a San Francisco-based program that connects property owners with their registered muralists. The property owners can then hire muralists to paint over illegal graffiti on their property walls.

As an extension of that program, Laura, India, and I had to design a mobile app that allowed property owners to directly connect with and commission muralists to paint murals on their property. We also expanded the reach of the program to all property owners across the country.

Competitive & Comparative Analysis

In order to familiarize ourselves better with the processes and objectives of programs like StreetSmARTS, our team researched other similar programs based in other areas of the United States such as Murals DC, Denver Walls, LA City Culture, and Muros.

These programs had a wide range of objectives from city beautification to supporting and uniting artists. For programs that were events-based or assigned their artists to a variety of jobs outside of murals, we mainly used

I paid particular attention to the application processes for artists and business owners to participate in the program in order to identify common requirements to use in our eventual app:

Artists must submit a portfolio of relevant work for consideration

Property owners submit applications or offer their walls for murals

The public works department of the city must be involved in this process

When we reconvened after competitive and comparative analyses, we found 3 potential user groups of our app, as listed below:

Property owners

The ones doing the hiring

Muralists

The ones hired to paint the murals

Community

The ones engaging with the murals

User Research

Interviewing Property Owners

In the initial stages of our user research, we set out to contact property owners, particularly those who had murals on their property. We wanted to focus on property owners as the main users of the app because they would be the artists’ clients and the ones requesting their services.

However, the property owners we interviewed had either no direct experience with hiring a muralist or received murals at no cost.

Interviewing Muralists

Due to the lack of productive responses for interviews from property owners, we decided to pivot and make muralists our app’s primary users and property owners our secondary users. The reason for this change is that we determined that the muralists would be the backbone of our app as there needs to be muralists within our app’s network for property owners to engage with the platform at all.

When we reached out to our colleagues, we were able to find muralists to interview through their connections and could paint a more accurate picture of what the mural commission process looked like, step-by-step. I conducted 1 user interview with a muralist and later reached out to this same muralist for a usability test of our prototype later in the process.

Synthesizing Interviews

While gathering interview data, we created separate task flows for the muralist member and job application processes and the property owner’s process for commissioning a muralist.

Below are some key insights we identified and incorporated into our muralist user persona, Jasmine:

Jasmine's Goals

Connect with local clients for mural art commissions.
Collaborate and communicate with clients to transform their visions into stunning murals and ensure client satisfaction.
Attract potential clients and expand my network so I can make a living as a freelance muralist.
Inspire and transform public spaces with her artwork.

Jasmine's Frustrations

Clients offering low budgets that don’t cover materials, labor, and other overhead.
Clients underestimating the scope of a mural project and having unclear and unrealistic expectations.
Inconsistency with client communication during a project.
Having trouble finding legitimate opportunities.

Ideating and Sketching

After gathering more insight directly from muralists, we came up with key features and flows needed to include. Then we began ideating on the UI of our app. Keeping the muralist application and job search processes in mind, we created some task flows for how muralists would find jobs and apply for them.

A muralist applying for a job through a job post
A user searching for murals using the map function
A property owner creating a job post
A property owner contacting a muralist for negotiation

The Figma file below illustrates these task flows as well as a potential site map for our app.

Below are some sketches I created for how the muralist application, job posting creation, and mural search flows would work on our app. We drew from mobile app designs of social media sites like Instagram so that the interface would be familiar and intuitive for our users.

Muralist applying to a job (1-5 L to R) and creating a job posting (6-7 L to R)

Mural project brief made by property owner after contacting the muralist (simplified in prototype)

Mural search

Creating Lo-Fi Mobile Wireframes

When it was time to put everything together into wireframes, we decided to build our app for the iPhone. The reasoning for this was our team were all familiar with iOS and iOS had a higher market share than Android in the US (as of 2024). This also ensured that our app would be specifically functional for mobile, even if it would exclusively work on iOS to begin with.

Below is our Figma file with our grayscale lo-fi wireframes where we divided up the wireframes by different task flows.

Hi-Fi Prototype - A Streamlined Experience

When we began updating our prototype to hi-fi, we used Dribbble and Unsplash for stock images of murals and profiles. Building upon iOS’s interface, we utilized HIG guidelines and a red and white color palette based on StreetSmARTS’ original color palette. Much to our pleasant surprise, the bright red we used worked well visually with our app.

The prototype included all task flows for muralists and property owners within the same app for simplicity, as any differences between how the muralists and property owners would use the app were minimal.

Usability Testing with the Hi-Fi

After finishing our hi-fi prototype, we asked several muralists and people involved with art to test it so we could see them walk through the artist and job application processes.

I personally conducted one usability test with the same muralist friend I interviewed during the research phase. Their feedback was overall very positive and they found the app straightforward and easy to use. They also appreciated how easy it was to find different features and access them.

For some areas of improvement, this muralist suggested a few minor clarifying changes:

For the muralist search, they would have liked to see a way to filter the list by muralists they were following.

On job postings, they suggested specifying dates for deadlines rather than just saying “3 days” since that could mean 3 days after a job was posted or 3 days after a muralist submits their application.

On the job application itself, they mentioned it would be helpful to make the location apparent early on since that would be pertinent information.

They also suggested giving users an option to upload external photos and documents since applying to jobs and posting jobs via mobile app is more challenging than doing those same tasks on desktop.

When Laura, India, and I consolidated our feedback as a team, we made some final updates to our hi-fi wireframes based on all of our usability tests, as seen below.

Job Posting "Before"

The location and budget were barely visible under the title.

The description took up a lot of vertical space.

Job Posting "After"

Most pertinent information such as location, budget, application due date, and project timeline are shown first right after the title.

The description is moved below all the pertinent information above.

Artist Profile "Before"

Users noted wanting to see a bio on muralists' profiles and customer ratings from working with them.

Users wanted to see ratings and reviews from customers about the muralists.

Artist Profile "After"

There is now a muralist bio under the muralist's name.

Average ratings and number of people rating the artist is shown at the top of the profile under the muralist's name as well.

Key Takeaways

From designing the StreetSmARTS mobile app, I learned the full process of creating the design of a brand new mobile app for an existing program from the research to the hi-fi stage.

During the research phase, pivoting from focusing on muralists over property owners as our primary users allowed me to have a clearer direction for the design and features of the app. Even though property owners would be requesting muralists’ services through StreetSmARTS, the StreetSmARTS app would not function or exist without the muralists who share their art and provide their services.

Soojung Choi