The research was solid. The format kept families out.
Research on Adverse and Positive Childhood Experiences usually reaches people as reports, clinical frameworks and long educational material written for healthcare professionals. For families, especially in rural communities, that creates two barriers.
Information overload. Long, text heavy explanations are hard to engage with in day to day life. Low retention. Passive reading rarely turns into real behavior change.
And the audience had hard limits. Attention on a single screen has dropped below a minute, and parts of rural New York still have little or no broadband.
The challenge wasn't simplifying the content. It was making it feel natural and low effort, while keeping a medical institution's credibility.
From a list of recommendations to a garden you build.
Rather than presenting resilience as a list of recommendations, I led the team in reframing the experience around participatory learning. Families don't read about what helps a child. They build it.
The garden metaphor had three jobs: make abstract concepts tangible, invite exploration instead of passive reading, and create emotional engagement through visual storytelling. Growth is already how people talk about raising a child, so it carried those jobs without explanation.
Reading about resilience became building it.
Every garden already has rocks.
The research covers hard experiences too. Leaving them out would have been gentler, and less honest to families who live with them.
So the garden starts with rocks. Each rock is an adverse experience, like household dysfunction or neglect, and tapping it explains what it means. The tool opens with one question: "Everyone has rocks in their gardens, but what else do you have?" Families build around the rocks instead of being judged by them.
Tapping a rock explains the hard experience it stands for, without blame.
It started on paper.
Before any screens, I sketched the core structure for web and mobile: the garden at the center, an inventory of positive experiences beside or below it, and a clear path to the assessment and resource library.
Even the first hover state had a read aloud button on each rock. Not every family wants to read, so listening was designed in from the start.
First sketches: web layout, welcome page, mobile structure and the rock hover state. Tap to enlarge.
Try it for yourself.
The whole experience runs on one loop a family learns in seconds: pick an item, place it in the garden, and read what it stands for. Each placement turns an abstract idea into something you can see.
Below is a 3D version of the garden so you can see how it feels. Add items, tap the rocks, and drag to turn it.
- 1Plant something. Tap any item in the PCEs panel.
- 2Learn what it means. Tap a rock or a planted item.
- 3Look around. Drag the garden to turn it.
PCEs
Item details
Tap an item or a rock to learn what it stands for.
A 3D take on the shipped garden, designed and coded by me in Three.js.
Where the inventory lives decided whether people used it.
We tested different inventory bar placements to see which matched user expectations and felt comfortable to use: a vertical rail beside the garden, a grid underneath it, and a panel to the left, across desktop and mobile.
The final design puts the inventory in a panel beside the garden, with item details directly below it. The choice and its explanation sit together, so nobody has to hunt for what just happened.
Round one: inventory placements across desktop and mobile. Tap to enlarge.
Rural families needed context before they'd play.
Further explorations showed that more context around the topic and the inventory objects would better support rural users unfamiliar with the subject. A garden with no explanation felt like a game with no rules.
So the shipped version opens with a short welcome and three plain steps, Interact, Learn and Grow, before the garden. The flat lawn also became a richer scene with a home, so it reads as a family's own space.
Round two: more context up front, and a garden that feels like home.
Warm enough for families. Credible enough for a medical center.
URMC's brand is built on clinical blues and white. Blue reads sterile, the opposite of a warm evening in someone's backyard. I anchored the tool in greens and warm neutrals, colors that read as garden and growth, and kept the brand as a trust marker in the header and footer.
The new palette wasn't a break from the brand. It keeps a deep navy close to URMC's dark blue, softens its bright yellow into mustard, and adds two greens and a linen ground for the garden.
URMC brand
Growing Resilience
From the brand guide to the garden.
The same card in each palette, using the real hex values.
The trade-offs, and why I made them.
Photoreal felt too heavy for mobile load times and risked looking dated fast. Fully symbolic, more icon than garden, felt cold and lost the warmth that was the whole point. Illustrated but warm read instantly as a garden to someone with low context, and stayed light on a spotty connection.
Removing hard experiences would have been gentler and less honest. Keeping them, and asking what else you can add, kept the tool truthful without shaming anyone.
Item details stay short enough for a one minute session. A structured glossary holds the depth for anyone who wants it, without interrupting the main experience.
Clinical language needed simplifying, but oversimplifying risked losing credibility. Microcopy went through several rounds of tightening with the client, a real negotiation between accessible and medically credible.
Layouts, spacing and touch targets were sized for small screens first, for families who mostly rely on their phones.
Leading the work, not just the screens.
I guided the exploration of the garden metaphor with the team, working through multiple visual directions together: lush and playful, minimal and symbolic, and everything in between. I led the sketching of layout options and directed the design system strategy.
I worked closely with a graphic designer who brought the illustrations to life from my direction on style, tone and visual consistency. We were a team of four. I reviewed the work with our PM and URMC stakeholders, and the job was holding two goals at once: approachable for families, credible for a medical institution.
What shipped.
The shipped experience covers 12 positive childhood experience categories, each translated from dense clinical research into interactive, family friendly content. The prototype was handed off to URMC and published on the Recovery Center of Excellence platform. The client said the interaction design exceeded their expectations.
It was the first time URMC's childhood resilience research reached everyday families as something interactive, moving public health education out of clinical reports and into people's hands.
The shipped home and the glossary of all twelve experiences. Tap to enlarge.
Room to bloom.
My biggest reflection is cohesion. The garden achieved what we set out to: warm, engaging and approachable. But the website around it stayed bound by institutional conventions, and the tonal shift between the two is jarring. With full creative freedom, I'd extend the garden's warmth, illustration style and palette across the whole experience, so families never feel they've stepped back into a clinic.
Good health education shouldn't feel like a government form.
The platform was handed off after our engagement, and I don't have post launch usage data. Running it again, I'd push for structured usability testing with real caregivers before handoff, to sit alongside the strong stakeholder feedback we received.
Keep exploring
