Logo
Logo

Collaborative Project with

Visible, an AR app for street artists, empowers users to place and create art pieces, compete over territory, and engage in dynamic interactions. The app showcases a gallery for art collection and an AR mode for placing imported pieces and creating new ones using AR glasses. Art pieces can be crossed out by others after 24 hours, triggering a 1-hour defense period

Project Type

UX & UI
AR Smartphone App

AR Hololens 2 App
A Unity Game

Duration

2 weeks

Skills

Visual Identity Design
Design Library
Information Architecture
Usability Testing
User Interface Design

Project Management
Unity Dev. with SDK
Filming, Directing / Editing

Team

Kaitlynn A. Harrison

Miguel Seabra

Robin Good

Collaboration

ZHdK University
ETHZ University
Microsoft Technology
Center in Zürich

My Role

Product Research
Concept Development
UI & UX Design
Ideating Design
Prototyping
Branding Design
Project Management

Worked on the design and development of “Visible” from concept to execution, optimizing user experience for mobile and AR platforms. Collaborated on user research, refined UI/UX, built high-fidelity prototypes, and worked with developers to integrate interactive AR features, balancing creative freedom with intuitive gameplay.

Main Challenge

The main challenge for “Visible” was developing an AR platform that lets street artists express themselves digitally and compete for territory. The app needed to merge digital and physical spaces, with a user-friendly interface for smartphones and AR glasses, balancing creativity, usability, and competitive gameplay.

Users

Our users are street artists and digital creators who thrive on creativity, competition, and community. They seek platforms to showcase art, connect with peers, and explore AR technology. These tech-savvy users value spaces where their art can interact with the real world, claim virtual territories, and leave a lasting digital mark.

Our Solution

“Visible” revolutionizes urban art with AR technology and interactive gameplay, letting users create, place, and defend digital art in real-world settings. The app blends gallery views and immersive AR modes, enhancing engagement with strategic features like a 24-hour defense period.

Research

Our research for “Visible” blended user insights with field studies to develop an AR platform that redefines urban art. We focused on merging digital creativity with real-world spaces, creating an app that resonates with street artists’ competitive spirit.

  1. Market and Competitive Analysis

Identified gaps in current AR and digital art platforms for immersive interaction and social engagement. This insight inspired the creation of “Visible,” merging art, competition, and community by allowing artists to place and defend virtual art in real-world spaces.

  1. Understanding User Needs

Our research included over 25 interviews and surveys with street artists, graffiti enthusiasts, and digital creators, uncovering key user needs and pain points:

Precise AR Art Placement: Users want tools that allow them to accurately place and showcase their art in real-world settings.
Competitive Gameplay: There is a strong interest in gamified elements, like defending and claiming virtual territories.
Community and Engagement: A space where artists can comment, like, and build a community around their creations.

These insights shaped the development of “Visible,” ensuring that the app caters to both novice and experienced users who value creativity, competition, and community.

Key Findings

Gamification Elements: A desire for game-like experiences that blend creativity and competitive engagement.

User-Friendly UI: The need for a simple, intuitive interface that facilitates seamless navigation for all users.

Community Features: A demand for features that promote collaboration, feedback, and community building.

  1. Defining User Profiles

Persona

Developed a detailed user persona that shaped the app’s UI/UX design, ensuring a tailored and engaging user experience.

Miles Jackson

Age

12-year-old

Education

6th Grade

Location

New York

Tech Literate

High

Mention

"I’m all about turning blank walls into something amazing. Whether it’s sketching up some graffiti or exploring new spots with my friends, I’m always creating. Mixing that with tech would be next-level, and the chance to do it together would be unreal."

Personality

Tech-savy, Extrovert, Artist, loves spending time with his friends

Bio

Miles is an artist from New York who’s passionate about graffiti and abstract art. He loves combining his creativity with cool tech, whether he’s exploring the city with friends or working on his next big idea. Always eager to push the limits, Miles is constantly looking for new ways to create something awesome and collaborate with others.

Core Needs

Creative Freedom: Wants to express himself through graffiti and abstract art.


Collaborative Platform: Desires a tech-driven space to create and connect with friends.


Pushing Boundaries: Aims to explore new possibilities in art with a like-minded community.

Frustrations

Limited opportunities to collaborate with others on graffiti projects.

Difficulty finding a platform that combines art and technology seamlessly.


Lack of tools that allow for easy sharing and showcasing of his creations with friends.

  1. Technology Exploration

Researched AR frameworks like Immersal to learn about precise scene detection, cross-platform compatibility, and powerful creation tools, solidifying its position in urban art and AR gameplay.

Open-Source AR SDKs: Leveraged tools from leading platforms to integrate advanced AR functionalities.
Scenery Detection and Mapping: Developed technology for accurate virtual art placement in varied environments.
Cross-Platform Capabilities: Built features that support both smartphone and AR glasses to enhance accessibility and user experience.

  1. Field Research and Direct Feedback

Immersed ourselves in the street art scene by attending events, joining workshops, and testing prototypes with real users. This approach helped us fine-tune features like AR art placement, interactive navigation, and competitive elements to better meet user needs and expectations.

Prototyping & Testing: Conducted iterative user tests in real-world settings to optimize the AR experience and gameplay mechanics.
User Feedback Integration: Adjusted design elements based on direct feedback to improve usability and engagement.

Concept Development

Information Architecture
User Flow
Game Mechanics & Reward System
Visual Identity

Focused on creating an immersive AR experience for both smartphones and HoloLens 2. We combined thorough UX research, concept ideation, and prototype testing with design and functionality refinements to deliver a seamless user experience across platforms.

What is Visible?
How it works
How to Placing Pieces
Crossing & Defending
How Spoting works
Start the Game!

What is

Visible is an AR social gaming app that lets street artists create and place graffiti in real-world locations. Compete for territory, cross out rivals, and defend your art in a dynamic city-wide canvas, viewable by anyone—even the world!

What is

Visible is an AR social gaming app that lets street artists create and place graffiti in real-world locations. Compete for territory, cross out rivals, and defend your art in a dynamic city-wide canvas, viewable by anyone—even the world!

  1. App User Flow Sketch

Information Architecture

The app’s architecture ensures a simple, accessible user flow. Features like digital artwork placement, territory claiming, and community engagement are easy to navigate. A streamlined onboarding process and optimized AR exploration keep the focus on creativity and interaction.

  1. Game Mechanics & Reward System

The core of “Visible” revolves around dynamic gameplay that encourages creativity and competition. Users can place their digital art in real-world locations and defend them from being crossed out by others. The reward system is based on respect points, gained through successful defense of artworks and other creative activities. This gamified approach adds a layer of strategy and excitement, motivating users to explore, create, and compete.

  1. Moodboard

visual identity merges street art, cyberpunk, and digital graffiti. Bold typography, glitch effects, neon accents, and clean, minimalist graphics create a modern, futuristic look that reflects the dynamic energy of urban art.

  1. Branding

Logo
Colour Scheme

The branding for “Visible” blends sharp, angular typography inspired by street art with a sleek, modern look. The color palette mixes bold hues like pink, blue, and orange with neutral tones, creating a striking visual contrast suited for both digital and real-world settings.

Full LOGO

LOGO

LOGO/Icon

Typeface: Helvetica

  • #FFFFFF

  • #DB78DE

  • #FC4DA0

  • #8ED9E9

  • #FEB71E

  • #323232

App Design

System Design

The app design prioritizes user-centric navigation, making it easy to create, place, and defend digital artworks in real-world spaces. It enhances accessibility and creativity for seamless interaction between digital and physical environments.

Wireframes

The wireframe assisted us in incorporating the interface into the design.

Assets

Some of the assets you see below have been desiguned using a minimilaistic and colour poping scheme.

Survey Scan

This icon prompts the user to scan the buildings across the street.

Survey Scan

This icon prompts the user to scan the buildings across the street.

Survey Scan

This icon prompts the user to scan the buildings across the street.

Survey Scan

This icon prompts the user to scan the buildings across the street.

Survey Scan

This icon prompts the user to scan the buildings across the street.

Mapping Area

This icon prompts the user to capture their surroundings while rotating in place.

Mapping Area

This icon prompts the user to capture their surroundings while rotating in place.

Mapping Area

This icon prompts the user to capture their surroundings while rotating in place.

Mapping Area

This icon prompts the user to capture their surroundings while rotating in place.

Mapping Area

This icon prompts the user to capture their surroundings while rotating in place.

Icon Library

The icon design is playful, rounded, minimalistic icons for a friendly user experience.

Icon Library

The icon design is playful, rounded, minimalistic icons for a friendly user experience.

Icon Library

The icon design is playful, rounded, minimalistic icons for a friendly user experience.

Icon Library

The icon design is playful, rounded, minimalistic icons for a friendly user experience.

Icon Library

The icon design is playful, rounded, minimalistic icons for a friendly user experience.

Organic Mess

TanSide

Zürich

Replaced

11.10.2022

Objectificatio...

Gilhame

Berlin

Replaced

21.10.2022

Posted Up

10thWonder

Zürich

Stading

27.10.2022

Gallery Component

It’s designed to scale, and when selected, it displays the location, status, and date.

Organic Mess

TanSide

Zürich

Replaced

11.10.2022

Objectificatio...

Gilhame

Berlin

Replaced

21.10.2022

Posted Up

10thWonder

Zürich

Stading

27.10.2022

Gallery Component

It’s designed to scale, and when selected, it displays the location, status, and date.

Organic Mess

TanSide

Zürich

Replaced

11.10.2022

Objectificatio...

Gilhame

Berlin

Replaced

21.10.2022

Posted Up

10thWonder

Zürich

Stading

27.10.2022

Gallery Component

It’s designed to scale, and when selected, it displays the location, status, and date.

Organic Mess

TanSide

Zürich

Replaced

11.10.2022

Objectificatio...

Gilhame

Berlin

Replaced

21.10.2022

Posted Up

10thWonder

Zürich

Stading

27.10.2022

Gallery Component

It’s designed to scale, and when selected, it displays the location, status, and date.

Organic Mess

TanSide

Zürich

Replaced

11.10.2022

Objectificatio...

Gilhame

Berlin

Replaced

21.10.2022

Posted Up

10thWonder

Zürich

Stading

27.10.2022

Gallery Component

It’s designed to scale, and when selected, it displays the location, status, and date.

Time to Defend:

58:

59

58

57

56

55

54

53

52

51

50

49

48

47

46

45

44

43

42

41

40

Defend Count Down

Time allotted for the user to reach and defend their artwork before it gets crossed out: 1 hour.

Time to Defend:

58:

59

58

57

56

55

54

53

52

51

50

49

48

47

46

45

44

43

42

41

40

Defend Count Down

Time allotted for the user to reach and defend their artwork before it gets crossed out: 1 hour.

Time to Defend:

58:

59

58

57

56

55

54

53

52

51

50

49

48

47

46

45

44

43

42

41

40

Defend Count Down

Time allotted for the user to reach and defend their artwork before it gets crossed out: 1 hour.

Time to Defend:

58:

59

58

57

56

55

54

53

52

51

50

49

48

47

46

45

44

43

42

41

40

Defend Count Down

Time allotted for the user to reach and defend their artwork before it gets crossed out: 1 hour.

Time to Defend:

58:

59

58

57

56

55

54

53

52

51

50

49

48

47

46

45

44

43

42

41

40

Defend Count Down

Time allotted for the user to reach and defend their artwork before it gets crossed out: 1 hour.

Home Screens

It offers users a quick overview of their in-app activities, including “Respect” points, challenges, and notifications. Users can track artworks placed, defended, and crossed, as well as monitor progress on ongoing challenges to stay engaged.

Map Screens

It guides users in discovering and claiming virtual territories in real-world settings. Users explore a city map, spot artworks, and claim unoccupied areas with step-by-step prompts for mapping and art placement. The intuitive interface and real-time feedback make exploring, creating, and defending art engaging and seamless.