Screenshot-9

Micro-Interactions for a Global Financial Brand

Design and code unique, subtle, and elegant transitions for my client's on-site brand experience.

CONTENTS

Interviews & Concepts

Personas

Researching & Documenting Business Processes & User-Flows

Creating a Job Post

Business Process Flow Chart

Testing & Validating with Wireframes & Prototypes

Intro

I was hired to design and code unique, subtle, and elegant transitions for my client’s on-site brand experience. At the end of our 6 week engagement, the goal was to have the a minimal set of animations live on the public website.

I mainly worked solo, but had frequent contact with a Front-end Engineer, UX Designer, and UX Manager within the organization.

This contract was extended several times and persisted throughout 2020.

Coded with GSAP.js

Above is a hero section page-load exploration. As the line is drawn across the page, it cues the fade-in of the nearest elements, ending with the tiles to the right, where we want the client wanted the visitors to focus attention.

Before diving into the process, let me show you some of the results

Below is an exploration of scroll based transitions using the core structural design elements and content on the page. All coded with basic HTML, CSS and GSAP from Figma files.

This is a prototype for an animation that is triggered when tabs are changed. Coded with basic VUE and GSAP from Figma files

Below is an exploration of a "special section" fade-in. Coded with HTML, CSS, and GSAP, using designs provided by the client through Figma. I utilized the SVG elements to draw in the lines and circles.

Below is another exploration for a "special section" fade-in effect. Coded with HTML, CSS, and GSAP, using designs provided by the client through Figma. I utilized the SVG elements to make the boxes fade in.

Now, to get back to the process...

Research

animation-process-steps

Material Review

Familiarize myself with the branding materials and recent website redesign. I recorded important and relevant points to help guide and explain my design decisions.

Affinity Review

Review competitors and explore other visual references to help stakeholders visualize and confirm the art direction. This is very important because it informs the direction my animations take later on.

Design Audit

Familiarize myself with on-site design elements with multiple states, transitions, and single states. These were listed and video recorded.

Everything here was recorded in a document for future reference.
 

impact-return-matrix-for-design

Prioritization Exercise

Combining the visual references and the animation audit I had a better understanding of the objects and direction of our design, and needed to know exactly where to place my design effort for the following weeks. So here, we performed an impact/effort exercise.

  1. When animated, which elements might have the biggest impact on the user experience?
  2. What might the level of effort be for these particular elements?

For this exercise, each design element in consideration is written on a post-it note. Each note is then placed on the graph using the input from the team containing a designer and front-end engineer. Later, we shared this with the director and made our final selections.

Animation Exploration

Buttons

It’s likely that buttons are interacted with more than any other element. This frequency is a good brand opportunity, but also contains some inherent limitations.

We wanted a button that would be unique but not garish, a boundary that I explored.

During this time I came to appreciate a bit about how these types of boundaries humanize different animations.

An animations’ qualities are made intelligible through the boundaries it touches.

Cards

Finalizing Options

I presented work to the design team and then to the director and stakeholders. They provided feedback on their favorite options and sometimes I made slight adjustments before moving on.

Headers

The header image is large, and therefore technically moves more slowly than other elements to achieve the same effect. Additionally, isolating the transition to the header means users are not blocked from accessing information and links further down the page.

Cards

Here I modified the design system slightly to include a hover state.

The idea is that article card imagery like these serve to represent and support the copy. The imagery usually represents the copy through stock photos, and the copy is the main focus. I wanted to reflect this by increasing the copywriting real estate and by moving it closer to the center on hover, when a user shows interest.

Buttons

We wanted a button that was unique enough to be noticeable without being garish. This smooth gradient hover borrows from a more commonly seen angled slide-in, but changes it in a way that feels novel and familiar when using it on the website.

Documentation

I recorded all the details in a custom virtual environment for the team to integrate into its official design library.