Behind the Arcade: Ripe's storyboarding process for creating a homepage demo

This post comes from a conversation I had with Ian Hazelton from Ripe. We discussed the process he led his team through to create their first Arcade, which would sit prominently on their homepage.

Ripe is an in-product sales platform that enables teams to engage and convert self-serve users.

‍

When Ripe’s Head of Design, Ian Hazelton, was in the early process of redesigning their website, a core consideration was how to showcase their product visually. For the Swedish startup, creating an experience that allowed prospects to understand and experience their product was imperative, as their product (like most software companies) can be difficult to explain.

He also observed that many other SaaS websites used videos… but he suspected they were not converting as effectively as teams expected. He recognized his own behavior and said, “Personally, I rarely click on product videos. There’s a fairly high degree of friction involved. ‘How long is this going to take’? ‘Where are my headphones’? etc.”

Knowing this, Ian knew Ripe needed a solution that was both engaging and provided the most crucial information to a prospect — quickly. One of the main factors in Ripe’s decision to use Arcade was because, “for a viewer, the friction in starting an Arcade almost zero. It’s a big, juicy button that people want to click on!”

Arcade’s CEO, Caroline, wrote about this concept in a recent blog post: “I see these [juice] as the surprise and delight moments — moments where you can bring playfulness into your product.”

‍

Bring out the storyboard.

One of the most common things we hear from customers is that the most time-consuming part of creating a great demo is the story planning that happens before your press record.

‍

Here are Ripe’s four steps to go from idea —> published Arcade:

‍

Step 1: Identify the key ‘aha’ moments.

Before jumping into solution mode, Ian and his team took a step back to ask:

• What are the key ‘aha’ moments of our product?
• What are we saying that will quickly pique people’s interest?

‍

They needed to answer these two questions first, as the answers would be the foundation for the next step - storyboarding.

“Whenever you’re creating communications, it’s always tempting to go overboard on the context. For example, the first version of everyone’s landing page is probably 3x longer than it should be. We knew our Arcade should be more like an elevator pitch.”

‍

‍

Step 2: Map out the ideal user journey.

The word “storyboard” is usually thought of in relation to a play, television, or movie script… not product demos. But ultimately, you’re telling a story and outlining the start, middle, and end.

“We didn’t want to over-explain. It’s a golden rule of cinema that if your audience needs to know something, you should show them, not explain it to them.
Show, don’t tell.”

For this step, the Ripe team went to the (virtual) drawing board (FigJam) to start planning the ideal demo flow. The output of step 1 can be seen in the three pink sticky notes. They created “chapters,” which were the foundation of the demo.

‍

In Ripe’s case, the ‘aha’ moments they wanted to showcase were:

• Receiving a Ripe lead notification
• Displaying the smart widget
• Scheduling a meeting asynchronously

‍

‍

Step 3: Think of it as a presentation.

Once they completed this portion of the brainstorming session, it was time to trim it down and then trim some more.

“We tried to think of it as though we were in an elevator with a potential customer. 20 seconds and 10 slides to explain what Ripe is and how it can help their product-led growth business in the modern world.”

As this was their first time creating a demo with Arcade, framing it through the lens of something familiar (a Keynote presentation) was helpful to get the team on the same page and start to think about the actual steps going from 1 to 2 to 3, etc.

‍

‍

Step 4: Ask what’s on the screen.

The final step is about shifting from ideas to execution. Ian created assets to be included in the Arcade - including screen recordings and some animation - which were layered with Arcade features like Hotspots, Pan, Zoom, and Chapters.

The whole process took Ian and his team the best part of a day to complete, and it was a great forcing function for thinking through and aligning on what they wanted to say about Ripe.

‍

‍

For any company, your homepage is arguably the most important place to tell your story quickly and succinctly. Attention spans are short, and you need to convey your value quickly and make it engaging (and even playful!)

‍

When asked if he had any advice for other teams starting this process, he said:

“Treat the whole process like a mini workshop. Get all the right people together and go through the story-boarding process of sticky notes, and dot-voting. Align on the key message. Decide on what’s essential to tell the story. Be consistent with your tone of voice. Within the first few slides, you should introduce the audience to the idea, surprise & delight them. Get them excited. After that, dive into the necessary details.”

If you’re reading this and have no idea where to start, follow this four-step process and check out Ripe’s website for inspiration!

‍