Decode built for citizens who value urban awareness, community connection & meaningful exploration in every city walk.
Overview
Decode introduces the hidden language of city infrastructure through the lens of utility graffiti. The platform combines data collection and photography to visualize how these markings integrate into everyday urban life, revealing both their functional and cultural significance.
By transforming unnoticed street symbols into interactive learning and storytelling experiences, Decode raises awareness of the city’s invisible systems and empowers citizens to form deeper, more meaningful connections with their local environment.
Project
Project / Decode
Category / UI/UX
Location / Providence, RI
Date / 2023
Decode built for citizens who value urban awareness, community connection & meaningful exploration in every city walk.
Overview
Decode introduces the hidden language of city infrastructure through the lens of utility graffiti. The platform combines data collection and photography to visualize how these markings integrate into everyday urban life, revealing both their functional and cultural significance.
By transforming unnoticed street symbols into interactive learning and storytelling experiences, Decode raises awareness of the city’s invisible systems and empowers citizens to form deeper, more meaningful connections with their local environment.
Project
Project / Decode
Category / UI/UX
Location / Providence, RI
Date / 2023
Decode built for citizens who value urban awareness, community connection & meaningful exploration in every city walk.
Overview
Decode introduces the hidden language of city infrastructure through the lens of utility graffiti. The platform combines data collection and photography to visualize how these markings integrate into everyday urban life, revealing both their functional and cultural significance.
By transforming unnoticed street symbols into interactive learning and storytelling experiences, Decode raises awareness of the city’s invisible systems and empowers citizens to form deeper, more meaningful connections with their local environment.
Project
Project / Decode
Category / UI/UX
Location / Providence, RI
Date / 2023
Problem statement
Problem statement
What is Utility Graffiti?
What is Utility Graffiti?
Utility graffiti refers to the colorful markings and symbols spray-painted on streets and sidewalks that indicate the location of underground infrastructure such as power lines, gas pipes, water mains, and communication cables.
These markings serve as a critical communication system between utility companies, construction crews, and excavation teams, helping prevent accidental damage to buried utilities during digging projects.
Each color represents a specific type of utility—red for electric lines, yellow for gas, blue for water, and so on—while various symbols and abbreviations provide detailed information about pipe sizes, depths, and facility owners.
Though often mistaken for vandalism or ignored by the general public, utility graffiti is actually a standardized safety language that plays a vital role in maintaining the city's hidden infrastructure and protecting both workers and the community from potentially dangerous utility strikes.
Utility graffiti refers to the colorful markings and symbols spray-painted on streets and sidewalks that indicate the location of underground infrastructure such as power lines, gas pipes, water mains, and communication cables.
These markings serve as a critical communication system between utility companies, construction crews, and excavation teams, helping prevent accidental damage to buried utilities during digging projects.
Each color represents a specific type of utility—red for electric lines, yellow for gas, blue for water, and so on—while various symbols and abbreviations provide detailed information about pipe sizes, depths, and facility owners.
Though often mistaken for vandalism or ignored by the general public, utility graffiti is actually a standardized safety language that plays a vital role in maintaining the city's hidden infrastructure and protecting both workers and the community from potentially dangerous utility strikes.
Create learning space about the function of utility graffiti
goal #1
Spread awareness through interactivity
goal #2
Apply in local community and form deeper connection with the city
goal #3
Create learning space about the function of utility graffiti
goal #1
Spread awareness through interactivity
goal #2
Apply in local community and form deeper connection with the city
goal #3
Create learning space about the function of utility graffiti
goal #1
Spread awareness through interactivity
goal #2
Apply in local community and form deeper connection with the city
goal #3
the system behind
the system behind
understanding the color code
understanding the color code
RED
ELECTRIC POWERLINES, CABLES,
CONDUIT AND LIGHTING CABLES
RED
ELECTRIC POWERLINES, CABLES,
CONDUIT AND LIGHTING CABLES
YELLOW
gas, oil stream, petroleum
or gaseous materials
YELLOW
gas, oil stream, petroleum
or gaseous materials
PURPLE
reclaimed water,
irrigation and slurry lines
PURPLE
reclaimed water,
irrigation and slurry lines
ORANGE
communication, alarm
or signal lines, cables
BLUE
portable water
BLUE
portable water
GREEN
sewers and drain lines
GREEN
sewers and drain lines
WHITE
proposed excavation
WHITE
proposed excavation
PINK
temporary survey marking
PINK
temporary survey marking
PINK
temporary survey marking
ORANGE
communication, alarm
or signal lines, cables
ORANGE
communication, alarm
or signal lines, cables
RED
ELECTRIC POWERLINES, CABLES,
CONDUIT AND LIGHTING CABLES
RED
ELECTRIC POWERLINES, CABLES,
CONDUIT AND LIGHTING CABLES
YELLOW
gas, oil stream, petroleum
or gaseous materials
YELLOW
gas, oil stream, petroleum
or gaseous materials
GREEN
sewers and drain lines
GREEN
sewers and drain lines
ORANGE
communication, alarm
or signal lines, cables
ORANGE
communication, alarm
or signal lines, cables
BLUE
portable water
BLUE
portable water
PURPLE
reclaimed water,
irrigation and slurry lines
PURPLE
reclaimed water,
irrigation and slurry lines
WHITE
proposed excavation
WHITE
proposed excavation
PINK
temporary survey marking
PINK
temporary survey marking
Common Symbols & Notations
Common Symbols & Notations
Line Markings
Marking Buried Splices,
Valves, Manholes
Line Markings
Oversized
Utility Markings
Oversized
Utility Markings
Corridor Markings
Corridor Markings
No Conflict
No Conflict
Markings Offsets
Line Markings
Markings Offsets
Conduit Markings
Oversized
Utility Markings
Conduit Markings
Marking Buried Splices,
Valves, Manholes
Marking Buried Splices,
Valves, Manholes
Corridor Markings
Corridor Markings
No Conflict
No Conflict
Marking Buried Splices,
Valves, Manholes
Markings Offsets
Markings Offsets
Conduit Markings
Conduit Markings
Marking Buried Splices,
Valves, Manholes
visual documentation
visual documentation
Street Markings Timeline: 14 years of change (2007-2021)
Street Markings Timeline: 14 years of change (2007-2021)
Within a 1km radius of downtown Providence, RI, data and photos of graffiti and utility surfaces were collected using Google Maps Street View and through on-foot exploration of the area. This approach allowed for a comparison of graffiti over time to observe changes and trends.
Within a 1km radius of downtown Providence, RI, data and photos of graffiti and utility surfaces were collected using Google Maps Street View and through on-foot exploration of the area. This approach allowed for a comparison of graffiti over time to observe changes and trends.
key findings
key findings
what the data reveals
what the data reveals
Temporal Patterns
Temporal Patterns
The timeline grid (2007-2021) shows concentrated documentation periods, with notably more activity in 2011, 2014-2016, and 2019
Certain streets/locations show repeated marking activity over multiple years, indicating ongoing infrastructure work or maintenance cycles
The timeline grid (2007-2021) shows concentrated documentation periods, with notably more activity in 2011, 2014-2016, and 2019
Certain streets/locations show repeated marking activity over multiple years, indicating ongoing infrastructure work or maintenance cycles
Spatial Distribution
Spatial Distribution
The Providence downtown map shows utility markings are heavily concentrated in specific corridors and intersections
High-density areas suggest either complex underground infrastructure or frequent construction/maintenance activity
The 1km radius study area reveals distinct patterns of infrastructure concentration versus sparse areas
The Providence downtown map shows utility markings are heavily concentrated in specific corridors and intersections
High-density areas suggest either complex underground infrastructure or frequent construction/maintenance activity
The 1km radius study area reveals distinct patterns of infrastructure concentration versus sparse areas
Functional Insights
Functional Insights
The color-coded system (red, yellow, orange, blue, green, purple, pink, white) indicates the diversity of underground utilities in a relatively small area
Multiple utility types often converge at the same locations, revealing the complexity of urban infrastructure planning
The color-coded system (red, yellow, orange, blue, green, purple, pink, white) indicates the diversity of underground utilities in a relatively small area
Multiple utility types often converge at the same locations, revealing the complexity of urban infrastructure planning
Standardization
Standardization
The consistent use of symbols and marking conventions (arrows, T-junctions, offsets, corridor markings) demonstrates a standardized communication system across different utility companies and time periods
The consistent use of symbols and marking conventions (arrows, T-junctions, offsets, corridor markings) demonstrates a standardized communication system across different utility companies and time periods
Infrastructure Age & Maintenance
Infrastructure Age & Maintenance
The frequency of re-marking in certain areas suggests either aging infrastructure requiring frequent access or areas of active development
Gaps in the timeline may indicate periods of infrastructure stability or reduced construction activity
The frequency of re-marking in certain areas suggests either aging infrastructure requiring frequent access or areas of active development
Gaps in the timeline may indicate periods of infrastructure stability or reduced construction activity
Brand identity
Brand identity
typography
typography
Brand identity
Brand identity
logo
logo
Brand Logo Guideline
Brand Logo Guideline
App Logo Guideline
App Logo Guideline
80 px
80 px
24 px
24 px
42 px
42 px
USER INTERFACE
USER INTERFACE
Mobile Interaction Design
Mobile Interaction Design
preloader page
An engaging preloader page featuring an animated main logo with graffiti symbols that seamlessly unveils the brand's aesthetic essence and thematic identity.
preloader page
An engaging preloader page featuring an animated main logo with graffiti symbols that seamlessly unveils the brand's aesthetic essence and thematic identity.
preloader page
An engaging preloader page featuring an animated main logo with graffiti symbols that seamlessly unveils the brand's aesthetic essence and thematic identity.
landing page
As the landing page unfolds, a stylized map—customized to reflect the brand's unique aesthetic—takes center stage, serving as the hub of the interface.
Surrounding the map are sleek, intuitive menu icons that guide users to four key sections:
Community
Augmented Reality
About
Collection
landing page
As the landing page unfolds, a stylized map—customized to reflect the brand's unique aesthetic—takes center stage, serving as the hub of the interface.
Surrounding the map are sleek, intuitive menu icons that guide users to four key sections:
Community
Augmented Reality
About
Collection
landing page
As the landing page unfolds, a stylized map—customized to reflect the brand's unique aesthetic—takes center stage, serving as the hub of the interface.
Surrounding the map are sleek, intuitive menu icons that guide users to four key sections:
Community
Augmented Reality
About
Collection
Information map
The interactive map becomes the core feature of the app, offering an engaging and visually dynamic experience. When users click to view the map section, they are presented with a vibrant interface featuring colored spots strategically placed to represent graffiti locations.
Information map
The interactive map becomes the core feature of the app, offering an engaging and visually dynamic experience. When users click to view the map section, they are presented with a vibrant interface featuring colored spots strategically placed to represent graffiti locations.
Information map
The interactive map becomes the core feature of the app, offering an engaging and visually dynamic experience. When users click to view the map section, they are presented with a vibrant interface featuring colored spots strategically placed to represent graffiti locations.
Interactive Spot Functionality
Users can click on any colored spot to open a detailed pop-up showcasing:
Photos of the graffiti, with high-resolution visuals for an immersive view.
Location details, including the exact address or coordinates.
Date and time when the graffiti was captured, offering a sense of history or timeliness.
Interactive Spot Functionality
Users can click on any colored spot to open a detailed pop-up showcasing:
Photos of the graffiti, with high-resolution visuals for an immersive view.
Location details, including the exact address or coordinates.
Date and time when the graffiti was captured, offering a sense of history or timeliness.
Interactive Spot Functionality
Users can click on any colored spot to open a detailed pop-up showcasing:
Photos of the graffiti, with high-resolution visuals for an immersive view.
Location details, including the exact address or coordinates.
Date and time when the graffiti was captured, offering a sense of history or timeliness.
Hover Effects with Contextual Meaning
When a user hovers over a colored spot, overlay dropdown information card appears, revealing the underlying meaning of the graffiti's color based on its visual language or societal symbolism.
Hover Effects with Contextual Meaning
When a user hovers over a colored spot, overlay dropdown information card appears, revealing the underlying meaning of the graffiti's color based on its visual language or societal symbolism.
Hover Effects with Contextual Meaning
When a user hovers over a colored spot, overlay dropdown information card appears, revealing the underlying meaning of the graffiti's color based on its visual language or societal symbolism.
community page
A spotlight feature highlights trending posts, featured graffiti projects, or community challenges, encouraging users to actively participate and contribute.
This catalog not only keeps users connected but also creates a lively archive of urban art, reinforcing the sense of community through shared creativity and dialogue.
Time Chronological Catalog
At the heart of the page is a real-time chronological catalog that continuously updates with newly uploaded photographs of graffiti. This catalog functions like a live feed, creating an engaging and familiar social experience.
community page
A spotlight feature highlights trending posts, featured graffiti projects, or community challenges, encouraging users to actively participate and contribute.
This catalog not only keeps users connected but also creates a lively archive of urban art, reinforcing the sense of community through shared creativity and dialogue.
Time Chronological Catalog
At the heart of the page is a real-time chronological catalog that continuously updates with newly uploaded photographs of graffiti. This catalog functions like a live feed, creating an engaging and familiar social experience.
community page
A spotlight feature highlights trending posts, featured graffiti projects, or community challenges, encouraging users to actively participate and contribute.
This catalog not only keeps users connected but also creates a lively archive of urban art, reinforcing the sense of community through shared creativity and dialogue.
Time Chronological Catalog
At the heart of the page is a real-time chronological catalog that continuously updates with newly uploaded photographs of graffiti. This catalog functions like a live feed, creating an engaging and familiar social experience.
augmented reality (ar)
An immersive and interactive feature within the app designed to engage users in a treasure hunt style experience. Participants can capture their discoveries of utility graffiti while seamlessly interacting with their surroundings.
augmented reality (ar)
An immersive and interactive feature within the app designed to engage users in a treasure hunt style experience. Participants can capture their discoveries of utility graffiti while seamlessly interacting with their surroundings.
augmented reality (ar)
An immersive and interactive feature within the app designed to engage users in a treasure hunt style experience. Participants can capture their discoveries of utility graffiti while seamlessly interacting with their surroundings.
about page
Introducing the app's purpose, vision, and mission to build meaningful connections through the art of utility graffiti.
about page
Introducing the app's purpose, vision, and mission to build meaningful connections through the art of utility graffiti.
about page
Introducing the app's purpose, vision, and mission to build meaningful connections through the art of utility graffiti.
collection page
collection page
A streamlined and organized way to explore collected data, offering direct access for users who prefer a straightforward browsing experience without interacting with the map.
A streamlined and organized way to explore collected data, offering direct access for users who prefer a straightforward browsing experience without interacting with the map.
Explore by Streets
Color-coded for quick visual sorting
Effortlessly navigate & instantly view collection
Explore by Streets
Color-coded for quick visual sorting
Effortlessly navigate & instantly view collection
Explore by Streets
Color-coded for quick visual sorting
Effortlessly navigate & instantly view collection
MENU