T1 TimeStream
Overview
T1 TimeStream is an augmented reality experience created for the Port of Vancouver's Terminal 1, highlighting the historical stories embedded along the Rotary Walk at Vancouver, Washington's Waterfront. As part of a three-person Web team and in collaboration with a four-person AR UI team, I designed how visitors first encounter these stories on the web and transition into the AR experience on-site. The challenge was to balance narrative immersion with clarity, reducing cognitive load while guiding visitors across physical and digital touchpoints. I approached this through modular content blocks, a guided AR bridge page, and persistent spatial cues, turning passive site visits into a structured yet personal exploration of heritage and place.
Constraints
The experience is primarily accessed on-site through mobile devices, requiring clarity and usability on small screens. In addition, many visitors are first-time AR users with no prior onboarding, requiring the interface to guide interaction patterns without external instruction.
Goals
- Make it easier for visitors to browse and compare stories on the website before entering the AR experience.
- Reduce hesitation when transitioning from web browsing into AR launch.
- Keep users oriented on-site by reinforcing location cues within the interface.
Insights
- During early development, the Web team found that the site had a large amount of content that was difficult for visitors to scan at a glance, causing hesitation before selecting a story. We restructured the content into color-coded visual modules, which clarified the key information for each story, reduced friction, and improved scannability.
- Within the Web team, we discussed how first-time AR users often hesitate before launching the experience. To ease that transition, we decided to introduce a short bridge page that reduces uncertainty and builds entry confidence before AR launch.
- To support spatial orientation between AR and the web, I designed two complementary location cues with my team. The AR UI team created a map button inside the AR view that lets users open a map to see where each marker is located and the story it represents. I designed a dedicated map section on the website that gives an overview of every marker and its corresponding story name, so users can plan or review their walk at a glance.
Information Architecture
AR Interaction Flow
The flow was structured to minimize entry hesitation, prevent dead ends, and support both AR and non-AR access paths. I created this flow chart after the team completed the project, specifically for this case study, to map out how users move through the experience.
Sitemap
This is the sitemap I designed with my Web team for the overall website architecture, intended to support content browsing beyond the AR experience.
Wireframe
Modular Layout
Working within the Web team, I designed a modular card system across the landing page, AR bridge, and conservation data pages to make content easier to scan and stories easier to choose.
Bridge
A contextual bridge page prepared users for AR interaction and required device permissions before launch.
Spatial Orientation Solution
Two complementary location cues work together to reinforce on-site orientation: an AR map button that opens a detailed view of each marker's location and story, and a website map section that provides the name of all markers.
Outcome
T1 TimeStream is designed primarily for on-site mobile use, with a responsive layout that extends across mobile, tablet, and desktop. The prototypes below were designed and built by me as part of the Web team, showing three views of the final experience: Full Experience, Browse to AR Entry, and On-site Orientation.
- Full Experience: A quick scroll through the entire mobile website, previewing each section and the bridge page without launching AR.
- Browse to AR Entry: Modular story cards flow directly into a contextual bridge page, reducing hesitation before AR launch.
- On-site Orientation: A dedicated map section on the website and an AR map button work together to keep users oriented throughout the walk.
Desktop Version
Reflection
Looking back, both the Web team and the UI team put significant effort into this project. It was our first time working on an AR experience. To make the website and AR work together effectively, we focused on three strategies to shorten the time it takes for users to become familiar with T1 TimeStream: modular information scanning, a bridge page, and spatial orientation cues. Revisiting the work for this case study, I still feel these were the right calls.
Within our design timeline, wireframing took up the majority of the Web team's time, which left less time than ideal for development. Through this experience, I came to understand that wireframing and front-end development are not sequential but complementary. Code should enter the workflow earlier, because wireframes often reveal new problems only once they are implemented, and good outcomes come from iterating between the two. Additionally, our Web team designed mobile, desktop, and tablet versions in Figma. In hindsight, the tablet version could have been skipped. Its layout could have been checked during code testing, and only if necessary, returned to Figma for a dedicated wireframe.