MohamedSenior Product Designer
Utrecht

WorkInteraction and motion design

Motion that earns its place

A guided flow that builds new investors a starter portfolio they understand, and four micro-interactions that each do one job. Designed, prototyped and handed off at Thndr, one of MENA’s leading investment platforms.

Shipped in production

Recorded from the live app

Company
Thndr
Discipline
Interaction and motion design
My role
  • Interaction design and motion
  • Advanced prototyping
  • Engineering handoff

The approach

Motion in an investing app has to earn its place. Every animation here was given one job and kept subtle enough to stay out of the way, then prototyped and handed off in enough detail that what shipped matches what was designed.

  1. 01

    One job per animation

    Each one answers a single question for the user: where to look, what just happened, or where they are.

  2. 02

    Subtle by default

    Highlight what matters without adding visual noise. If it gets in the way, it’s too much.

  3. 03

    Designed to be built

    Prototyped in detail and handed off carefully, so the version in the app is the version that was designed.

The lead flow: a starter portfolio people can trust

The goal was an experience that feels trustworthy and easy to follow for people new to investing. Instead of a list of products, Thndr Alpha asks three questions, builds a starter portfolio and explains the “why” behind every part of it before anyone commits.

Progressive disclosure did most of the work: people only see what they need, when they need it.

Nine steps, 25 seconds. Pick one to jump to it.

Job
Turn “I don’t know what to invest in” into a first portfolio people understand
Key idea
Explain each part before asking for anything

Four micro-interactions, each with one job

01 Flicker on the APY

A subtle flicker highlights the key value of the savings feature, the APY, without adding visual noise to the interface.

Job
Point to the one number that sells savings
Where
Savings home
Watch for
The APY pill under the balance

02 Branded coins on the entry screen

Familiar stocks in a playful coin format grab attention early and set an energetic tone. The motion builds the first bit of momentum into onboarding, with a clear focus on conversion.

Job
Set the tone and get people to continue
Where
Onboarding entry
Watch for
Popular stocks as coins, bursting out around the Thndr coin

03 Pull to refresh

A subtle blur paired with a branded refresh icon gives clear feedback, so the interaction feels responsive and polished.

Job
Confirm the refresh is happening
Where
Notifications
Watch for
The list blurs while the yellow spinner runs, then new items land under Today

04 Bottom navigation transitions

Subtle transitions between tabs make navigation feel smoother and more connected, adding a small layer of delight without getting in the way.

Job
Keep people oriented between tabs
Where
Bottom navigation
Watch for
The active pill moving between Home and Invest

Recordings are compressed for the web, so frame rate and gradients look slightly reduced. The real thing is smoother.