Putting Adobe Edge Animate to the test for a great cause

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.

Over the past couple of years, Terralever has seen a big increase in demand for HTML5-enabled sites that are flexible and can be viewed across a variety of screens and browsers. Typically, the team creates projects like this using straight-up coding in JavaScript and more traditional tools like Canvas. Like most agencies, Terralever has continued to look for new solutions to enable rich, interactive online experiences and better collaboration between design and development, with less reliance on complex coding.

Opportunity knocks, Edge Animate answers

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.

Familiar workflow supports collaboration

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."

Bright, playful, and personal

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.

Taking collaboration to new heights

Terralever aimed high with this site and knew it was a risk working with a new technology under a tight timeline. "We knew we couldn't get the job done in time by hand-coding it in JavaScript and jQuery. In fact, it would have taken twice as long," says Ryan Mathis, technical director at Terralever. "When we saw Edge Animate and the way its timeline-based animation worked, we felt at home right away because most of us have a background in Adobe Flash technology. So we dove in."

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."

If the team coded the whole thing in JavaScript, Ball would have had to hand his designs off to the development team and hope that they came back as he envisioned. The process would have been much more linear, which ultimately means it would have taken more time to design, code, test, redesign, code, test again, and so on. With Edge Animate, the creatives and developers were able to work more iteratively, make adjustments earlier in the process, and maintain a consistent creative flow, which helped Terralever meet both creativity goals and deadlines.

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."

Blue ribbons all around

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."

It's no exaggeration to say that the new tool is changing the way Terralever will do business, producing richly interactive digital experiences and pricing out sites. Previously when providing estimates for clients, the agency needed to charge roughly twice as much for hand-coded JavaScript/HTML5-based projects vs. using Flash Professional to create an animated experience. "Now with Edge Animate, we can build out HTML5 animations and interactive experiences much faster and at less expense to our clients," says Randall Shimkus, senior vice president of interactive production at Terralever. "We have a more rewarding, quick, and collaborative way of working and delivering content for multiple screens — and that genuinely benefits us and our clients."