Designing motion for millions of stock gifts

This post was originally published on Trade Republic's Medium page. We’ve republished it with their permission. Thanks, Trade Republic!

At Trade Republic, Christmas has always been a time to surprise and delight our users. This time, we decided to make Christmas quite special for our users by introducing Stock Gifting!

With our gifting feature, we wanted to inspire people to choose gifts that last beyond just one moment. A stock or ETF is more than just a gesture of appreciation — it’s an investment in a shared future.

I’ll share a sneak peek into our design process and how we harnessed the power of Rive and Play to craft an interactive, delightful gifting experience that enabled our users to gift over 1,000,000 stocks worth more than 50 million euros, in 2 months since launch!

Tenets

Before diving into the experience, we focused on defining principles that would guide not just design decisions, but also product and engineering choices.

1. Effortless — Users create a gift, and we handle the rest. Despite its complexity behind the scenes, the experience should feel simple and intuitive to boost adoption.

2. Mimicking the Real World — The experience should be personal, meaningful, and delightful. Thoughtful design and product decisions make it feel truly special for both the gifter and the recipient.

3. Scalability & Efficiency — Building a scalable system that minimizes redundant work for engineers while enabling designers to take on more of the heavy lifting.

Creating and delivering the gift

We understood that gifting a stock would be similar to giving a digital gift voucher — something intangible that can’t be physically handed over.

When gifting, we often want to wrap the gift and make sure it would be exciting enough to unwrap. We also tend to include a personal note or greeting.

So after the user selected a stock and the gift amount, they would be able to preview their gift, along with the personal message they’ve written, before placing a gift order.

As a gifter, there’s a unique joy in physically delivering a gift and witnessing the receiver’s reaction firsthand. Their happiness is what we truly cherish, and sometimes, the surprise of an unexpected gift makes the moment even more special.

We gave gifters the flexibility to choose how they wanted to deliver their gift, offering three thoughtful options:

1. Send the gift directly to the recipient via email.

2. Schedule the gift for delivery on a specific day, such as a birthday, anniversary, or any special occasion.

3. Download and print the gift as a voucher, allowing for a personal, hand-delivered experience — perhaps even alongside a physical gift.

When choosing to print the voucher, the gifter will receive an email with a link to download the PDF. They can also conveniently access the gift voucher directly within the app.

While the initial prototype in Figma helped get the designs and flows approved, I wanted to push further and create an interactive, dynamic prototype that felt truly real.

Enter Play — A prototyping tool I’ve recently fallen in love with.

This approach allowed me to share the prototype directly with colleagues in the office and get instant feedback.

I could quickly identify areas of confusion, ask questions to gauge their understanding, and uncover how they felt about the experience. With their insights, I could refine the prototype, iterate on the design, and return for additional feedback. The process was truly remarkable.

Accepting the gift

We set out to create a magical experience for users, understanding that while many ways exist to replicate the excitement of gift opening,

Factors such as file sizes, device OS capabilities, lower-end devices, and the app’s performance all needed to be carefully considered. The challenge was to craft a solution that balanced user expectations with these technical limitations.

While a simple static reveal or a fun confetti animation could have sufficed, we wanted to create something more meaningful. There’s always a sense of anticipation, suspense, and excitement when opening a wrapped gift, and we wanted users to feel the same when accepting a digital gift.

For example, when we launched the Trade Republic Card, the experience was highly interactive, allowing users to flip the card and see their names printed on the back.

Similarly, we wanted the gift reveal to be an interactive experience — something users actively engage with, rather than simply seeing the gift unwrapped.

I began searching for inspiration online and came across a few examples, which were similar to what I had in mind.

There were 4 aspects that I had to consider to bring our gift reveal animation to life:

• Interactivity — Ensuring users can interact with the experience and not just watch an animation.

• Raster Graphics — Working within images instead of vectors.

• Minimal Effort for Engineers — Creating a solution that wouldn’t require excessive engineering resources.

• Scalable Solution — This would have to work seamlessly across all device types.

As a long-time user of Lottie since it was introduced, right off the bat I knew that Lottie wouldn’t be able to meet our requirements.

That’s when I decided to explore Rive — or as I like to call it, Lottie on steroids!

Time to Rive it

I started by collaborating with one of our engineers, sharing a rough prototype of my vision and exploring how Rive could bring it to life. Despite some challenges, things were shaping up well. Meanwhile, the Creative team and I worked on visuals, export requirements, animation sequences, and file formats to refine the experience.

Once we had initial renders, I built a prototype in Play to secure approval and provide engineers with a clear blueprint. After countless iterations — because that’s just how design works — we finally arrived at the polished experience.

Setting up the Timelines and State Machine in Rive seemed straightforward. But there were a lot of aspects that I needed to get a deeper understanding of.

I ran almost 20–30 test exports from Rive, experimenting to optimize the file size as much as possible without compromising the experience — all while staying within the technical constraints.This was an incredible challenge, requiring constant collaboration with Engineers and the Creative team to strike the right balance.

We used Maya to design and animate the card, ensuring a high-resolution export to preserve the textures and lighting effects. From there, we imported the animation into After Effects to optimize the resolution for mobile devices without causing pixelation.

Play’s ability to import Rive files was a game-changer. It allowed me to quickly test every exported .riv file directly on my iPhone, without needing any involvement from engineers.

Tips to optimise your Rive design

When working with image sequences in Rive, file sizes can quickly become unwieldy. Through my extensive testing and trial and error, I discovered a few tips to optimize your file size effectively:

1. Image File Size Matters Most — The size of your images is the single most important factor influencing the .riv file size. Optimize these first.

2. Artboard Size and State Machine Complexity — Shrinking the artboard size in Rive or simplifying the State Machine did not affect the file size.

3. Double Compression Workflow — After exporting the image sequence from After Effects, we compressed it using ImageOptim, followed by an additional compression step within Rive. Using WebP at 75% (Rive’s default) worked incredibly well. However, image quality can vary depending on textures and color saturation, so adjust the compression level for the best balance.

4. Lower Frame Rates — For longer animations, exporting at 24fps or 30fps instead of 60fps can dramatically reduce the .riv file size by halving the number of frames. We chose to export at 30fps.

5. Manage Load Times — Large file sizes may lead to longer load times. I used Play to test this. I recommend implementing loading states, explainer screens, or similar patterns to keep users engaged while the .riv file loads in the background.

6. Low-End Device Optimization — To prevent crashes on lower-end devices, we created a trimmed-down version of the animation specifically tailored for those devices.

By following these steps, you can effectively balance file size, performance, and user experience without sacrificing quality.

As a product designer, it is your job to ship the best you can given the technical constraints set. It’s all about how much you push but still work within the constraints by using the tools at your disposal.

Bonus: the lottery

To generate excitement and boost the adoption of the gifting feature, we introduced a lottery as part of our Christmas campaign. Anyone who gifted a stock was automatically entered for a chance to win up to €10,000 in stocks. Since the campaign was only running for a few weeks, we aimed to make the experience as engaging and thrilling as possible.

Building this feature at scale has made it effortless to repurpose for future campaigns or even for gifting our own employees.With just new assets and an updated .riv file, engineers can implement it with minimal effort for any upcoming campaign.

Inside Trade Republic

Learn more about the vision behind building the Stock Gifting feature!