Last week, I presented at React Nexus about the things I’ve learned while building payment experiences.
The response was honestly more than I expected.
People connected with the stories, the incidents, and all the complexity hidden behind something as simple as clicking a payment button.
But a lot of people also came up to me after the talk and spoke about the deck.
They told me they loved the characters, the colors, and how the slides made the talk easy to follow.
That made me really happy because I had spent a ridiculous amount of time thinking about those slides.
So here is the slightly messy behind-the-scenes story of how the deck came together.
You can watch the complete talk here: Talk Link
It started with my React India talk
The idea actually goes back to React India 2024.
I was presenting remotely about building a color system at scale, based on the work we had done for Razorpay Checkout.
Around the same time, Inside Out 2 had been released.
I loved how every character represented an emotion.
You did not need a long explanation to understand what they were feeling. You could just look at them and get it.
That gave me an idea.
What if the characters in my deck could make people feel the point before I even explained it?
I added expressive characters to the slides, along with bright pops of color.
And it worked.
The deck felt more alive. It also became much easier to follow.
It was no longer just text explaining a case study. Every slide had a mood.
That idea stayed somewhere in my head.
Fast forward to React Nexus
This year, I was speaking about payments.
And payments are not the easiest thing to explain.
The customer sees a button.
Behind that button, there could be payment authorization, fraud checks, redirects, authentication, browser limitations, retries, failures, and many systems talking to each other.
I knew that if I simply put all of this on slides, the talk could become heavy very quickly.
I did not want people to feel lost halfway through it.
I wanted the talk to feel like a story.
I wanted every slide to communicate one clear idea.
And I wanted the audience to feel something while looking at it.
That is where my character hunt began.
The first few ideas did not work
I first tried creating a girl developer character who could guide the audience through the talk.
I did not like it.
The character felt too generic. She could have belonged to almost any technical presentation.
Then I asked AI to create something inspired by the emotional storytelling of Inside Out.
That gave me a set of colorful, fluffy characters that I started calling “Puffers.”
They were cute.
But I did not like them either.
I tried a few more shapes, styles, expressions, and colors.
Some felt too childish. Some looked interesting on their own but did not feel right for the talk. Nothing was clicking.
Eventually, I gave up on finding the characters.
I was stuck, and I had no idea what the visual style of the deck should be.
So I decided to stop thinking about it for a while and focus on the content first.
And strangely, that is when everything started coming together.
The slide that helped me find the direction
I wanted the first few slides of the talk to immediately show how complex payment frontend work actually is.
People often see a payment button and think,
“It is just a button. How complicated could it be?”
I wanted to challenge that idea right at the beginning.
My first version of the slide was just text and boxes.
It explained the point, but it was not catchy. It did not feel like the opening of a story.
So I started experimenting.
I tried different layouts.
Then I tried turning the idea into a visual.
I created different versions of payment buttons, but none of them felt quite right.
Finally, I created a small payment button carrying a huge amount of weight.
And for the first time, I looked at the slide and thought:
“Yes, this is it.”
To the customer, “Place Order” is just one button.
But that button carries money.
It carries trust.
It carries risk.
And it carries the responsibility of several systems working correctly at exactly the right moment.
That one visual explained the feeling much better than the text I had started with.
And that is when things finally started coming together.
I did not need to bring random characters into the world of payments.
The world of payments already had its own characters.
Buttons.
Credit cards.
Wallets.
Shields.
I only needed to give them expressions, personalities, and emotions.
From one button to a family of characters
Once I had that button, everything started becoming easier.
After many experiments with GPT-5.5, I found a visual style that finally felt right.
Then I started creating more characters from objects that were already part of the payment journey.
A nervous credit card could show uncertainty.
A shield could represent protection and safety.
A button carrying weight could show the pressure behind a single click.
Here are a few of my favourite character sets from the deck.
Characters walking away could represent people leaving a broken or confusing payment flow.
The same characters coming back could show recovery and how a good experience can bring people back into the journey.
At that point, they were no longer there just because they looked cute.
They had a job.
They were helping me tell the story.
Sometimes, people could understand the emotion of a slide before I even started explaining it.
That was exactly what I had wanted.
Finding the right words was also part of the design
The illustrations were only one part of the work.
I also spent a lot of time thinking about the words.
For a long time, I was using the word “guardrails” throughout the presentation.
It was the technically correct word.
But every time I looked at it, it felt heavy.
It sounded like something from an architecture document.
It did not feel like the kind of word that would help someone connect emotionally with the talk.
I tried replacing it with other words, but nothing felt much better.
Eventually, I stopped trying to find another technical word.
Instead, I started framing the talk as a story.
What happens before someone clicks the button?
What could go wrong after the click?
What does the interface do when something fails?
Can the user recover?
Can they safely try again?
And after something goes wrong, how do we earn their trust back?
I was still talking about guardrails, recovery, safe fallbacks, and resilient payment experiences.
I was just talking about them in a way that felt more familiar and relatable.
That small shift helped me a lot.
Sometimes, the problem is not that the topic is too technical.
Sometimes, we are simply entering the topic through the heaviest possible words.
Putting the final deck together
Once the characters and the story started coming together, I used Canva to build the final deck.
I added doodles, tried different layouts, played with colors, and kept moving things around until each slide felt right.
There was no perfect system behind every decision.
Sometimes, I just knew that a slide felt too crowded.
Sometimes, a character was taking attention away from the actual point.
Sometimes, a visual looked nice but had no real purpose.
I kept asking myself:
Does this help explain the idea?
Does it make the slide easier to follow?
Does it add the emotion I want people to feel?
Or am I adding it only because it looks nice?
A lot of things were removed.
And I think removing things was as important as creating them.
Your audience’s eyes matter too
A slide can look completely fine on your laptop and feel painfully bright inside a dark auditorium.
Pure white can almost feel like a flashlight whenever the slide changes. And when the audience has already spent hours looking at screens, that brightness can become tiring very quickly.
You can use a dark theme with good contrast, but you do not always have to go fully dark.
For this deck, I chose a warm off-white background with a slight orange tint.
Hex code: #fdfbf2
It still felt bright and clean, but was much softer on the eyes than pure white.
When you have enough time, it is worth creating two versions of your deck - one for a dark auditorium and another for a brighter room. You can then choose the version that works best based on the venue, projector, and lighting.
I did not have enough time to create two versions for this talk, so I chose a background that I felt could work well in both settings.
My rule of thumb is simple:
The audience will be looking at your slides for the next thirty or forty minutes.
Their eyes deserve some consideration too.
What you should take away from this
The biggest takeaway is not which tool created the best character or which color made the deck look prettier.
It is this:
A visual starts working when it stops being decoration and starts helping you explain something.
The Puffers were cute, but they did not belong to the story.
The payment button did.
It carried the pressure, trust, and complexity I wanted the audience to understand. Once I found that visual, the rest of the deck slowly started finding its own language too.
There were plenty of rejected ideas along the way. I changed my mind, removed slides I had spent hours creating, and often felt completely lost.
The difficult part was deciding what truly belonged.
What helped the story?
What made the idea easier to understand?
And what needed to be removed, even if it looked good?
That is the part only you can decide for your presentation.
Designing this deck became one of my favourite parts of preparing for React Nexus. And when people told me that it made a complex topic easier to follow, all the experiments felt worth it.
The deck was never meant to be the star of the talk.
It was there to help the story reach people.
And that is probably the best thing your presentation deck can do.
You can watch the complete React Nexus talk here: Talk Link
Complete slide deck on LinkedIn: LinkedIn
Top comments (0)