Motion Lab

Motion Lab

Consumer Dashboard

Consumer Dashboard

Consumer Dashboard

Overview

Overview

Overview

At Q2, we were looking for ways to bring our Consumer Dashboard UI to life and to help users have a more premium experience. I was brought on as the project lead because of my interaction design background and understanding of development spec'ing for animation systems as well.

Approach

Approach

Approach

My primary focus was to reduce perceived latency while also bringing a more customized feel for our users by adding a loader and welcome message. Provide motion specs to our developers in order to ensure that end product matches approved animations.

Three Key Sections

Three Key Sections

Log in Dashboard Account

Log in Dashboard Account

Log in Dashboard Account

Log in

Log in

Log in

I wanted to add a more premium feel for users while also reducing perceived latency while account data was being retrieved for the dashboard.

I wanted to add a more personal feel for users while also reducing perceived latency while account data was being retrieved for the dashboard.

Dashboard

Dashboard

Dashboard

We wanted to define what the global animations would be across our product suite for entering and exiting pages. We tried a few options for animating the tiles and we stuck with all tiles moving up the y-axis on load, and fading off upon exit.

We wanted to define what the global animations would be across our product suite for entering and exiting pages. We tried a few options for animating the tiles and we decided on tiles moving up the y-axis on load, and fading off upon exit. At the time there were development constraints around doing individual tiles on platform, so we backlogged that approach for when resources allow.

Account Details

Account Details

Account Details

Instead of the entire page loading at once, I added a loading animation to loop while the account transactions were being fetched. Once fetched, the transactions fade on line by line.

Motion Specifications

Motion Specifications

Once the animations were approved on the UX side, I created the motion specs for the developers.

Once the animations were approved on the UX side, I created the motion specs for the developers.

Login to Home Flow

Home to Account Flow

Account to Home Flow

I also sent the developers the full animation flow as well as a slower version to ensure that nothing would be missed.

I also sent the developers the full animation flow as well as a slower version to ensure that nothing would be missed.

Framer 2023

Amsterdam

Motion Lab

Motion Lab

Motion Lab