Breaking down the components of scrolly-telling for compelling narratives

In recent years, scrolly-telling has emerged as a powerful storytelling tool in the digital landscape that combines text, multimedia, and interactive design to create a visually stunning and engaging experience. It's perfect for long-form articles, data visualizations, or any complex narrative you want to convey. Scrollytelling puts the power in the user's hands, allowing them to control the pace and depth of their engagement, and it has proven to be an effective technique for enhancing user experience and improving retention rates.

Our product design team was tasked with leading the design effort for the flagship product detail page (PDP) in the launch of the new Eargo 6 hearing aids. To captivate and inform our audience, we chose to utilize scrolly-telling, a unique and immersive storytelling technique that combines multimedia elements and interactive design.

Unpacking the scrolly-telling toolbox

The following interactive web elements are foundational for creating exceptional scrolly-telling experiences.

• Parallax movement on scroll, for example, can add depth and dimension to a page by creating the illusion of different layers moving at different speeds.

• A scroll progress indicator lets users know how far they are in the story, keeping them engaged and informed.

• Reveal elements on scroll can add a sense of surprise and anticipation, as users uncover new information as they progress through the story.

• Horizontal scrolling can be used to convey a sense of exploration or to showcase a large amount of content in a visually engaging way.

• Position sticky is a powerful tool that can be used to create emphasis and draw attention to important elements.

• Navigation is another essential design element of scrolly-telling. Users should be able to navigate easily through the content, and the scrolling behavior should be smooth and intuitive. The use of anchor links and a sticky sidebar can provide users with a convenient way to navigate through the content and ensure that key information is always visible.

• The visual design of scrolly-telling is also critical. The design should be visually compelling and aesthetically pleasing, with a cohesive color scheme, typography, and layout. The use of imagery, graphics, and other visual elements should also enhance the narrative and help convey complex ideas.

It’s the story stupid

As digital product designers, we were all well versed in how to design for a front-end, css rendered responsive web page, but scrolly-telling is all about telling a story. It needs to be a clear and compelling narrative that resonates with the audience. The story should be well-structured, with a beginning, middle, and end, and should be presented in a way that captivates and engages the user.

Storyboarding posed a challenge for us as our expertise was primarily focused on solving feature requirements and enhancing user flows, rather than marketing. However, our marketing partners provided us with valuable customer research and analysis that allowed me to synthesize a solid approach and provide my team with the appropriate content to work with.

Bridging a narrative structure framework to the page goals

Building a narrative structure is essential to develop a story as it offers a framework to organize and present information, resulting in a clear and engaging narrative. It helps the audience to comprehend the story's context and the relationships between different elements, conveying information in a logical and compelling way while creating a sense of coherence and completeness.

The first step in building a narrative structure is to understand the customer, and my expertise in UX design allowed me to recognize what needed to be done to arrive at a compelling storyboard that would serve as input to my design team.

Customers seek out the information necessary to make their purchase decisions

The content audit, heuristic analysis, and user and stakeholder interviews that were sitting with the marketing team provided valuable insights into how people make purchase decisions regarding their hearing health, particularly when considering Eargo hearing aids. These findings led to further organization and the creation of archetypical personas based on how people sought out information in the hearing health product space.

Information-seekers go through phases and span these mindsets:

• Don’t know what you need to know: a customer who needs to understand a new and complex domain, but doesn’t have a specific question yet

• Exploratory: the customer has some idea of what they need to know, but may not know where to start to look

• Known item: they know what they want and may have a fairly good understanding of where to start

Across these 3 information seeker types, the following key user needs emerged:

1. I need to get educated on the domain itself

2. I’m doing product research with my specific questions

3. Why should I purchase Eargo hearing aids?

4. How can I dig into product details for comparison

5. I’m ready to make my purchase

Pinpointing user needs gets us closer to the page goals

With the empathy piece in place, we could start converging on the goals of the PDP (product detail page) itself based on the above 3 mindsets and the 5 user flows. Note that the first customer mindset is better handled earlier in the funnel and we can safely assume that for the most part, the customer who visits the product detail page at the very least has a pretty good idea of what they want but may still not have all their questions answered.

In addition, a customer consuming the PDP has most likely completed most of their domain exploration and has gotten through or is still in the process of getting their questions answered.

The narrative sweet spot is therefore to engage the user as to the why by presenting Eargo’s unique value proposition and further supporting that USP with the how by emphasizing the product's competitive advantage and highlighting its key attributes.

With the why and the how firmly established the rest of the page elements should roll up to these high-level page goals:

1. engagement, where the PDP needs to tell a story that makes users want to convert

2. further education with a benefits-driven narrative that helps people make decisions based on their desired outcomes

3. and conversion through company reputation, purchase & pricing options, FAQs, and cross-selling to comparable products should the current PDP falls short for some reason

The page goals can now drive the digital storyboards

Thanks to the narrative structure I followed, I was able to create the story elements that provided the necessary input to the product designers who were eager to begin working on the UX/UI of the PDP, but up until then were uncertain about what direction to take given that story writing is typically not a skill you’d find in a product designer’s direct skill set.

Design teams can often be left in a state of confusion as they attempt to anticipate the content necessary to inform their design decisions, and page content may be delayed until the client has reviewed preliminary page designs. For this flagship PDP project, this would not have been an option given that the nature of scrolly-telling is to use design and front-end behaviors to convey a series of panels that tell a compelling and interactive story. Therefore, I was pleased to be able to conduct this groundwork ahead of time, positioning my team for success. This process taught me a lot and was a valuable experience.

Great stories evolve from a solid design process

In the future, when a marketing design opportunity arises, I will know that incorporating scrolly-telling design elements thoughtfully requires a solid process that combines narrative structure, customer empathy, and page goals to achieve a unique and immersive storytelling experience that captivates and engages users.

Check out my portfolio case study, Product Design for an Ecommerce Brand Refresh, as I continued the UX/UI Design effort as Player/Coach.