ueno wrapped: Breaking the Mold
Category
Motion Design
About Project
The Wrapped project was a bold challenge: translating financial data into an emotional, visually compelling experience. It turned insights into an interactive storytelling piece that felt both personal and dynamic. Balancing structure and creativity, we pushed the boundaries of our Design System to craft a journey that was not just informative, but truly memorable.
Team
1 Design Ops 🙋🏻♀️
2 Product Designers
3 Developers
Content
Visual Identity
Animations
Functionability
Handoff
Tools
Figma
After Effects
Duration
3 weeks
Creating a product that sparks emotion sometimes means breaking the mold—and that means taking the risk of not knowing how it will turn out.
In November 2024, one of our Product Designers reached out to ask about our brand identity guidelines. The goal? To bring these guidelines to the app’s year-in-review feature. Think of it like Spotify Wrapped, but designed to give users relevant insights into their financial journey throughout the year.
My role as a designer is within the Design Ops team. Today, we’re six people responsible for the Design System of an entire vertical, supporting 20 Product Designers, collaborating with developers, and documenting processes and brand identity guidelines. That last point is where I’ll focus in this story because, while I’m a total Figma and library nerd, sometimes I need to get involved in projects that push me outside my comfort zone.
The team working on this initiative included a Product Designer, a UX Content Designer, a Product Manager, a front-end developer, two back-end developers, and an Engineering Manager.
Before bringing me in, they had already built out a storytelling framework divided into thematic sections, each highlighting a different product within the app.
Where to begin? What visual style would work best for this kind of piece? Should I base it on components and assets from the Design System? Or should it be something completely new and disruptive?
Yes, we knew the Design System could simplify the work—but was that enough for a piece that needed to evoke emotion? Aesthetics couldn’t just be decoration; they had to be the factor that elevated the project from good to unforgettable. This was an opportunity to prove that visual design and motion could go beyond functionality and create a unique experience for users.
It was time to question whether sacrificing a bit of consistency was worth it in exchange for emotional impact. Blank Canvas.
I dove into references—not just to explore the visual aspects that define these types of pieces but also to understand how animation could transform nearly three minutes into an experience so dynamic it would feel like just a few seconds.
Rappi, YouTube Music, Reddit, PedidosYa, Mercado Pago, and, of course, Spotify. Most of them shared common elements: bold typography and expanded color palettes that fit seamlessly with the rest of the product’s visual style. Exploring these references helped me realize that, even with rules and limitations, there’s always room to push boundaries and break things.
The goal was to create something dynamic and engaging—something that didn’t just display data but turned it into a visual story that connected with audiences in Paraguay. We wanted to reflect the brand’s approachable spirit, using imagery and animations that resonated with users’ daily lives and made them feel valued.
That’s when I confirmed that the best approach was to step outside the Design System’s structure. Sometimes, we need to explore without restrictions and break out of the default mindset of “What can we do with what we have?” and instead ask, “What’s the best possible solution?”.
And with a blank canvas and the clock ticking, the challenge began: creating a year-in-review that didn’t just inform but also moved people.
With that foundation set, the next step was to bring the visual style into the wireframes containing the final storytelling. It wasn’t just about structuring screens—it was about iterating until each composition felt balanced and made sense within the narrative.
With that foundation set, the next step was to bring the visual style into the wireframes containing the final storytelling. It wasn’t just about structuring screens—it was about iterating until each composition felt balanced and made sense within the narrative.
Once the static screens were ready, the focus shifted to validation and refinements. If you work in UX, you know that the next step is the critical moment. The development handoff—the point where you find out whether your vision is feasible or if you need to rethink everything from scratch.
We knew what we wanted to achieve, but the key was building a bridge of trust with the team. How could we ensure high-quality animations without compromising deadlines or performance?
We presented the proposal and aligned on key decisions that made for an efficient workflow:
We would replicate Instagram Stories’ behavior, including forward and backward navigation.
Animations would be Lottie files (After Effects animations exported as JSON). This allowed us to use animated backgrounds for each story segment without impacting performance.
Animating isn’t the same as designing a static screen. Something as simple as an underline can take a surprising amount of time. But it’s in those details that design comes to life.
I animated a total of 26 After Effects files, constantly balancing creativity with technical limitations.
In the daily grind, motion is often seen as a nice to have, an extra. But underestimating it means overlooking its real power: not only does it enhance functionality and usability, but it also builds a perception of quality, robustness, and attention to detail.
For me, motion is the layer that humanizes interactions—natural, fluid, and engaging movements that give personality to the experience. Because in design, motion is what turns something acceptable into something unforgettable.
The Lotties were done, and development was racing against the clock to meet the tight deadlines. But something was missing.
How could we make sure people actually wanted to check out this year-in-review? How could we make it stand out in the app’s UI so it couldn’t be ignored?
That question led us to design a new component—one of my favorite parts of the entire project because it combined two things I love most: components and motion.
Final Result
We went through various stages of Figma library organization to align with Figma's new features.Cam Worboys, Head of Design at Cash App, summed it up perfectly:
Focusing on details is what makes the difference in a sea of products that often look the same. Sometimes, breaking structures doesn’t just create excitement—it builds a genuine connection with people.
The year-in-review was a success: nearly 300,000 users explored it and took advantage of the special offers at the end. During the launch weekend, we hit a historic record in sign-ups for Scheduled Savings and loans—two of the key offers featured in the recap.
