UX animations

Client

Econans

Duration

2 months (2020)

Team

Elin Strand
Jessica Badenfelt

Tools

Framer, UserZoom

Overview

How can small interaction details influence whether users continue or abandon a journey?

During an internship and thesis collaboration with Econans, I explored whether micro-animations could help users navigate the onboarding flow of Foreteller, a digital financial planning tool.

Users were struggling to progress beyond the early steps of the experience, preventing some of them from reaching the product's core value. To investigate whether motion could improve orientation and reduce early-stage friction, we conducted a qualitative A/B test comparing an animated prototype with an otherwise identical static version.

The results suggested that users interacting with the animated prototype experienced fewer navigation difficulties and were more successful in progressing through the flow.

The project was conducted together with UX designer Jessica Badenfelt. We collaborated throughout research, prototyping, testing, and analysis.

The challenge: users struggled to progress beyond the first steps

As a starting point we reviewed documentation from previous usability studies conducted by Econans. The findings revealed recurring issues in the user journey. Participants sometimes felt lost in the interface and struggled to discover available functionality, particularly during the early stages of the flow. When users struggle to identify the next action early in a journey, they risk abandoning the experience before reaching the product's core value.

Our hypothesis was that purposeful animation could improve orientation, reduce early friction, and help users progress further into the experience. We therefore decided to explore whether motion could help communicate progression through the flow and make the next step more discoverable.

Defining principles for purposeful motion

Before creating any concepts, we conducted desk research focusing on motion design, usability, and visual perception. Based on our findings, we established four principles to guide the design:

  1. Use motion to support understanding
    Animations should help users understand what is happening and provide clear visual feedback.

  2. Respect the user's time
    Animations should serve a purpose and never delay users unnecessarily.

  3. Direct attention intentionally
    Motion naturally attracts attention and should therefore be used selectively and with care.

  4. Create delight
    Well-designed motion can make an experience feel more engaging, but usability should always come first.

Isolating animation as the only variable

To evaluate the impact of motion, we created two versions of the same prototype. The first version included animations designed according to our research principles. The second version contained identical content, interactions, and layouts, but without animation. When applying animations we focused on the areas where previous research indicated the greatest risk of confusion.

By keeping all other variables consistent, we could evaluate whether any differences in user behaviour were likely related to the motion itself.

Running a qualitative A/B test

We conducted a qualitative A/B test with 12 participants. Six participants tested the animated prototype, while six tested the static version. All participants completed the same tasks and were observed throughout the sessions.

The purpose was not to measure statistical significance, but to compare behaviours, reactions, and levels of understanding between the two groups. Particular attention was given to how participants interpreted transitions, navigated the flow, and whether they required support to continue.

Motion helped users move beyond an early friction point

The clearest difference between the two groups appeared at the beginning of the flow. After the initial interaction, users needed to identify an arrow that would take them to the next step. Several participants using the static prototype struggled to recognize this action and became stuck before they could continue through the experience.

Among participants using the animated prototype:

  • 4 of 6 experienced no difficulties

  • 2 of 6 experienced minor difficulties

  • 0 of 6 experienced major difficulties

Among participants using the static prototype:

  • 2 of 6 experienced no difficulties

  • 1 of 6 experienced minor difficulties

  • 3 of 6 experienced major difficulties

The findings suggested that motion helped participants recognize how to proceed and reduced friction at a critical early stage of the journey.

Results A/B-test
"My goal is to not have to worry about finances in the future [...] but it felt like the service was holding my hand."

Test participant

Motion increased engagement, but not perceived maturity

Beyond navigation improvements, we also observed a difference in users' emotional responses. Participants interacting with the animated prototype more often described the experience in positive terms and gave spontaneous remarks about the interface and its functionality. This pattern did not appear in the static version.

Interestingly, this aligned with one of the motion principles defined at the outset of the project: to create delight without compromising usability. Although delight was not a primary research objective, the findings suggest that purposeful motion may contribute not only to comprehension and orientation, but also to a more engaging overall experience.

Another interesting finding was that improved navigation did not translate into a higher perception of product maturity.

Participants rated how finished the product felt on a scale from 1–10:

  • Animated prototype: 7.75

  • Static prototype: 8.67

This challenged one of our assumptions. While motion appeared to support comprehension and navigation, it did not make the experience feel more polished. A likely explanation was that limitations in the prototype implementation affected how participants perceived the quality of the animations. The finding highlighted that usability and perceived polish are separate aspects of the user experience and should be evaluated independently.

Impact

The findings were shared with Econans and informed ongoing development of Foreteller.

While the study was qualitative, it provided evidence that motion can reduce early-stage friction and improve users’ understanding of progression in step-based flows.

Reflection: motion as a functional design tool

A particularly important insight was how small interaction changes can meaningfully affect user behaviour. Subtle differences in motion appeared to influence whether users continued or got stuck early in the journey. Rather than treating animation as a visual enhancement, the findings showed that it can serve a functional role in helping users understand state, progress, and next actions.

The project reinforced the importance of designing interactions intentionally and validating assumptions through user research. Even small design decisions can have meaningful impact when applied at the right moment in a user journey.

Previous projekt