Kamran Kalantari EP.03 / 05
EP.03 — Motion · Design system · UX writing · 2024

WALLEY PACKAGING ANIMATED PAYMENT FLOWS FOR EVERY NORDIC MARKET

A series of animated videos that visually explain Walley's payment flows across all its products, from pre-purchase to post-purchase, making the processes easy to understand for internal training and for sales presentations to customers in different Nordic markets.

Client
Walley — modular payment solutions for online retailers
Role
UX Designer
Engagement
6 months
Year
2024
Laptop on an orange background showing Walley's direct bank transfer process as five mobile screens connected by arrows.
Direct bank transfer

Five screens, one story. The flow exactly as it plays in the finished video.

Client

Walley is a Swedish fintech company that provides modular payment solutions for online retailers and merchants. Its checkout adapts to the needs of different businesses and supports a wide range of payment methods. Beyond payment processing, Walley offers strategic insights and tools to help businesses optimise their sales channels and build customer relationships.

Challenge

Sales couldn't show what a customer in Oslo would actually see.

As Walley expanded into more Nordic markets, English and Swedish interfaces were no longer sufficient. Each country needed translation into the local language and support for unique, region-specific payment methods.

Regional sales teams struggled to demonstrate the checkout to potential business customers. Existing material couldn't reflect the combinations of language and payment options a customer would experience in their own market, and it often took a live demo of a real payment to make the interactions understood.

Before Walley's value could be communicated effectively, the diverse purchase flows had to be showcased in a way that was both intuitive and locally relevant.

Five Trustly screens in sequence: select bank account, loading, BankID identification, waiting for approval, and amount confirmation.
Trustly, step by step

Select an account, identify with BankID, approve, confirm. Each frame is a beat in the animation.

Trustly account selection screen listing Handelsbanken, Swedbank, SEB and 'use another account', with a Continue button.
Choosing an account

Real banks and real payment terms, recreated inside Walley's own design system.

Trustly confirmation screen showing the amount 299 kr, the selected checking account, and a Continue button.
Confirming the amount

The last screen before approval, where the number has to be unmistakable.

Approach
  1. Worked closely with stakeholders and the sales teams to define the target audience and understand their needs.
  2. Recreated third-party payment options (Swish, Vipps, Trustly and MobilePay) inside Walley's own design system, so every flow felt consistent.
  3. Designed an animated video per payment method, clearly illustrating each interaction throughout the payment process. Because the videos were made for sales presentations, UX writing carried a lot of the weight: every step had to read instantly.
  4. Collaborated with sales representatives in other regions to localise the videos, making sure interfaces and messaging were accurately translated.
Walley checkout on a phone: 'Your details' with name and delivery address, then 'When would you like to pay?' with Pay now and After delivery options.
Your details

Saved identity and delivery address, so the flow opens with recognition rather than a form.

Walley checkout on a phone with 'After delivery' selected: pay within 14 days or in two months, and a Finalize purchase button.
Pay after delivery

Invoice or instalments. The option merchants ask about most in a pitch.

Three phone screens: choose Swish as payment method, open the Swish app on this or another device, and an order confirmation with a thumbs-up feedback prompt.
The Swish hand-off

Pay, jump out to the Swish app, land back on a confirmation. The part that was hardest to explain in a live demo.

Process diagram: a question mark leads through diverge and converge phases, with a loop back labelled 'did not pass validation', ending in a finished output.
Diverge, converge, validate

Flows that didn't pass validation looped back before any animation work began.

Outcome

Entire OKRs are now built around the videos.

The result was a full library of animated videos covering all of Walley's payment solutions, usable for education and for client demos. Walley was so pleased with them that whole OKRs are now centred on the videos, establishing motion as the new standard for presenting products internally and to future customers.

Because so many digital assets were created along the way, Walley's Figma design library was expanded with modules that can be reused in future development. I also built ready-made templates for each product, so new videos with customised narration can be produced with minimal time.

Visit walley.se ↗

What the client said
“Kamran delivered clear, well-crafted animations and incorporated our requests seamlessly.”
Head of Product & Tech — Walley