Seattle Public Schools: Micro-Interactions

How can motion assist in a more intuitive user experience?

Timeframe
4 weeks
Tools
After Effects, XD, Material.io
Collaborators
Frankie Ostello
Roles
UX/UI, Motion design

ChallengeThe current tools and portals utilized by Seattle Public Schools are unnecessarily confusing, complex, and outdated. Frankie Ostello and I had set out to redesign and unify these resources, emphasizing ease of use and accessibility. Our solution for version 1 of the SPS dashboard and app had addressed organization, interfaces, and task flows. I decided to push this project one step further to understand how motion-driven micro-interactions might help guide users through SPS screens.

SolutionSPS version 2 intends to demonstrate how one might adapt static elements when considering motion: emphasizing micro-interactions while  following guidelines for timing, easing, transitions, and best practices according to Material.io.

Task Flow

Since the timeline of this project was four weeks, it seemed pragmatic to designate a single task flow capable of demonstrating as many micro-interactions as possible.

Design System

Previous design system colors were re-adapted through Material Design XD sticker sheet for accessibility. Typography was converted from Verdana to Roboto to provide more character styles. Mobile components were updated per material design specs.  

Adaptation

Additional contextual information is featured in the top navigation. Added notification center. Redesigned message display. Simplified interface, changed buttons to tabs.

Material Design Motion System

Material Design offers an After Effects sticker sheet, demonstrating an effective workflow following the Material motion guidelines. Although this was a helpful resource, I had to import custom components from XD rather than placing and manipulating pre-existing baseline UI components from the sticker sheet. The majority of interactions were built by me in After Effects while referencing the Material motion guidelines.

Certain fading elements utilize linear easing. Otherwise, a typical easing pattern is 40% outgoing and 80% incoming over 300ms.

Most interactions occur over 300ms, frequently choreographed with various moving pieces. This time frame is long enough to guide attention but short enough not to distract. Depending on screen size and need, an animation may occur from 90ms to 500ms. Stylistic choices may last longer.

ReflectionThere is a need for consistent and meticulous relationships between all atoms, molecules, and organisms in both interface and motion design. We perceive interactive space similarly to how we understand the real world, where movement is generally consistent, guided by laws of motion. Successful design intuitively guides users through space, and successful motion design intuitively guides users through space + time.