Terralever has a culture that never sits still. Passionate about all things digital, the agency builds interactive, animation-rich sites for clients like Cisco, Teva, IndyCar, and Red Bull, and always tries to push the limits of what is possible.
In April 2012, Terralever got the opportunity to participate in the HTML5-Off Challenge, sponsored by Adobe and SoDA (Society of Digital Agencies), to benefit Children's Miracle Network Hospitals, a nonprofit organization dedicated to raising funds for children's hospitals. The challenge focused on creating an HTML5 solution using Edge Animate for portions of the nonprofit organization's primary digital property, the Children's Miracle Network Hospitals website. The agency saw this as a great chance to stretch its technical capabilities — all while raising awareness and aiming to boost donations for a great cause.
Terralever Art Director, Jordan Ball, had attended a symposium on Edge Animate at Adobe MAX 2011 and was excited about the prospect of using it on an HTML5 project. "I thought Edge Animate would provide a faster, more intuitive way to create a richly interactive web experience across screens — one that would deepen collaboration between design and development teams so we could produce a better product in less time and ultimately at a lower cost," says Ball.
For this project, the task was to redesign the homepage and donation pages for Children's Miracle Network Hospitals using Edge Animate. Grace King, project manager at Terralever, was on point to help the team meet a tight schedule — the project had to be completed in five or six weeks. The team wanted to see if it could create a rich, animated experience that would rival projects it had created in the past using other solutions. King was responsible for ensuring the team met the deadlines and the requirements, which was no small task given the timeframe and new technology.
In the industry, Terralever is known for its expertise in building sites using Adobe Flash Professional software, so the team already had familiarity and skills with timeline-based animation. Adobe Edge Animate provided a timeline-based solution that was accessible and intuitive for both designers and developers, based on their past experience.
After seeing Edge Animate, the agency was intrigued by the possibilities of getting the design side of the house even more closely coordinated than it had been before with developers to create the animations and interactivity. Designers could more easily sketch out their ideas for the animation using the actual animation tool itself, and developers could then polish them. According to Ball, "It looked similar to the workflows we're used to in Flash Professional that supported prototyping early in the process, rather than waiting for something to be coded before realizing that it wasn't going to work."
When the team started brainstorming about the project, the members agreed unanimously that it was vital to create an emotional connection with the kids who are helped by Children's Miracle Network Hospitals. They wanted visitors to feel comfortable and motivated by the cause before being asked to provide any personal information such as their name, address, or credit card number.
One of the hallmarks of the charity is that the funds stay in the community in which they were raised to help local children. Craig Budwitz, creative director at Terralever, notes, "Through imagery and animation, we wanted to convey to site visitors that these kids aren't just names on a list. They're in your community and your neighborhood, and they need your help. We also wanted to focus on the lifeblood of the organization — the donation process — so we prominently and pervasively used a Donations button to make it easy for users to begin the donation process at any time during their exploration."
From a design standpoint, Terralever wanted to use bright, cheerful colors and imagery of a variety of kids playing and smiling. The team also wanted to take viewers on a journey, so they designed a fluid experience with the hot air balloon as the guide. The main page serves as a starting and stopping point, and the animations appear in between. A connect-the-dots type of graphic that looks somewhat like a horizontal thermometer leads users to the next animation. "We could have hand-coded the whole thing, but it would have taken much longer and would have lacked the fidelity and precision we were able to accomplish using Edge Animate," says Budwitz.
Of course, the site also needed to tie closely with the brand. Under the guidance of Ball, the team designed the main web page using Adobe Photoshop software with visuals and branding guidelines provided by Children's Miracle Network Hospitals. Photoshop enabled them to craft a single web page with layered frames representing each state of the experience. Once all the layers were produced, the graphics files were imported into Edge Animate for animation.
According to Eric Doolan, user experience architect at Terralever, "We sketched a site map and began wireframing the navigation and animation points that would drive the HTML5 user experience. We also developed storyboards for specific animations to guide the development process. I worked closely with our art director, Jordan Ball, who used the timeline in Edge Animate to create the initial animations. He accomplished this with Edge Animate after about five hours of experimenting with it, mainly because the user interface is so similar to Adobe's other tools."
As first-time users of Edge Animate, the team at Terralever was pleased with its intuitive user interface. "The timeline and properties for actions, easing, triggers, and events made it easy to write an entire animation from beginning to end and then use all event and interaction code that is open to the API to tie it all together," says Mathis. "We added user interactions by inserting Edge Animate triggers at certain starting and stopping points. We were able to create a fluid movement of multiple animations using the parallax scrolling effects in Edge Animate."
Terralever completed the HTML5-Off Challenge in just a few weeks and was proud to be selected the overall winner of the challenge out of 45 entrants. Even more important, the agency was happy to play a role in helping Children's Miracle Network Hospitals improve its online donations. After the competition, Terralever gave all the assets to Children's Miracle Network Hospitals and offered them assistance if they needed help in producing the site for other screens. Budwitz notes, "It shouldn't be a tall task since the initial site was built using Edge Animate and supports HTML5."
Miran Koo manages agency alliances at Adobe for the Strategic Media and Agency Alliances team, focusing on driving project collaboration, solution adoption, and marketing opportunities with various agencies, including SoDA.