Tagg App: An End to Arrests and Shitty Graffiti
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
Create software that allows aspiring painters to tag any wall or surface without consequence, while closely replicating the experience of graffiti. This will lessen the number of tags in cities and make happy business owners, lower graffiti arrests, and make happier mothers (no more collect calls from their sons at the 5th precinct).
Scope
The solution will be an iOS app for aspiring and traversed graffiti artists. Our users need 3 requirements:
It has to be realistic. Users want to be able to shake the can, experience realistic spray distance/weight, and have multiple colors. To add to realism, the paint will emulate the MTN spray companies 12-pack of paint and can.
The paint experience has to live on an actual wall. To do this, we’ll use Apple’s AR (augmented reality) Kit.
It has to be saved to the wall. Graffitti is about leaving your mark. To replicate that experience, users will save their tags to a map that people can view in app via AR on an ANY wall. They can post grafitti to the map anonymously like in real life or with a street name (user name).
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
With Tagg, the potential money saved for businesses and cities on graffiti removal is enormous. Aspiring graffiti artists can also hone their craft and leave their mark, without having to worry about the fuzz. #WinWin.
