Back to work

Rediscovering
the West End

Web Design

"Rediscovering the West End: A Walk Down Memory Lane" combines personal reflections with visual data storytelling. Through interactive maps, images, and data visualizations, I designed a webpage that traces a route through community memory and neighbourhood identity in Vancouver.

Type
Solo Project
Duration
4 Weeks
Tools
Figma
Role
User Research  ·  Prototyping  ·  Usability Testing
Rediscovering the West End

Overview

Context

This project explores how digital experiences can capture memory, place, and personal meaning. I focused on Vancouver's West End — a neighbourhood tied to routines, movement, and everyday moments.

The goal was not just to present locations, but to design a narrative that unfolds as users move through the page, blending interactive maps, personal data, and visual hierarchy into a cohesive storytelling experience.

The Challenge

How do you design memory?

Community memory is intangible — it lives in repeated visits, familiar routes, and small moments. The challenge was translating this into a structured digital experience that still felt personal and emotionally resonant.

01
Memory is Non-Linear
  • Experiences don't follow a strict order
  • The page needed to feel like a walk, not a list
02
Data Needs Context
  • Raw location data isn't meaningful alone
  • Visualizations needed narrative framing
03
Balancing Story + Structure
  • Too much text loses the visual impact
  • Too many visuals lose the personal voice

Process

Mapping before designing

I began by mapping out key locations in the West End and the emotions associated with each one — Stanley Park, Cadero's Restaurant, English Bay, and Sunset Beach. From there, I translated those moments into visual structure, focusing on pacing, hierarchy, and narrative flow.

Each section of the page was designed to mirror a different part of the walk: arrival, exploration, memory, and reflection.

Design Direction

How might we design a webpage that makes visitors feel the rhythm of a neighbourhood — not just see it?

Sketches & Wireframes

Low-fidelity before high-fidelity

I started with hand-drawn sketches to explore the page structure, mapping out how the intro, story map, and data visualization sections would flow. These rough sketches were then translated into digital wireframes in Figma, allowing me to test layout decisions before committing to visual design.

Key decisions at this stage included the placement of the interactive story map, how data visualizations would be paired with narrative text, and the overall scrolling rhythm of the page.

Hand-drawn sketches
Digital wireframes

Final Design

The finished experience

The final webpage brings together the story map, data visualizations, and personal narrative into a cohesive scrolling experience. Each section is designed to feel like a distinct moment in the walk — anchored by a consistent visual language and the West End's natural colour palette.

Final design screens

Key Design Decisions

What shaped the final outcome

Story Map as the Anchor
  • The interactive map became the centrepiece of the page
  • Location pins connect to narrative text for each stop
  • Creates a sense of physical movement through the neighbourhood
Data as Personal Record
  • Visualizations show visit frequency across 2023–2024
  • Data is framed as memory, not just statistics
  • Colour coding ties locations to their emotional weight
Pacing Through Scroll
  • Each section is spaced to slow the reader down
  • Alternating text-left and image-right layouts create visual rhythm
  • Avoids information overload by giving each element room to breathe
Consistent Visual Language
  • Muted blue-green tones drawn from the West End landscape
  • Photography and map tiles use a unified colour treatment
  • Typography hierarchy guides the eye from title to narrative to data

Reflection

What this project taught me

This project pushed me to think about design beyond functionality — asking how a page can carry emotional weight and evoke a sense of place. Translating personal memory into a structured digital experience required a different kind of design thinking than app or product work.

The biggest challenge was resisting the urge to over-explain. The most effective moments in the final design were the ones where the visuals did the talking, and the text simply framed them.

01
Narrative Drives Structure
Deciding on the story first, and letting that shape the layout, produced a much more cohesive result than starting from a grid.
02
Data Needs Emotional Framing
Without context, visit frequency data is just numbers. Pairing it with personal reflection gave it meaning and made it more engaging to read.
03
Restraint is a Design Choice
Knowing when to leave space — visually and narratively — was one of the most important decisions in making the page feel intentional rather than crowded.
Next Project
Duolingo App Redesign