Trace Design

An Interactive Design Ecosystem for Urban Exploration

No items found.

about:

“TRACE” is a non-commercial, multi-platform design ecosystem that offers a unique interactive experience to explore Toronto's creative side.

My Role:

Design, Photography, AI Front-End Dev

Project Highlights

Interactive Map

Responsive Design

Vibe Coding

Overview

OBJECTIVES : WHAT?

  • A responsive, interactive web map with 4 distinct creative routes with a minimum of 15 “hidden gems” (ghost signs, brutalist architecture, street art, art objects).
  • TRACE zine with a physical map to bridge the digital & print gap, and validate the brand’s presence in the real world.

GOALS : WHY?

  • Cultural tourism enhancement by attracting visitors interested in architecture, typography, and contemporary urban art rather than traditional attractions.
  • Sustainable, walkable city exploration promotion rather than mass tourism.
  • Urban art documentation, such as ghost signs and temporary artworks, in order to contribute to the city’s visual memory.

Trace Design

: Research

Phase 1: Discovery & Documentation

  • Field research across the Annex, Yorkville, and the Financial District.
  • 154 high-resolution original photographs captured to document 62 "Hidden Gems."

Phase 2: Project Tools & Setup

  • Map builders from a custom Google Map to Felt, Atlas & Mapbox
  • Front-End Development tools & platforms from Webflow to Claude Code & Antigrsvity

Mapbox for custom map design turned out to be the most flexible and affordable tool. The gathered data were organized in GeoJSON tables with descriptions, image links, interesting facts, and coordinates. All this allowed me to design every piece of the TRACE map — from the spots icons to the routes and map interactions.

User persona

Who needs TRACE?

TORONTO CREATIVES

Designers, photographers, visual thinkers. Already know the city, but want structure, challenges, and rewards, fresh inspiration outside of their studios

TOURISTS

Domestic and International Look for more than the top 10 attractions, interested in culture, visuals, and authentic, visually rich urban experiences

STUDENTS & EDUCATORS

Design, art, architecture, urban studies. Need a playful way to teach visual literacy, design observation, and urban analysis outside the classroom

Positioning & Strategy

The Challenge

Standard tourist maps & guides focus on consumption (food, shopping) and Top-10 attractions (CN Tower, Ripley’s). For designers, photographers, architects, curious tourists, and even locals, that’s not enough. But there is no useful resource that would gather, categorize, and map the city’s hidden gems.

What if...

We create a responsive, data-driven interactive map that functions as both a professional design archive and a gamified exploration tool?

Trace Design

: Design Process

Rough Sketches

No items found.

Style Guide

How to build a style guide for both humans & robots?

The Challenge

TRACE is a vibe coding project. That means that AI will need to follow all my creative decisions! That is where it usually fails — AI-generated websites look nice from the first glance, but have bad UX and many design violatons in real use.

Solution

All creative decisions should be documented in the AI-language—Markdown files. The human design is still first and foremost, AI is just an execution tool.

Mid-Fidelity Prototype

No items found.

Usability Testing Results

Scope
  • 9 participants
  • College design students, 2 immigrants, 20-40 years old
Test targets
  • Text the map home page — when users directly see it instead of a landing page
  • Route buttons on the right side of the screen
Results:

About Page and Welcome Message

  • 2/3 participants mentioned that they felt lost on the home page with the map, and would like to have some explanation

Route Buttons

  • Most of the participants found the placement of the buttons convenient, but were confused by the interaction logic
Plans before High Fidelity
  • Add the About page and the Quick Guide modal
  • Refine the interactions of the route buttons

Trace Mobile Website

A whatsapp icon
Try the Figma Prototype!
No items found.

Trace Design

in Toronto!

A whatsapp icon
See it Live!

Trace Desktop Website

No items found.
No items found.

Trace Mobile Website

No items found.
No items found.

Results & Future Plans

Achievements:

TRACE is more than a map; it is a design system for the city.

  • 62 Verified Locations mapped with high precision
  • Custom map and routes built in Mapbox with GeoJSON files to organize all information
  • 100% Original Photography and designer-led descriptions
  • Live Platform:  built with Antigravity, fully deployed and maintained via GitHub

Future Plans:

  • Backend & CMS system design & development
  • Your TRACE — users' database with profiles and progress tracking, reward & gamification
  • Marketing Campaign — social media presence & partnership
  • Blog page with articles from zine and social media content
  • Dark mode photos captured at night

Please, briefly share the highlights of your project:

- Is it for print or web?
- What is the deadline?
- What do you expect from our collaboration?

and anything else you see as important!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.