GoInnovate!

Overview

Amid security concerns about Adobe® Flash Player, multiple companies announced plans for sunsetting their browser support for the format (SWF) that had been a mainstay in publishing interactive web content and rich applications. To prepare for these changes, founder of GoInnovate!, Andrew Papageorge, sought to interpret his website into a modern version supported by all browsers–on all devices.

The Problem(s)

WordPress was selected as a solution to the problem of future maintenance and mobile-first content. Then, the team needed a solution to the animated graphics illustrating GoInnovate! processes. It was a challenge; they were full-width (based on 100% browser window), in a sunsetting format, and contained links. On top of those concerns was the increasing use of phones for search and discovery on the Internet. Two instrumental questions drove my contributions:

1. How might we translate full-width animations from a sunset format to a mobile-first, adaptive context using WordPress?
2. How might we design this site with easier maintenance in the future?

Process

An adaptation of the double-diamond process guided cadence of my contributions to the project.

1. Discovery

• Content audit of current website and assets.
• Conducted secondary research on similar innovation consultancies.
• Conducted interviews with Owner, to draft a vision and values for the new website.
• Surveyed existing software for interactive animations.

2. Definition

• Worked with Project Lead to determine requirements and technical constraints.
• Established strategic initiative that prioritized mobile-first, adaptive design approach.

Selection of Tech Stack

Since WordPress was selected, we had to think strategically about how to bundle and deploy the animated content. Edge Animate was becoming a widely-used alternative for Flash, since it compiled interactive animations into HTML5, CSS3, and JavaScript. After some testing, we selected it based on meeting conditions:

1. The artifacts, previously used for animation and interaction, were vector graphics produced in Adobe® Illustrator.
2. Adobe® products dependably demonstrated interoperability of various products with their native file formats.
3. Adobe® products were familiar to me, therefore reducing the learning curve impeding deployment.
4. Output formats were supported by actively maintained WordPress plugins.

And based on the criteria:

1. Mobile-first, adaptive design was reached through rapid prototyping and testing–access to CSS3 allowed for adjustments to media queries.
2. Server RAM was not compromised from plugins or output formats.
3. Retain purpose of animation sequences, as per Owner’s request and rationale.

3. Development

Knowing it was crucial to parse the animated content, I set about negotiating form and content in context of mobile-first, adaptive design. I developed three options with rationale and presented to the Owner. After deliberation, he agreed with my advisement and selected the solution that best communicated the brand and respected a range of device widths.

While prototyping, I refined ways to expedite successive iterations more quickly. Thereby establishing an update process specifically for animated, interactive content.

4. Delivery (Deployment)

Deployment went smoothly, as Tom was well-versed in those tasks. I conducted cross-browser, cross-device testing during deployment. Andrew was happy to know his website was ready for the coming years.

Results

One goal was to make this transition for his audience as seamless as possible by maintaining familiarity in visual forms. And we think we accomplished that. In the months following deployment, search and discovery traffic remained stable. And most importantly, visitors could now view the website on their mobile devices.

Before and after of homepage.

Screenshots of the deployed mobile-first, adaptive design.

While prototyping, I found it difficult to navigate the Owner’s repository of assets. With permission from the Owner, I took an extra step and compiled an interactive PDF guide to facilitate quick retrieval of assets used on the website.

Screenshot of the interactive guide for retrieving assets

Team & Roles

• Andrew Papageorge, Owner, GoInnovate!
• Tom Ford, Project Lead, Full-stack WordPress Master (I highly recommend him for anything WordPress-related!)
• Nicholas Schroeder, Front-end Development and Design

Learning Outcomes

• Communication with plugin authors helps mitigate issues and predict versioning.
• Scheduling time to interview his testimonial clients would have provided more data to validate/invalidate design decisions.
• More research into future-proofing was needed. By October of 2015, Adobe® announced it ended feature development for Edge Animate. Then, in September 2019, it was removed from Creative Cloud. Luckily, plugin authors accounted for the legacy and canvas formats, while maintaining the plugin.