Interactive animated app design

Ronald McDonald House Charities Ireland were building a new 53-bedroom Ronald McDonald House for families whose children would be inpatients at the New Children’s Hospital. They needed a website to support fundraising for the project and encourage donations toward the build.

Western Webs were developing the website in partnership with RMHC and brought me on as the sole designer. The brief was to create a website that incorporated Barróg, a rabbit character created for the campaign, and his story into the fundraising experience.

Rather than treating the story as a decorative layer, I wanted to explore whether it could become part of the donation journey itself.

I researched similar fundraising websites, charity campaigns, and story-led websites that used illustration, animation, or interactive elements.

The goal was to understand:

• how charity websites explained fundraising goals
• how donation pages encouraged action
• how illustrated or character-led experiences created emotional engagement
• how interactive animation could support, rather than distract from, the user journey

A key takeaway was that many fundraising experiences were clear and functional, but often felt transactional. They asked users to donate, but did not always make the impact of that donation feel immediate or visible.

This helped shape the direction of the project: the experience should not simply tell users that their donation mattered. It should show them.

The campaign was built around a children’s story created for the project. It featured Barróg, a rabbit whose name comes from the Irish word for “hug”.

In the story, Barróg travels to Dublin to help build the new Ronald McDonald House. Along the way, he discovers the long-lost Yellow Brick Road and decides to use the bricks to help build the house.

That story created the foundation for the user journey.

The donation experience could become a simple, visual metaphor:

Buy a brick → help Barróg collect it → complete the donation → see the house being built.

This gave the donation journey a clearer emotional arc and helped connect the user’s action to the wider fundraising goal.

Because the experience depended heavily on animation and interaction, I needed to understand what was technically possible before finalising the design.

I researched Lottie, Airbnb’s animation library, which allows After Effects animations to be exported as vector JSON files and rendered in the browser. This was important because the animations needed to feel playful and interactive without creating a heavy or slow experience.

I also researched how Lottie animations could be controlled through JavaScript, allowing user actions to trigger specific animation states rather than simply playing a video from start to finish.

This feasibility research shaped the design direction. It meant the animations could behave like part of the interface:

• waiting in idle loops
• responding to button clicks
• progressing to the next state
• reinforcing completion after donation

I stayed in close communication with the development team throughout this phase to make sure the interaction concept was realistic to build.

I designed the experience around three key moments:

To make the animations behave like part of the interface, I planned each one as a series of controlled states rather than a simple video.

The animations included:

• an intro state to introduce Barróg and the task
• an idle loop while waiting for user action
• an interaction state triggered by the user
• a continuation prompt to guide the next step
• a completion state to reinforce the outcome

This planning was important because it shaped both the user flow and the animation production process.

The animation logic was controlled through JavaScript functions triggered by buttons and specific points in the Lottie timeline. That allowed the animation to respond to user input while still staying predictable and easy to implement.

Before creating the final animations, I created low-fidelity wireframes and prototypes to map the journey and test the interaction logic.

This helped me explore:

• how users would move from story to donation
• where calls to action should appear
• how much instruction was needed
• how animation could support the flow without becoming confusing
• how the donation journey would work across key pages

This step was important because the final animations would be time-consuming to produce. The interaction model needed to be validated before moving into high-fidelity design and animation.

I created clickable prototypes for the pages that used interactive animation. I also built low-fidelity animation prototypes using HTML, CSS, JavaScript, After Effects, and Lottie to test how the interactions would work in practice.

The prototypes helped test:

• whether users understood the “Buy a Brick” concept
• whether the animation responses were clear
• whether users knew what to do next
• whether the timing of prompts and transitions felt natural

Final delivery included both design assets and technical implementation guidance.

Because the experience depended heavily on animation, it was important that the development team could understand not only what the screens looked like, but how the interactions should behave.

Deliverables included:

• high-fidelity annotated wireframes
• responsive screen designs
• style guide and design system elements
• Lottie JSON animation files
• HTML and JavaScript demos
• implementation notes for animation behaviour
• downloadable assets for development

I created the final animations in After Effects and exported them using Bodymovin as Lottie JSON files. These could then be embedded into the website and controlled through JavaScript.

I also provided demo files so the development team could view and interact with the animations in context. This helped reduce ambiguity around how the animations should loop, respond to user input, and transition between states.

For the homepage, I recreated Barróg as simplified vector shape layers in After Effects so the animation could export cleanly to Lottie.

The animation showed Barróg walking along the Yellow Brick Road, pulling his red cart, and responding when the user clicked Buy a Brick.

When the interaction was triggered, bricks were added to the cart and Barróg celebrated, reinforcing the user’s action before they continued to the donation form.

For the donation page, Barróg appeared in a construction hat, helping connect the form to the idea of drawing up plans for the house.

Subtle looping animation kept the page feeling alive without distracting from the donation form. The goal was to support the story while keeping the user focused on completing the donation.

The thank-you page animation showed the user’s donation being put to work.

Barróg places bricks as the house is built, with the animation ending on a positive, celebratory note.

This gave the user a stronger sense of completion and helped turn the confirmation page into part of the emotional journey, rather than just a receipt.