Moving Beyond Static: Bringing motion into a design system

Moving Beyond Static: Bringing motion into a design system

Moving Beyond Static: Bringing motion into a design system

Moving Beyond Static: Bringing motion into a design system

Brief

The Design System team at Anaplan aimed to incorporate motion into the product. Previously, components were largely static and limited in use of motion design. Our Design System team wanted to approach this project systematically to ensure consistency and scalability. I conducted the planning, research and design of motion prototypes to test with internal teams. I provided a set of principles and motion tokens that were developed by engineers and added to components.

Project timeline

Scoping and planning

research

Competitive analysis

research

Feedback gathering

workshop

Interaction audit

Design

Prototypes

design

Spatial interface

workshop

Token definition

design tokens

Brief

The Design System team at Anaplan aimed to incorporate motion into the product. Previously, components were largely static and limited in use of motion design. Our Design System team wanted to approach this project systematically to ensure consistency and scalability. I conducted the planning, research and design of motion prototypes to test with internal teams. I provided a set of principles and motion tokens that were developed by engineers and added to components.

Project timeline

Scoping and planning

research

Competitive analysis

research

Feedback gathering

workshop

Interaction audit

Design

Prototypes

design

Spatial interface

workshop

Token definition

design tokens

Brief

The Design System team at Anaplan aimed to incorporate motion into the product. Previously, components were largely static and limited in use of motion design. Our Design System team wanted to approach this project systematically to ensure consistency and scalability. I conducted the planning, research and design of motion prototypes to test with internal teams. I provided a set of principles and motion tokens that were developed by engineers and added to components.

Project timeline

Scoping and planning

research

Competitive analysis

research

Feedback gathering

workshop

Interaction audit

Design

Prototypes

design

Spatial interface

workshop

Token definition

design tokens

Brief

The Design System team at Anaplan aimed to incorporate motion into the product. Previously, components were largely static and limited in use of motion design. Our Design System team wanted to approach this project systematically to ensure consistency and scalability. I conducted the planning, research and design of motion prototypes to test with internal teams. I provided a set of principles and motion tokens that were developed by engineers and added to components.

Project timeline

Scoping and planning

research

Competitive analysis

research

Feedback gathering

workshop

Interaction audit

Design

Prototypes

design

Spatial interface

workshop

Token definition

design tokens

Defining scope

Problem Statement

Previously, UI elements would populate instantly without any easing or motion, which felt jarring and led to change blindness in users. Where there were motion elements, they were often inconsistent. This did not fit our internal values of providing a cohesive experience for the user.

Hypothesis

By adding motion we want to:


  • Reduce the perceived latency in loading times and transitions.

    Animated loading states and transitions are perceived as faster , ‘slow down to go fast’


  • Reduce Change Blindness by drawing user’s attention to changes that occur on a page.

    Change blindness is the tendency for people to overlook things that change outside their focus of attention)

  • Reduce cognitive load and increase the discoverability of key features

    Motion orients users, guides them to call to actions, and creates relationships between elements on a page

Core values

Motion can feel be subjective, so we kept a set of values in mind throughout:

Bring value

Do not add motion for the sake of adding motion.

Brand

How is motion reflecting our design system and being integrated with existing components

Accessibility

Ensure that all users can understand and engage with the content, animated or not, and provide options to turn off motion.

Research

Research questions

We established a set of research questions to test our hypothesis:


  • How can we strategically incorporate motion to enhance the user experience?


  • How can we define the purpose of the motion in relation to users' feelings of accomplishment and frustration?


  • What foundational design tokens (curves, speed, and duration) should be established to ensure motion feels cohesive?


  • In what ways can the spatial interface be defined to ensure that the motion feels natural and seamless?


  • How can we gather stakeholder feedback to refine and expand upon our initial motion design decisions?

Competitive Analysis

I researched and analysed various UX motion principles, including the Disney principles of motion that use illusion and physics to create believable interactions and character appeal.


I also looked at the 1944 psychology experiment by Fritz Heider and Marianne Simmel, which demonstrated that humans emotionally resonate with motion even on geometric shapes, indicating the impact of motion UI.


Additionally, I examined how large-scale design systems, such as IBM's Carbon, Google Material, and Audi document and implement motion design. This analysis provided a strong foundation to develop Anaplan's motion design system, and validated a business need for motion in the design system.

Research findings

Why should we add Motion?

Motion brings understanding

Motion gives a user context to help navigate a site and understand their decisions. Motion can quickly communicate if an action has successfully taken place, or point them towards something that might otherwise be missed.

Motion engages

Motion can help turn boring and repetitive moments into enjoyable ones. eg. an engaging loading state animation has been proven to reduce the feeling of waiting.

Motion tells a story

Motion can help convey characteristics in a UI, helping show a product’s personality, bring a modern feel and contribute to the overall unique visual design.

Motion foundations

Productive

Productive

Productive

Promotes efficiency to fulfill tasks

Promotes efficiency to fulfill tasks

Promotes efficiency to fulfill tasks

Component uses

Component uses

Closing & opening

Buttons

Loading states

Loading states

Focus

Focus

Focus

Draw the users' attention to something happening that may be overlooked

Draw the users' attention to something happening that may be overlooked

Draw the users' attention to something happening that may be overlooked

Component uses

Component uses

Changes

Toasts

Warnings

scrolling

Warnings

scrolling

Inform

Inform

Inform

Reaction to an action the user has completed, or show status

Reaction to an action the user has completed, or show status

Reaction to an action the user has completed, or show status

Component uses

Component uses

tool tips

Progressive disclosure

Warnings

Express

Express

Express

Movement to make the UI friendlier and express personality

Movement to make the UI friendlier and express personality

Movement to make the UI friendlier and express personality

Component uses

Component uses

Button Icons

log in

empty states

avatars

log in

empty states

Workshop

I presented these findings and foundations in a team workshop, with engineer, design and product stakeholders. We asked questions to assess engagement:


  • Where does motion succeed and fail?

  • What are the technical considerations?


This feedback, along with analysis of the research and prototypes were brought together to consider next steps.

Takeaways

Motion succeeds when:

  • it solves problems,

  • used sparingly,

  • it makes users feel confident.

Motion fails when:

  • it slows me down

  • it is not accessible.


Technical considerations found that tokenisation and spatial definition would be potential blockers. We wanted to address this early in our design process. We also wanted to see real coded examples alongside prototypes.


Expressive motion was thought to be a valuable place for new users, for onboarding and empty / loading states.

Designs

Interaction audit

Based on our foundations, I conducted an internal audit of existing interaction types. This gave us a framework of components and patterns that could be grouped.


I discovered existing motion behaviours and grouped components by these components and begun working on prototypes to define the motion values.

Prototypes

The design system team worked collaboratively to create motion prototypes.


We started with low-fi interaction mapping in figma, and definied an initial set of motion types for each component foundation.


From here we moved onto a high fidelity prototype that was used for further testing and feedback before development and implementation.

Spatial definition

Following prototype feedback, we wanted to involve the spatial plane of the UI to add an extra level of motion continuity. This would set the patterns components and their relation to one another. We had a paper prototyping session with engineers to define some levels that would be built into design tokens.

Modal matrix

Modals also needed further consideration, as the distance in relation to screen size impacted the motion. We worked on a set of levels that would impact the distance the modal had to travel. This would validate the reduction of latency requirement while keeping motion for larger components on the screen.

Tokens

Tokens

Output and next steps

We developed a set of matrixes for these additional motion requirements. Alongside these, we compiled tokens for curves, location and speed. These were applied to a set of components that would be added as a first iteration.


Example of token proposal:

Curve

Default (Ease In Out)

Exit (Ease Out)

Enter (Ease In)

Speed

Fast (100ms)

Mid: (300ms)

Slow: (500ms)

Location
Top, right, left bottom, centre, appear.


Eg. for opening a right hand panel:

Entrance

Enter-mid-left

Exit

Exit-fast-right

Next steps


This project is still on-going. We are collaborating with engineering to create internal motion calculators and apply the new set of tokens to our full component library.

Modal entrance top

small

medium

large

takeover

40 px

30 px

20 px

10 px

instant

Level 4

Modal entrance top

small

medium

large

takeover

40 px

30 px

20 px

10 px

instant

Level 4

Modal entrance top

small

medium

large

takeover

40 px

30 px

20 px

10 px

instant

Level 4

Modal entrance centre

small

medium

large

takeover

top

30 px

20 px

10 px

instant

Level 4

Modal entrance centre

small

medium

large

takeover

top

30 px

20 px

10 px

instant

Level 4

Modal entrance centre

small

medium

large

takeover

top

30 px

20 px

10 px

instant

Level 4

Spatial definition

Level 0

Level 1

Level 2

Level 3

24 px

16 px

8 px

0 px

Level 4

Spatial definition

Level 0

Level 1

Level 2

Level 3

24 px

16 px

8 px

0 px

Level 4

Spatial definition

Level 0

Level 1

Level 2

Level 3

24 px

16 px

8 px

0 px

Level 4

© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall