Tagg App: An End to Arrests and Shitty Graffiti

Charlie Walsh
Sep 27, 2017 · 5 min read

30 Days, 30 UIs: Days 22–25

I live in New York City.

Everywhere I look there’s beautiful graffiti and street art. But sometimes the art can be juvenile. A wall is one thing. But what about windows, doors, fences, cars? Anything can be susceptible to hosting tags.

To be honest, the location doesn’t really bother me. But there is a problem with painting at any of these locations.

(1) Kids are getting arrested who graffiti on private property. This is because yes, it’s illegal, but also because (2) there is no safe space to practice writing.

This lack of consequence-free spaces (3) costs a lot of money in cleanup for business and the state. In the past, NYC would spend over $1 Mill a year on state-funded cleanups. Seattle also budgets 1.7 Mill a year to public cleanup and reinforcement, and this is just on their metro-transit establishments.

Solution

Scope

The solution will be an iOS app for aspiring and traversed graffiti artists. Our users need 3 requirements:

Structure

Here’s a quick and dirty information architecture model of how the MVP is set up. Navigating between pages/flows is accessed by a bottom tabbed nav.

Wireframes

Here’s a few key screens for the Paint flow. The first is the color selector. It allows users to use 3 colors at a time.

The second is the main screen. It has an aimer, spray can, and a “spray remaining” progress bar. The step buttons are in the top nav, which I took influence from instagram.

User Testing

I prototyped the wireframes using marvel and created a discovery task for our users. I found that I could reduce the design progress bar in the paint flow to lower cognitive load for our users.

Users also wanted to be able to use all 12 colors.

To fix this, I changed the flow to be more like snapchat, allowing our users to pick any colors once they started a new paint session via an overlay.

The progress bar was then removed and added to the spray aimer.

Graffiti Maps

After designing and testing the flow for Paint, I made the Graffiti Maps. Graffitti Maps allows any user to search and find graffiti from around the world. Users can click through to a graffiti location and view that graffiti experience in AR on their own wall.

Visual Design

I wanted to keep the look and feel of using spray paint for our users. So I placed a spray can in the interface with an 80% opacity to keep it out from being obtrusive to the UX.

Navigation in AR Mode has a gradient nav bar that goes from dark to light, with 0% opacity at the bottom. This Nav overlay makes it easier to see all lighting scenarios for our user. The text buttons/header also have a shadow with 1 blur, 1 Y axis to make it more prominent.

In the preview step, the main container is styled to resemble a metal spray can. Note the prominence of the preview button. This is because the experience of viewing the Tag will create a wow factor for our graffiti artist. It also lets our user see if he wants to add more to his art before saving it to the cloud. Instead of pins, we have cans on the map to show the graffiti locations.

When a user views graffiti from the map, the visual graffiti tag/original wall is anchored to the users wall. The user can view from close, far, and any angle via the augmented reality camera viewer.

Tagg: A solution to shitty grafitti and arrests

Thanks for reading! Comment, Clap, and Subscribe!

Charlie Walsh

Written by

UX/UI Designer From Brooklyn, New York. 30 Days, 30 UI Designs. https://Charles-uxdesign.com. https://www.linkedin.com/in/charles-a-walsh-7b25a373/.