User Experience, Content Strategy and Animation Standards

Resolving a heated debate on page animation

thanks for sharing typography

Overview: The defined style guides and design requirements are meant to be held as a standard to unify the myriad domains and silos within the company. It was common for all projects assigned each week to have no information on the project aside from its title and a production contact provided to start. Various teams from Marketing, Creative, Corporate Marketing, Corporate Creative, Product Design, and Engineering ALL expected a different, specific treatment for animation on the page without transparent communication within the project pipeline. During the final weeks before launch, a threat to delay of a sensitive time-based corporate campaign was simmering. The debate was ongoing with most teams dug into their expected treatment they weren't able to effectively communicate. AKA just make it bouce, just make it pop, just make it fade... Various teams were not necessarily aware of, nor accepting of, competing requests for final expectations.

This page shows the resolution I created to show the nuance of what each direction was requesting and its impact on a page. Providing visual representation to the argument helped quickly squash the debate and lead to setting standards for animation on the page. I used this incident to continue to push for a universal corporate design standards within all siloed FOBs. Standards were created with this incident to offer as menu items for Marking and Creative to select for future campaigns.

The Challenge

Creating a responsive animated experience reactive to the user's scroll up or down can be a seemingly straight-forward experience with the right tech. The challege comes with legacy systems and more than thirty different designers, managers, and target audiences from multiple time zones chiming in to describe their idea of the preferred experience.

I attended multiple meetings where forty minutes or more were dedicated to discussing the abstract concept of a bubble. Heated debates on bubbles without visual representation. As the managers in NY, Ohio, Georgia debated the merits of bubbles or other designs, I went about creating a method to work these types of interactions into a design system so such discussions would ideally be moot in the future. Nomenclature was a key issue in the meeting and it was clear there was not a common vocabulary to describe or map out expectations.

Multiple JIRA tickets and bugs were filed, often reverting the last change or contradicting the direction requested. Time was running out on delivery and system-wide crashes complicated the issue, including a multi-state power outage causing server and data issues across the country. These outside factors compounded issues but the hard delivery date remains.

The Direction

thanks for sharing typography

  • Create user engagement and loyalty through animations!
  • Drive customers back to Macys.com with bubbles!
  • The bubbles shouldn't be bubbles!
  • The bubbles should be ENVELOPES! and animated to open and close. Bubbles are so done.
  • As the user scrolls up or down, make bubbles appear!
  • As the user scrolls up or down, make bubbles bounce, but not too much bounce!
  • As the user scrolls up or down, it should REALLY bounce!
  • As the user scrolls up or down, make bubbles fade!
  • Make the bubbles POP!

Goals

Establish a strategy for all campaigns to follow guidelines for ux, ui, content implementation to quickly set standards for brand consistency and for new and evolving technologies. I advocate for user engagement through animation, but with an understanding of core concepts of development. Because the corporate structure is vast and siloed, relying on systems first conceived in the 1800s. The structure of Marketing works on a retail business strategy and the structure of Technology works on a modern, agile strategy. There is a bit of a bridge to construct for these two pillars to work successfully together. Project schedules, project calendars, project systems, corporate systems, and internal/business terminology is not the same within the company that spans corporate offices in New York, Ohio, Georgia, Florida and California.

User Advocate: UX Concerns & Brand Impact

  • User's frustration at bandwidth-heavy content does result in a drop of conversions (Multiple examples of previous drops when autoplay video and looping animations dominate the page were provided with metrics and loss of expected revenue)
  • User's bandwidth will be impacted by gratuitous animation when they view on mobile devices causing a negative hit to the brand's reputation.
  • User's frustration at bandwidth-heavy content does result in a drop of conversions (Multiple examples of previous drops when autoplay video and looping animations dominate the page were provided with metrics and loss of expected revenue)
  • Use Cases show animation and user engagement is best used when it's subtle and engaging. (Metrics show pageload times faster and more conversions with subtle animation as opposed to no animation or overt animation)
  • Macy's Brand will be impacted negatively if we have inconsistent design strategies and content marketing on macys.com. Content standards and animations must have support and input by all Marketing and Creative silos and Corporate Marketing and Creative silos. These must work with the Platform Technology and Architecture and maintain guidelines for WCAG and performance. We must create design system standards and enforce them with insight into the needs of the customer, the technology, and accessible content design.

Results

The new redesign with animation and a responsive approach resulted in setting standards for animation for Corporate Marketing campaigns.

This is/was the defacto bubble behavior contested

This is the basic bubble with a standard animated expectations.



bubble saying get rewards before others do!


outdated thanks for sharing graphic from 2013

Request: Bubble popping behavior

This version has a basic bubble with a bit of a pop and an infinite easing animation


outdated thanks for sharing graphic from 2013



bubble saying get rewards before others do!

Request: Bubble behavior with a fading effect

This bubble animation is a 'bubble up' request.



bubble saying get rewards before others do!



bubble saying get rewards before others do!

Request: Bubble behavior with faded scaling

This version has a basic bubble with a slowly easing, scaling animation. This behavior was requested and a debate ensued over its brand impact.


bubble saying get rewards before others do!

Request: Bubble behavior with a fade

This bubble has a slightly altered fading animation per provided specs.



bubble saying get rewards before others do!

I’m open to new opportunities.

If you're looking to connect, let’s grab a coffee and chat!

crosswalk shot across from the sfmoma with painting that reads think outside the building.