An interactive animated website design to promote user interaction and donations.
Understanding the
Background
Ronald McDonald House Charities Ireland are building a 53 bedroom Ronald McDonald House for families whose children will be inpatients at the New Children’s Hospital. They required a new website to promote funding and gather donations to help fundraise the building of the house.
Western Webs were developing the website in conjuction with RMHC and brought me onboard as the sole designer. The brief was to create a website design that would incorporate a character named Barróg and his background story into the design in order to help create a children’s story around the fundraising for the project.
We needed to create a children’s story centered around fundraising to promote donations to the project.
The part I played
My Role
UI Design
Animation
I came up with the concept of using interactive animations in order to entice users into interacting with the website, and ultimately donating to the cause. I created all animations, researched the best technology to incorporate the animations and allow interactivity within the website, and designed the entire website based on elements provided by RMHC.
Design to Development
My Process
Research
Competitive Benchmarking
I conducted research on similar fundraising websites and also other websites that featured heavily around children’s stories or illustrations.
I had an idea of creating a series of interactive animations of parts of Barróg’s story, where the user could directly interact with the animation and impact what happens next. I researched some websites that used interactive animations to see first of all what they did well and not so well, but also how they created the interactivity within the animations, how they did so without impacting performance and how I could emulate this in order to make my idea feasible for the development team.
Cats & Dogs, an interactive animation website I discovered when conducting competitive research.
I had an idea of creating a series of interactive animations, where the user could directly interact with the animation and impact what happens next.
Research
The Story
Initial design of Barróg by Joanne Kiely
The campaign was built around a children’s story that was written especially for this project. The story featured a rabbit named Barróg (the Irish for “hug”).
Barróg was his way to Dublin, to help build the New Yellow House for The Ronald McDonald House Ireland. On his journey, he come across a misty part of the road that led into the forest. He decided to continue in this direction, convinced that this was a short cut.
Barróg pulled along his Red Flyer cart to carry any bricks that he might come across on the journey. The road was soft and spongey at first as he moved through the trees, and pulling the Red Flyer was a bit of a struggle. Then it started to get much easier. Barróg brushed away some of the foliage, weeds and grasses to see what was making it so easy. He couldn’t believe his eyes when he saw what he revealed! It was the long lost, “Yellow Brick Road”.
Barróg had discovered the old Yellow Brick Road. He had a sensational idea! To take the long-lost Yellow Brick Road and build the Ronald McDonald House with it! The bricks all began to get excited as they wanted to be part of the journey and at last a new place for them all to live AND they would be proud to be part of the house too. Will you help Barróg to move the bricks to the house?
Barróg was designed by Joanne Kiely, and the website design was to use Barróg’s story to entice interest and donations to the project.
Research
Technology
During my research, I discovered the animation library created by Airbnb’s design team Lottie. Lottie allows you to create animations in After Effects and render them in real time as vector JSON files, which does not impact performance or loading times, but also allows for code manipulation and interactivity.
I had planned to create the animations themselves in After Effects, so by using a plugin called Bodymovin, I was able to export the animations as Lottie JSON files, which could be manipulated to allow for interactivity.
I researched how this code could be manipulated to allow a user input to trigger different timestamps within the animation to play, allowing the user to effectively control what happens next in the animation.
I was in constant communication with the development team about feasibility, but I needed to conduct the research into what technology would be suitable for this project, as it would inform the majority of the design of both the animation and the user flow through the website.
Example Lottie animation by Michael B. Myers Jr.
I was in constant communication with the development team about feasibility, as the animation would inform the majority of the design of the website.
Design
Sketches & Planning
Early sketches of website design and animation planning.
A lot of planning was needed to fully figure out how the animations would be presented to the user, and more importantly, how they could be interacted with. I sketched out some initial ideas on the layouts of the website and figured out that the best way for the user to interact would be by, in effect, controlling what portion of the animation was to play.
The animation that would load, would be a full length animation (100%). On page load, the user would be presented with the inital portion of the animation (from 0-371), introducting them to Barróg and the concept of helping him to collect bricks by making a donation and “buying a brick”.
Then there would be a portion of the animation that would loop seamlessly (from frame 371-445), until the user interacted with the animation (i.e. clicked the “Buy a Brick” button).
When the button is clicked, it would trigger the animation to play from 445-618, which showed the user the bricks going into Barróg’s red flyer cart and Barróg thanking the user. The animation would then loop again for the remainder of the animation.
The initial “Buy a Brick” button would then be hidden and a new button would be made visible “Continue”, prompting the user to continue to finishing the donation process.
Similarly, on the donation page, the user would be shown the initial portion of an animation of Barróg in a construction hat, instructing the user of what to do next (frame 0-17), then the animation would loop from 17-57 until the user has finished their donation.
Finally, the user would be redirected to a “Thank You” page, where they would be shown an animation of the bricks building the house, as Barróg looked on happily.
The planning required for all of this was very important, as it would determine a lot of the animation required. The animation would be controlled by JavaScript functions triggered by timestamps within the animation or by user interaction with buttons on the website.
A lot of planning was needed prior to creating the animations to fully figure out how the users would interact with them.
Design
Low-fidelity Wireframes
Before beginning the labour-intensive work of creating each of the animations, I created a series of low-fidelity wireframes and prototypes in Adobe XD. I wanted to create a sense of how the user flows through the site with screenshots representing the animations along the way.
The site was designed to tell a story:
On the Homepage, you meet Barróg, who asks for your help in building “the most important house in the world”. He asks you to help put some bricks into his cart, by buying a brick. This entices user interaction.
When you do so, you see Barróg celebrating and jumping for joy. You are then prompted to continue to the next step of helping Barróg build the house.
Early low-fidelity wireframes in Adobe XD.
Donation page designs made in Adobe XD.
In order to keep to the story of helping Barróg to build the house, we needed to create animations of Barróg throughout the donation process flow.
Once you interact on the homepage, you are brought to the donation page. The page is designed to look like you are drawing up blueprints and house plans, with Barróg wearing a construction hat and prompting you to select your donation amount.
The donation amounts are shown as the amount of bricks you are giving to Barróg to help build the house. This level of interactivity within the overall narrative promotes user interaction and generousity: when you can actively visualise what your donation is doing to help, you tend to give a little more.
The donation form itself was designed to be as simple and streamlined as possible to ensure the user has a quick and prompt process when it comes to filling in the least amount of details necessary to complete their donation.
Positivity and a sense of making a difference was a very important factor in the website design. Barróg served a purpose: helping us understand just how important our donation was. And in doing so, he might entice us to give a little bit more.
After making the donation, the user is brought to a “Thank You” page. Here, they see an animation of the house itself being built, brick-by-brick, as Barróg celebrates nearby.
The whole process has the user add their bricks (donation) to Barróg’s cart, then help him draw up plans for building the house (paying for their donation) and finally, they see their bricks being used to build the house itself (the physical result of their donation in action).
The remainder of the website design was general information about the project itself, the benefits and impact the house has on those who need it most and information about the charity itself.
Thank You page design in Adobe XD.
Positivity and a sense of making a difference was a very important aspect of the design. Barróg served a purpose: helping us understand just how important our donation was.
Prototyping
Clickable Prototypes
I created clickable prototypes for all pages that used an animation for interaction in order to test how the interactivity would work, and see what might need tweaking, before moving on to creating the more polished final versions of the animations.
I created low-fidelty versions of the animations and created quick prototypes where I created the various JavaScript functions that were needed to control the animations throughout the website.
Clickable Prototypes created in Adobe XD, After Effects and using HTML, CSS and JavaScript.
Validation
Validation Testing
I had many iterations of testing the prototypes and tweaking the timings and interaction levels of the animations. I also brought in some sample users to test the logic and understanding levels of the donation process involving the animations and tweaked the design accoriding to the findings. Mostly, the users understood the full process, but there were a few learnings and refining that came about after testing the prototypes.
In particular, on the homepage animation, after the user clicked “Buy a Brick”, we decided to have that button disappear immediately, as some users didn’t move their attention back to the animation to see the prompt for their next step.
By having the button disappear immediately after clicking, signified feedback that the interaction was a success and directed the user’s attention back to the animation, where they were prompted to take the next step in the donation process. Having the “Continue” button appear at this point gave the users the prompt action to move on in the process.
Design
Animation
Shape layers created and composited in After Effects.
The final animations were created in After Effects. I couldn’t use the source file illustration of Barróg, as it used a lot of textures that I couldn’t export to Lottie in After Effects, so I instead copied the original artwork and created a simplified version of Barróg as separate shape layers in After Effects with some basic shading.
I used these shape layers to create a puppet that I could manipluate and create the initial “walking” effect. The first animation involved having Barróg walk towards the camera, along a perspective illustration I created of the yellow brick road.
Barróg was pulling a red cart along with him, which I created as shape layers in After Effects. Finally, the animation involved bricks falling and landing in the red cart when the user interacts. We had Barróg hop (as he is a rabbit) to celebrate when the user helps him.
The user is prompted for action by speech bubbles coming from Barróg and some text instructions along with some direction arrows.
Homepage “Buy a Brick” interactive animation.
The second animation was of Barróg wearing a construction hat, prompting the user to help draw up some plans. Again, the hat was created directly in After Effects using shape layers. These looping animations looked unnatural and static without movement, so a “blinking” effect was added to Barróg’s eyes, his nose was given a “twitching” effect (that rabbits are famous for!) and small rotation movements were added to his ears.
Donation form page “Let’s Draw up the Plans” animation.
The final Barróg animation was for the “Thank You” page where the user is shown a thank you message and they see their donation put to work: Barróg places a brick on the rows of bricks that keep adding until the house is fully built. The roof plonks down from above, a chimney grows up and exhales a plume of smoke in the shape of a heart.
Everything was created directly within After Effects as shape layers and all animations were exported using the Bodymovin plugin to Lottie files that were embedded in the web page HTML and manipulated with JavaScript.
Donation form page “Let’s Draw up the Plans” animation.
Design
High-fidelity Wireframes
High-fidelity, fully annotated wireframes for each page were designed using Adobe Xd. Design deliverables included a full design system, interactive annotated wireframes with downloadable assets and style guides, and for each flow I also delivered an instructional document, outlining details around the designs and especially how to implement the Lottie animations.
I also included the completed Lottie animations as JSON files, along with the full HTML and JavaScript code to implement. In order to demonstate effectively how the animations should work within the designs, I included demo HTML and JavaScript files where the animations could be viewed and interacted with.
Conclusion
Thoughts & Learnings
Working on the Ronald McDonald House Charities website design was hugely challenging and rewarding. Because of a very tight turnaround timeframe, conducting a full UX research and full initial usability testing was not possible for this project, but I found the competitive benchmarking exercise to be hugely valuable.
In conducting validation testing with sample users, I was able to better understand the user’s understanding of the prompts that were presented to them in the interactive animations and improve on them.
I also learned a huge deal about Lottie and how to export an animation from After Effects using the Bodymovin plugin, which has since become a staple of my workflow. And finally, I compounded my knowledge of JavaScript functions by implementing JS to control looping and interaction within the Lottie animations.
Ronald McDonald House Charities are still fundraising for the new house and are hoping to raise a total of €2 million to help build the house. They have already raised over half of this, with the website helping to raise over €295,000 in 2020 alone.
