A mobile AR experience that introduces card benefits through character-guided storytelling on a floating island, accessed via QR code with no app download required.
This project was made possible through DCGONE, Siegel+Gale, and Aircards.
This immersive browser-based augmented reality experience reimagines how cardmembers explore their benefits. Designed in partnership with global teams, the project leverages QR-triggered AR to launch an interactive floating island populated by characters who guide users through key benefits. Created without an app download, it prioritizes ease of access and engaging design for mobile audiences.
Cardmembers often struggle to fully understand and engage with the breadth of benefits available to them. Existing explanations lack clarity, interactivity, and emotional connection—especially on mobile platforms.
We proposed a new storytelling approach using augmented reality to bring benefits to life. By assigning each benefit a character stationed at a corresponding building—airport, hotel, restaurant, home—we created a world where users could explore at their own pace. Without initial content or clear narrative, we took initiative to define the experience, develop character names and personalities, and design a floating island concept that reinforced the idea of a magical, self-contained “world of benefits.”
0
1
01 of 13
Hand-drawn sketches helped communicate direction in early stages.
Initial concepts were expressed through hand-drawn sketches—low fidelity, but high in intent. These visuals helped clarify ideas across teams and gave form to a project that initially lacked structure or direction
Hand-drawn sketches helped communicate direction in early stages.
0
2
02 of 13
Translating broad AR concepts into something interactive and real.
We collaborated closely with the design team at Siegel+Gale, who initially pitched the AR concept. Our team translated their broad vision into an interactive, narrative-driven experience. We also partnered with Aircards for technical AR implementation using 8th Wall
Translating broad AR concepts into something interactive and real.
0
3
03 of 13
A floating island inside a warp portal to take advantage of people not normally having access to AR experiences.
To capture the enchantment of AR, we pitched a magic floating island vibe that becomes visible through a warp portal.
A floating island inside a warp portal to take advantage of people not normally having access to AR experiences.
0
4
04 of 13
The experience begins with a QR code and unfolds through camera permissions.
Cardmembers receive a box in the mail. Inside, a card with a QR code invites them to scan with their phone. Upon scanning, a loading screen with a visual of a floating island appears. Before beginning, users must accept camera and motion permissions. Once granted, a warp portal opens, revealing the magical floating island hovering over the clouds—beginning the journey through their benefits.
The experience begins with a QR code and unfolds through camera permissions.
0
5
05 of 13
Faced with delays, I created structure with a narrative-led design approach.
With content delayed for weeks, I took initiative to move the project forward. I mapped the four benefit categories—travel, hotel, dining, lifestyle—to matching buildings on the floating island. To bring it to life, I named characters in line with the brand’s refined tone—like Miles at the airport (a nod to the air miles program) and Sebastian at the hotel, evoking a polished concierge. Using ElevenLabs, I gave each one a distinct voice to match their persona. This narrative foundation became the creative structure for the entire experience.
Faced with delays, I created structure with a narrative-led design approach.
0
6
06 of 13
Solving usability with a fixed neutral cursor—one-handed, intuitive.
I think this app might be the first of its kind to use a kind of target cursor. What didn’t sit right with me was that while the camera and gyroscope added a cool layer of immersion, they also made the experience more physically demanding—forcing users to hold their phones up and stay fully engaged the whole time. It reminded me of how people started using Wii controllers: at first it was all-in, but eventually most just flicked their wrists to get through it. So I came up with an idea to simplify things—a neutral cursor fixed at the center of the screen. When it hovers over an interactive element, the cursor responds and a call-to-action appears, letting users move in and out of different areas of the experience using just one hand. It’s a very Fitts’s Law approach—minimizing movement, maximizing ease.
Solving usability with a fixed neutral cursor—one-handed, intuitive.
0
7
07 of 13
Midjourney helped visualize tone and guide aesthetic direction to translate 2D to intentional 3D conversion.
Although I don’t work in 3D directly, I sketched rough layouts to communicate my vision, using Midjourney to enhance the aesthetic quality and tone. This guided the visual direction of the island, characters, and interface, ensuring everything aligned with the brand’s premium and imaginative feel.
Midjourney helped visualize tone and guide aesthetic direction to translate 2D to intentional 3D conversion.
0
8
08 of 13
A modal pattern ensured a consistent structure across interactions.
This diagram shows what happens when a user taps on a character—like Sophia. A modal appears in AR, offering a high-level overview of card benefits. If they want more details, a CTA links to a full landing page in the browser. This flow is consistent across all characters and card tiers.
A modal pattern ensured a consistent structure across interactions.
0
9
09 of 13
Earlier versions featured more environmental detail and complexity.
Early diagrams showed the floating island with a more complex boulder base—later reduced to refocus the viewer’s attention on the interactive world above
Earlier versions featured more environmental detail and complexity.
0
10
10 of 13
Amelia guides the user—a soft narrative touch inspired by folklore.
Inspired by the mystery of Amelia Earhart, Amelia serves as the island’s tour guide—a playful nod to a parallel universe where she reappears to lead users through this floating world. Her flow shows how she welcomes users, introduces each building and character, and sets the tone for the entire AR experience.
Amelia guides the user—a soft narrative touch inspired by folklore.
0
11
11 of 13
Mapped all content types across tiers for consistency and approvals.
With three card tiers—Green, Gold, and Platinum—each having unique benefits, we built a matrix mapping all content to ensure legal approval. While benefits varied, characters and flow remained consistent for ease of reuse
Mapped all content types across tiers for consistency and approvals.
0
12
12 of 13
A system of 2D and 3D elements guided consistent AR design.
The design system combined 3D and 2D visual elements that worked seamlessly within AR. Our pattern library documented the styles, interface components, animations, and textures used, ensuring consistency and technical feasibility
A system of 2D and 3D elements guided consistent AR design.
Naming and designing characters added a creative layer that shaped the entire narrative. What started as a content wait turned into an opportunity to create a fun, emotionally resonant journey. This project combined technical and design challenges into a major milestone for me—blending storytelling, UX, and AR into a cohesive experience.
A visually engaging browser-based AR experience that introduced benefit education in a playful, interactive format. Users could explore and learn directly from characters representing card benefits, creating stronger emotional engagement without requiring an app.
This project became a landmark moment in how augmented reality can be used for mobile, browser-based storytelling. Winning a Silver Award from the W3 Awards validated the creative risk and technical ambition behind the work. More importantly, it led to new partnerships, including a follow-up AR experience for Sounders Park. What started as a stalled brief turned into a signature achievement—establishing our team as a go-to partner for innovative, high-impact experiences within the [leading financial institution]'s ecosystem
This was the most challenging project I’ve worked on so far—and also the most rewarding. From the wide range of tools and technologies to the level of detail in every deliverable, it pushed me to use every part of my creative and strategic thinking. I built out the technical storyboard while shaping a visual design system that could also stand on its own as a case study. It took full focus and flexibility. Finishing it felt like a major personal milestone—everything wrapped at the right time, and I was able to hand it off to the team and take a much-needed break. I celebrated by traveling to Tokyo for the second time.
© 2025 Site designed by Ninyo. All Rights Reserved. Site created using mobile-first code approach, designed in Figma, coded using intermingled HTML inside PHP (both for front-end and back-end), Sass, and Javascript.