2023

Like Animation in adidas Running

Adding moments of delight to a strategically minimal design

Problem

In 2022, the adidas Running app went through a visual redesign to align with the adidas flagship app. This redesign introduced a more minimal, black-and-white aesthetic and removed illustrations that had previously been a key part of the app’s personality.

While the redesign met its strategic goals and didn’t negatively impact core metrics such as monthly active users or tracked activities, qualitative feedback suggested something was missing. Some long-term users described the app as feeling more “cold” or “corporate.” Even though they didn’t explicitly mention the removed illustrations, the emotional tone was noticeably different.

The challenge was clear: how could we reintroduce warmth and personality to the app experience without reversing strategic design decisions?

My Role

I led the Like animation initiative as part of a broader exploration of lightweight design improvements.

This was a cross-functional effort driven by leadership’s encouragement to explore quick wins: features that could enrich the experience without necessarily impacting key metrics. I collaborated with my squad but independently researched tools, created prototypes, and tested user reactions.

Key activities included:

Conducting desk research

Investigating tools and plugins for animation

Prototyping lightweight animations

Running an unmoderated test to observe user reactions

How I Solved It

Exploring feasible options

I began by exploring simple ways to add moments of delight without needing illustration resources or significant engineering effort. During this research, I found a plugin that could export animations directly from Figma as Lottie or other web-friendly formats. This made it easy to prototype and test ideas quickly.

Designing the Like animation

I focused on the Like button in the Running app’s newsfeed, a touchpoint that users interacted with regularly. I designed a lightweight animation, made the prototype and exported it using the plugin.

Validating before implementation

I ran an unmoderated test and analyzed how users responded when interacting with the new animation. The goal wasn’t to test usability, but rather to observe emotional reactions and engagement behavior. The qualitative insights were promising: users smiled, clicked multiple times, or expressed positive sentiments, indicating that the interaction added value.

Impact

The animation was implemented with minimal development effort in less than half a sprint.

In the three months following release, engagement with the Like feature increased by an estimated 4%

The animation was well-received internally and helped open the door for more small-scale moments of delight in the app

Importantly, this initiative demonstrated that even within a constrained, strategic design framework, it’s possible to create emotionally resonant experiences that respect both brand and user needs.

Take Aways

Delight doesn’t always require large investments, sometimes small details can make a meaningful difference

Observing user behavior (not just usability) can uncover emotional signals that data alone may miss

Finding the right tools can empower designers to prototype and test ideas independently, speeding up iteration cycles

Balancing strategic constraints with user empathy is key when evolving a product’s experience

A small card

Call out a feature, benefit, or value of your site that can stand on its own.

A little glimpse

Call out a feature, benefit, or value of your site that can stand on its own.

Nathalia Cabral

2023

Like Animation in adidas Running

Adding moments of delight to a strategically minimal design

Problem

In 2022, the adidas Running app went through a visual redesign to align with the adidas flagship app. This redesign introduced a more minimal, black-and-white aesthetic and removed illustrations that had previously been a key part of the app’s personality.

While the redesign met its strategic goals and didn’t negatively impact core metrics such as monthly active users or tracked activities, qualitative feedback suggested something was missing. Some long-term users described the app as feeling more “cold” or “corporate.” Even though they didn’t explicitly mention the removed illustrations, the emotional tone was noticeably different.

The challenge was clear: how could we reintroduce warmth and personality to the app experience without reversing strategic design decisions?

My Role

I led the Like animation initiative as part of a broader exploration of lightweight design improvements.

This was a cross-functional effort driven by leadership’s encouragement to explore quick wins: features that could enrich the experience without necessarily impacting key metrics. I collaborated with my squad but independently researched tools, created prototypes, and tested user reactions.

Key activities included:

Conducting desk research

Investigating tools and plugins for animation

Prototyping lightweight animations

Running an unmoderated test to observe user reactions

How I Solved It

Exploring feasible options

I began by exploring simple ways to add moments of delight without needing illustration resources or significant engineering effort. During this research, I found a plugin that could export animations directly from Figma as Lottie or other web-friendly formats. This made it easy to prototype and test ideas quickly.

Designing the Like animation

I focused on the Like button in the Running app’s newsfeed, a touchpoint that users interacted with regularly. I designed a lightweight animation, made the prototype and exported it using the plugin.

Validating before implementation

I ran an unmoderated test and analyzed how users responded when interacting with the new animation. The goal wasn’t to test usability, but rather to observe emotional reactions and engagement behavior. The qualitative insights were promising: users smiled, clicked multiple times, or expressed positive sentiments, indicating that the interaction added value.

Impact

The animation was implemented with minimal development effort in less than half a sprint.

In the three months following release, engagement with the Like feature increased by an estimated 4%

The animation was well-received internally and helped open the door for more small-scale moments of delight in the app

Importantly, this initiative demonstrated that even within a constrained, strategic design framework, it’s possible to create emotionally resonant experiences that respect both brand and user needs.

Take Aways

Delight doesn’t always require large investments, sometimes small details can make a meaningful difference

Observing user behavior (not just usability) can uncover emotional signals that data alone may miss

Finding the right tools can empower designers to prototype and test ideas independently, speeding up iteration cycles

Balancing strategic constraints with user empathy is key when evolving a product’s experience

A small card

Call out a feature, benefit, or value of your site that can stand on its own.

A little glimpse

Call out a feature, benefit, or value of your site that can stand on its own.

Nathalia Cabral

2023

Like Animation in adidas Running

Adding moments of delight to a strategically minimal design

Problem

In 2022, the adidas Running app went through a visual redesign to align with the adidas flagship app. This redesign introduced a more minimal, black-and-white aesthetic and removed illustrations that had previously been a key part of the app’s personality.

While the redesign met its strategic goals and didn’t negatively impact core metrics such as monthly active users or tracked activities, qualitative feedback suggested something was missing. Some long-term users described the app as feeling more “cold” or “corporate.” Even though they didn’t explicitly mention the removed illustrations, the emotional tone was noticeably different.

The challenge was clear: how could we reintroduce warmth and personality to the app experience without reversing strategic design decisions?

My Role

I led the Like animation initiative as part of a broader exploration of lightweight design improvements.

This was a cross-functional effort driven by leadership’s encouragement to explore quick wins: features that could enrich the experience without necessarily impacting key metrics. I collaborated with my squad but independently researched tools, created prototypes, and tested user reactions.

Key activities included:

Conducting desk research

Investigating tools and plugins for animation

Prototyping lightweight animations

Running an unmoderated test to observe user reactions

How I Solved It

Exploring feasible options

I began by exploring simple ways to add moments of delight without needing illustration resources or significant engineering effort. During this research, I found a plugin that could export animations directly from Figma as Lottie or other web-friendly formats. This made it easy to prototype and test ideas quickly.

Designing the Like animation

I focused on the Like button in the Running app’s newsfeed, a touchpoint that users interacted with regularly. I designed a lightweight animation, made the prototype and exported it using the plugin.

Validating before implementation

I ran an unmoderated test and analyzed how users responded when interacting with the new animation. The goal wasn’t to test usability, but rather to observe emotional reactions and engagement behavior. The qualitative insights were promising: users smiled, clicked multiple times, or expressed positive sentiments, indicating that the interaction added value.

Impact

The animation was implemented with minimal development effort in less than half a sprint.

In the three months following release, engagement with the Like feature increased by an estimated 4%

The animation was well-received internally and helped open the door for more small-scale moments of delight in the app

Importantly, this initiative demonstrated that even within a constrained, strategic design framework, it’s possible to create emotionally resonant experiences that respect both brand and user needs.

Take Aways

Delight doesn’t always require large investments, sometimes small details can make a meaningful difference

Observing user behavior (not just usability) can uncover emotional signals that data alone may miss

Finding the right tools can empower designers to prototype and test ideas independently, speeding up iteration cycles

Balancing strategic constraints with user empathy is key when evolving a product’s experience

A small card

Call out a feature, benefit, or value of your site that can stand on its own.

A little glimpse

Call out a feature, benefit, or value of your site that can stand on its own.