Character 01Idle Loop
An augmented reality prenatal experience that transforms emotional connection between expectant parents and their baby — through an interactive AR night sky, progressive storytelling, and a 3D baby model.
Capstone Prototype · UBC MDM 2025
00 — Overview
01 — Problem
Expectant parents — especially in the first and second trimesters — lack experiences that make the invisible reality of their developing baby feel present. Existing prenatal tools focus on information delivery: weekly statistics, checklists, clinical diagrams. Partners feel peripheral to a journey they cannot physically experience, and that engagement gap is rarely acknowledged. Prenatal bonding is not automatic — it is cultivated through repeated, intentional engagement. BabySteps responds with three design stances:
Emotional accompaniment
over information delivery. Parents witness growth as a living visual world, not a fact card.
Ritual
over task completion. No streaks, no metrics, no guilt for missing a day.
Shared participation
over solitary use. Every feature includes the partner, from the very first week.
02 — My Role
Art Direction
Defined the visual language — colour palette, star character design, and the emotional tone that carries through every scene.
2D Animation
Created all Procreate + frame-by-frame animations: idle loops, stage transitions, environmental effects, and character moments.
Asset Production
Exported and optimised every animation asset for Unity AR integration — working directly with the dev team on format and timing.
03 — Research
I wanted to help — I just didn't know what to do, or when. It felt like standing on the sidelines.
Interview — First-time father, 30
Mixed emotions
Joy, worry, strength, and anxiety coexist through pregnancy — often in the same week.
Fathers feel sidelined
Excluded and unsure of their role; their only support today is informal — friends, online content, AI.
Context shapes the bond
Planned vs. unplanned, finances, and access to care all shape attachment and confidence.
Connection is sensory
Heartbeat, movement, touch, and voice build the bond — for the whole family, not just the mother.
Development milestones that anchor stage-based interaction:
15–18 Weeks
Hearing begins
Talk to the baby, play music
20–24 Weeks
Responds to touch & voice
Belly touch, read stories
25+ Weeks
Hearing fully functional
Music, voice recordings
Third Trimester
Senses light & taste
Light play, food moments
04 — Ideation
05 — Pivot
Constellations as fetal milestones. Clients felt it tied the app to astrology & mysticism
After Effects for animation workflow. Mismatched with our painterly art direction
Story-based AR night sky. Warmth and wonder, no zodiac associations
Hand-drawn frame-by-frame in Procreate. Matched the storybook feel perfectly
No baby-related illustrations in the AR sky. Abstract warmth over literal imagery
06 — Moodboard
The visual direction is inspired by a storybook aesthetic, where textures and brush strokes remain visible, creating a sense of warmth, tactility, and hand-crafted intimacy. Motion is suggested through painterly strokes and elongated shapes, particularly in the depiction of comets and falling stars.
Source from Pinterest
07 — Visual Style
The night sky is treated as an emotional space. Deep blues, soft purples, and muted blacks form the base, while glowing yellow and whites introduce moments of warmth and focus. Light is used as a central storytelling element — bright glowing forms guide attention and evoke wonder.
Envisioning the Placement of an Asset in the Night Sky
08 — Story Making
With the constellation concept behind us, we built a layered AR narrative — the night sky becomes a living storybook that grows alongside the pregnancy. Each AR scene is composed of three depth layers that stack to form a complete environment.
AR layer system: Default assets → Depth of stars → Story
09 — Art Assets
All 2D assets were created from scratch using a three-stage pipeline — from hand-drawn illustration to Unity-ready PNG sequences.
Procreate
Hand-draw + animate frame by frame
Photoshop
Composite layers, color grade, export
PNG Sequence
Frame-by-frame PNGs → Unity AR
Heart Beat
Night Sky
10 — Leading Production
With 30+ assets moving through the pipeline, production needed a system — and the team needed to be able to produce without me becoming a bottleneck. I ran the asset tracker and onboarded teammates into the animation workflow directly.
One source of truth for 30+ assets
Every asset was tracked by format (flat / motion), where it appears (storytelling / night sky), assignee (me, another member, or client-provided), status, and the narrative phase it belongs to (S1–S6). At any point, anyone on the team could see what was done, what was in progress, and what was blocking Unity integration.
Teaching the workflow, not just handing off files
When another member joined asset production, I recorded a walkthrough video breaking my animation process into clear, repeatable steps — from frame-by-frame drawing in Procreate to export settings Unity expects. The member went on to deliver assets like the Bone, Planet Earth, and Nebula Mist independently, in a style consistent with mine.
11 — Showcase
A compact asset gallery with category switching, uniform frames, and a dedicated ordered stage progression.
12 — Team Decisions
Concept Merge
We evaluated 3 directions. No single concept was enough. We merged Constellation (AR immersion) + Scrapbook (personal memory) into the Night Sky experience—creating something more powerful than either alone.
Partner-First Constraint
Client feedback mid-sprint: AR and partner engagement must be core, not add-ons. Every feature now requires a Partner View. This constraint forced us to think inclusively from the start.
Scope Protection
Explicitly cut 6 features to protect 12-week delivery: medical monitoring, social sharing, user login, 3D animation rigging. Quality over quantity—we shipped something polished rather than something rushed.
13 — User Test
Round 1 — Internal User Test
What we found
How we responded
Round 2 — External User Test
What we found
How we responded
14 — Testing Results
Emotional Connection
Daily Engagement
Anxiety Reduction
Task Completion
Usability Score
Design Iterations
15 — Timeline
Phase 01 — Weeks 1–2
User interviews with expectant parents, competitive analysis of existing pregnancy apps, and definition of the core emotional problem space.
DiscoveryPhase 02 — Weeks 3–5
Low-fidelity wireframes tested with 12 participants. AR anchoring and night sky environment explored in RealityKit and Unity AR Foundation.
Design + PrototypePhase 03 — Weeks 6–7
Night sky AR scene shipped as the core MVP. Onboarding flow and due-date setup integrated. Internal alpha tested with 18 users.
Sprint 01–02Phase 04 — Weeks 8–9
3D baby model integrated with week-based progression. Daily task system built and connected to the journey map. Feedback incorporated from first alpha.
Sprint 03Phase 05 — Weeks 10–11
Full user journey connected end-to-end. Push notifications for daily tasks. Wider beta with 107 users across two cohorts.
Sprint 04Phase 06 — Week 12
Animation polish, performance optimisation, and full design handoff package delivered to the Tandem engineering team.
Handoff16 — Tools
Figma
Unity
Xcode
ARKit
Notion
Procreate
17 — Handoff
A complete handoff package was delivered to the Tandem engineering team — ready for production.
Figma Design
2D Animations
Unity AR Project
Component Library
User Testing
Product Roadmap
18 — Features
Users anchor a dynamic AR night sky in their physical space. Stars, clouds, and ambient elements fill the room as the story begins to unfold around them.
An interactive 3D model of the baby evolves alongside each development stage. Parents can rotate, zoom, and explore the model in AR.
A structured journey maps out the pregnancy from week 1 to birth. Each day presents a small task that deepens the bond.
19 — Demo
The Stage 1 AR story within a realistic mobile device frame — as it appears in-hand.
20 — Reflection
Looking back over the past twelve weeks, this project taught me much more than how to design an AR experience. It showed me what it feels like to build a product as part of a multidisciplinary team, where every decision, asset, and iteration contributes to a much larger system.
From designer to product creator
As the project progressed, I gradually became responsible for most of the visual production — the storybook illustrations, night sky assets, animations, and documentation. Creating assets is only one part of the process; equally important is organizing them, communicating with developers, and ensuring they can be integrated smoothly into the final experience.
Iterating with feedback
We constantly iterated based on client feedback and user testing. Many ideas evolved over time, and some had to be completely reworked. Rather than seeing feedback as criticism, I learned to treat it as part of the design process — every iteration brought us closer to a clearer and more meaningful experience.
The team behind it
Despite tight deadlines and occasional setbacks, we maintained open communication and supported one another throughout. Small moments outside of work — sharing meals, going bowling, or simply talking during breaks — helped build trust and made collaboration much more enjoyable. Successful projects are built not only through good design, but through strong relationships.
Going forward
This project has strengthened my confidence in visual storytelling, production planning, and cross-disciplinary collaboration. More importantly, it has changed the way I approach design — I now think beyond individual screens or assets, and instead focus on designing complete experiences that connect storytelling, interaction, and emotion.
21 — Team
