Overview
Growing Resilience is an interactive, gamified web experience developed for the University of Rochester Medical Center’s Recovery Center of Excellence. The project’s goal was to educate rural families about Positive Childhood Experiences (PCEs) as a way to build resilience and mitigate the long-term effects of Adverse Childhood Experiences (ACEs).The final product is a drag-and-drop digital garden, where each object placed represents an activity, environment, or habit that helps children thrive.
Live Prototype
My Role
Lead UI Designer, Strategy, Researcher
The Challenge
Resources on ACEs and PCEs are often dense, clinical, and text-heavy, designed primarily for healthcare providers instead of families. They lack interactive or playful elements that help users retain information, making it easy for families to disengage. As a result, these programs often fail to create the meaningful awareness and behavior change they are intended to spark.
Client Expectations
The client wanted a garden-themed experience that felt approachable, memorable, and educational. They envisioned families actively building their own digital gardens, where each element represented a habit, environment, or activity tied to resilience. The expectations were clear: the tool had to be simple, intuitive, visually inviting, and work seamlessly on mobile devices, which are the primary access point for rural communities.
Design Process
Exploring the garden metaphor
We began by expanding on the client’s garden idea, exploring multiple UI styles and visual directions. I sketched different layouts for how the garden could look—whether lush and playful, minimal and symbolic, or somewhere in between. The challenge was to find the right balance between warmth and credibility, keeping the experience family-friendly without losing its connection to a medical institution.
Wireframing and layouts
Once the concept was aligned, I created low-fidelity wireframes to map the user flow. The design was structured around an inventory bar from which users could pick items (trees, plants, tools, etc.) and place them into their garden. Each placement triggered a short educational pop-up, linking the action to a PCE theme such as emotional support, learning opportunities, or community connection.
Prototyping in Framer
To validate the interaction model, I built drag-and-drop prototypes in Framer. This allowed me to test how users could pick and place items, how responsive the UI felt on mobile, and how feedback (such as object animations or info cards) supported learning. Coding within Framer helped refine details like tap targets, placement logic, and smooth transitions—making the experience intuitive and enjoyable.
Drag-and-Drop action
Visual design
The final UI combined garden-inspired illustrations with a clean, accessible layout. I chose a palette that bridged URMC’s brand colors with warmer tones inspired by nature. Each garden object was custom-illustrated to ensure consistency and neutrality, avoiding cultural bias while still feeling engaging and playful.
Key Features
Drag-and-drop garden building for active participation
Interactive learning cards tied to each garden object
Mobile-first responsive design with large tap targets
Custom illustrations to reinforce the garden metaphor
Seamless brand integration with URMC while maintaining a distinct identity
Outcome
The final prototype successfully delivered on the client’s vision of a garden-based interactive learning tool. Families could actively build resilience concepts into a visual space, making abstract ideas tangible and memorable. The Recovery Center of Excellence praised the design as fun, inviting, and educational, noting that it aligned with their mission while being accessible for their target audience.
