Liquide’s Flowback 2024 — A Recap designed in a Day
Designed Liquide’s year-end recap in under 12 hours, which gained 40k+ views and 7k+ shares.
My role:
Led end-to-end design
Timeline:
32 hours (12 hours for recap slides)
Platform:
Liquide App (FinTech, ~4M+ users)
Wait, What’s liquide?
It’s a stock market app that helps you invest smarter, track your portfolio, find top stocks, and get expert insights, analyse your trades, and even invest directly using your existing broker, all in one place.
It’s a stock market app that helps you invest smarter, track your portfolio, find top stocks, and get expert insights, analyse your trades, and even invest directly using your existing broker, all in one place.
It’s a stock market app that helps you invest smarter, track your portfolio, find top stocks, and get expert insights, analyse your trades, and even invest directly using your existing broker, all in one place.
Now let’s start with our story.
How It All Began
It’s around 6:00 PM, Mid-December 2024. I was wrapping up another task when Saurav (my senior + founder of STUDUO) dropped in with a quick update:
It’s around 6:00 PM, Mid-December 2024. I was wrapping up another task when Saurav (my senior + founder of STUDUO) dropped in with a quick update:
It’s around 6:00 PM, Mid-December 2024. I was wrapping up another task when Saurav (my senior + founder of STUDUO) dropped in with a quick update:
“We’ve got a last-minute request from Liquide. It’s urgent, needs to get it done by tomorrow.”
“We’ve got a last-minute request from Liquide. It’s urgent, needs to get it done by tomorrow.”
“We’ve got a last-minute request from Liquide. It’s urgent, needs to get it done by tomorrow.”
The ask? (Requirements)
To design a complete yearly recap experience called “flowback” for Liquide.
To design a complete yearly recap experience called “flowback” for Liquide.
To design a complete yearly recap experience called “flowback” for Liquide.
Something engaging, nostalgic, and clean.
Something engaging, nostalgic, and clean.
Something engaging, nostalgic, and clean.
The twist? (Challenge)
2023 (Last year)
User base was more younger audience
Design was too bold, vibrant, &
GenZ friendly
User base was more younger audience
Design was too bold, vibrant, &
GenZ friendly
User base was more younger audience
Design was too bold, vibrant, &
GenZ friendly
Change
2024 (This year)
User base shifted to more mature traders
Design experience need to be more calmer & data-driven
User base shifted to more mature traders
Design experience need to be more calmer & data-driven
User base shifted to more mature traders
Design experience need to be more calmer & data-driven
Change
How I Didn’t ( :Did ) Panic (The Plan)
With no time to waste, I quickly gathered:
With no time to waste, I quickly gathered:
With no time to waste, I quickly gathered:
A list of all the data points to be shown (net worth growth, most profitable stock, top trades, etc.).
A list of all the data points to be shown (net worth growth, most profitable stock, top trades, etc.).
A list of all the data points to be shown (net worth growth, most profitable stock, top trades, etc.).
It was easy enough as I already had the last year’s recap, and data points are not changing much.
It was easy enough as I already had the last year’s recap, and data points are not changing much.
It was easy enough as I already had the last year’s recap, and data points are not changing much.
Then, I dove into what the internet had to offer:
Then, I dove into what the internet had to offer:
Then, I dove into what the internet had to offer:
Swiggy, Zomato, Spotify Wrapped, Strava, Groww, Duolingo, everyone had some version of a yearly recap.
Swiggy, Zomato, Spotify Wrapped, Strava, Groww, Duolingo, everyone had some version of a yearly recap.
Swiggy, Zomato, Spotify Wrapped, Strava, Groww, Duolingo, everyone had some version of a yearly recap.
I grabbed screenshots, compared flows, and socked in inspirations.
I grabbed screenshots, compared flows, and socked in inspirations.
I grabbed screenshots, compared flows, and socked in inspirations.
Lego Phase - The building blocks
Before I went wild with design, I built a simple baseline grid for the recap screens.
A simple guide that told me where to stop, what space to respect, and how to keep everything tidy. (no chopped-off content, consistent across all screen sizes)
A simple guide that told me where to stop, what space to respect, and how to keep everything tidy. (no chopped-off content, consistent across all screen sizes)
A simple guide that told me where to stop, what space to respect, and how to keep everything tidy. (no chopped-off content, consistent across all screen sizes)
Then, I set a few design rules to save myself from endless guesswork and make things quicker.
Then, I set a few design rules to save myself from endless guesswork and make things quicker.
Then, I set a few design rules to save myself from endless guesswork and make things quicker.
Each slides will have,
Each slides will have,
Each slides will have,
Each screen = One key number + short description text
Used simple icons or mini graphics to support the story
Where relevant, used color cues (green for gains, red for losses)
Alternated layouts to avoid repetition and keep it dynamic
Each screen = One key number + short description text
Used simple icons or mini graphics to support the story
Where relevant, used color cues (green for gains, red for losses)
Alternated layouts to avoid repetition and keep it dynamic
Each screen = One key number + short description text
Used simple icons or mini graphics to support the story
Where relevant, used color cues (green for gains, red for losses)
Alternated layouts to avoid repetition and keep it dynamic
With that in place, I just breezed through the slides — brick by brick, no second-guessing.
With that in place, I just breezed through the slides — brick by brick, no second-guessing.
With that in place, I just breezed through the slides — brick by brick, no second-guessing.
Setting the Tone
I started with the cover screen, the one that would set the tone for the entire flow. After 2-3 fast variations, one concept clicked:
I started with the cover screen, the one that would set the tone for the entire flow. After 2-3 fast variations, one concept clicked:
I started with the cover screen, the one that would set the tone for the entire flow. After 2-3 fast variations, one concept clicked:
Simple typography & Icon
Simple typography & Icon
Simple typography & Icon
Gentle Inner shadows
Gentle Inner shadows
Gentle Inner shadows
A subtle gradient
A subtle gradient
A subtle gradient
This visual identity became the anchor for the rest of the recap.
This visual identity became the anchor for the rest of the recap.
This visual identity became the anchor for the rest of the recap.
Executing at Speed (The 4th Gear)
Slide after slide, the flow started to come alive. In just a few hours I designed all recap screens and structured the visual journey — the experience feel personal and share-worthy!
Slide after slide, the flow started to come alive. In just a few hours I designed all recap screens and structured the visual journey — the experience feel personal and share-worthy!
Slide after slide, the flow started to come alive. In just a few hours I designed all recap screens and structured the visual journey — the experience feel personal and share-worthy!
From In-App to Out There
Once the recap flow was good to go, I mapped out all the ways users could enter the experience. (like setting up cool doors into a fun party.)
Once the recap flow was good to go, I mapped out all the ways users could enter the experience. (like setting up cool doors into a fun party.)
Once the recap flow was good to go, I mapped out all the ways users could enter the experience. (like setting up cool doors into a fun party.)
I also crafted the sharing flow — making sure it looked neat when users shares flowback and had a friendly message that encourages them to check!
I also crafted the sharing flow — making sure it looked neat when users shares flowback and had a friendly message that encourages them to check!
I also crafted the sharing flow — making sure it looked neat when users shares flowback and had a friendly message that encourages them to check!
This helped ensure the recap was easy to access and fun to share.
This helped ensure the recap was easy to access and fun to share.
This helped ensure the recap was easy to access and fun to share.
A Last-Minute Trailer Too?
Just when I thought we were done, the PM asked:
Just when I thought we were done, the PM asked:
Just when I thought we were done, the PM asked:
“Can we also make a short animated teaser for social media?”
“Can we also make a short animated teaser for social media?”
“Can we also make a short animated teaser for social media?”
No problem.
No problem.
No problem.
I jumped into Jitter, and within 4 hours, created a teaser video to build hype. Simple, clean animation — aligned with the visual identity we set for the Flowback.
I jumped into Jitter, and within 4 hours, created a teaser video to build hype. Simple, clean animation — aligned with the visual identity we set for the Flowback.
I jumped into Jitter, and within 4 hours, created a teaser video to build hype. Simple, clean animation — aligned with the visual identity we set for the Flowback.
The Results
Even though the recap was live for just 10 days, here’s what happened:
Even though the recap was live for just 10 days, here’s what happened:
Even though the recap was live for just 10 days, here’s what happened:
40,000+ Views
Users viewed their recap
Users viewed their recap
7,000+ Shares
Users shared it with peers
Users shared it with peers
Learnings (Big & Small)
Speed + Structure = Superpower
Speed + Structure = Superpower
Speed + Structure = Superpower
Setting a clear structure early helped me move fast without compromising on quality.
Setting a clear structure early helped me move fast without compromising on quality.
Setting a clear structure early helped me move fast without compromising on quality.
Ask for Help (Smartly)
Ask for Help (Smartly)
Ask for Help (Smartly)
A few quick feedback loops with Saurav, Akash, and Yuvraj saved hours of guesswork.
A few quick feedback loops with Saurav, Akash, and Yuvraj saved hours of guesswork.
A few quick feedback loops with Saurav, Akash, and Yuvraj saved hours of guesswork.
Never Skip the Grid
Never Skip the Grid
Never Skip the Grid
That baseline grid kept things clean across screen sizes and made handoff smoother.
That baseline grid kept things clean across screen sizes and made handoff smoother.
That baseline grid kept things clean across screen sizes and made handoff smoother.
Final Thoughts
This was one of those “blink-and-it’s-done” projects. But it’s also one I’m super proud of, not just because of the speed, but because the end result felt good and genuinely useful for Liquide’s growing user base.
This was one of those “blink-and-it’s-done” projects. But it’s also one I’m super proud of, not just because of the speed, but because the end result felt good and genuinely useful for Liquide’s growing user base.
This was one of those “blink-and-it’s-done” projects. But it’s also one I’m super proud of, not just because of the speed, but because the end result felt good and genuinely useful for Liquide’s growing user base.
Sure, if I had more time, I would’ve explored animated slides and micro-interactions. But in just 12 hours? I gave it everything I had, and I loved every second of it.
Sure, if I had more time, I would’ve explored animated slides and micro-interactions. But in just 12 hours? I gave it everything I had, and I loved every second of it.
Sure, if I had more time, I would’ve explored animated slides and micro-interactions. But in just 12 hours? I gave it everything I had, and I loved every second of it.
after all, there’s magic in designing something in flow , pun intended! 😉
after all, there’s magic in designing something in flow , pun intended! 😉
after all, there’s magic in designing something in flow , pun intended! 😉
Upnext
Upnext
Upnext
Projects
Projects
Projects
Let's
Ketch-up!
Let's
Ketch-up!
Let's
Ketch-up!