Immersive Storytelling

Featured

Overview

This case study examines common themes in immersive storytelling and digital experiences. These projects were conceptual and creative, deviating from traditional site structures and using micro-interactions to enhance engagement.

Responsibilities

UX Design: UI, page layouts
Visual Design Lead
Design Presentations
Developer Collaboration
Workshop Facilitation
Quality Assurance Testing

Goals

Encourage engagement
Create compelling narrative
Gain supporters via sign-ups
Expand brand reach
Accessible
Mobile responsive

Challenges & Strategies

Start with Narrative

The process is most successful when it begins with the story you want to tell. Start by writing a script and creating storyboards before jumping into design.

There are different ways to narrow down the story if you’re having trouble deciding. Ask yourself: What are you trying to say, and why are you saying it? Is there a specific story or a few stories you want to tell? Do they fit under a common theme? The assets you have can also help shape the story, especially depending on the kind of experience you want to create.

Next, consider which assets support the story best. If you’re fortunate enough to have a variety of options and strong visuals, begin there. Do you want the experience to be visually rich? Identify your strongest images and think about how the design and narrative can work together to highlight them.

If you’re light on assets, think about creating an experience that leans on audio, narration, or illustration to fill the gaps. Typography can also serve as a powerful storytelling tool in these cases.

Visual Research

The assets you have guide the direction of your visual research. Once you’ve identified the types of assets you want to leverage, start gathering inspiration from immersive websites that reflect that approach whether image-driven, type-driven, or otherwise. What patterns do you notice? Do they feature splash intro pages? How do they function on mobile? Are they accessible?As you study these references, consider which elements might translate well to your story and available assets. Remember, you’re not bound by the examples you explore, you can and should adapt how things function, especially when it comes to responsiveness and accessibility.

Design Approvals

Getting started can feel intimidating. But once you’ve clarified what you want to say, why you’re saying it, and what assets you have to support the story, it becomes easier. As you begin collecting micro-interactions and prioritizing ideas, each decision brings more clarity to the final layout and experience.Once you’ve written your script or chosen a direction and have a general sense of the type of experience you want to create, you’ll be able to approach design with more focus and efficiency.

Approvals and progress become smoother because the team is aligned on the narrative and intent. Without a clear concept and story, you risk getting stuck in endless design iteration with no clear path forward.

Length is Relative

Don’t worry about the ideal length because there is no such thing. What matters is how each interaction reveals something new or adds depth. Use motion, media, and interactivity to keep the experience engaging. If the site and content are engaging, then users will stay with the experience.

Micro-interactions

When used effectively, micro-interactions enhance and elevate a website, supporting the goals of the overall experience. Unfortunately, people often remember their worst encounters with these interactions and dismiss them entirely regardless of how long ago those experiences were or the intent behind them.

At their core, micro-interactions provide feedback to users when they interact with a digital experience. This includes traditional interfaces like websites and apps, as well as smart technologies, from watches to in-car displays.

In addition to offering context, micro-interactions can surprise and delight users. One example is the parallax effect, where background and foreground elements move at different speeds to create a sense of motion or depth. When used subtly and implemented well, it can be a powerful and engaging tool.

Getting Buy-in

Creating prototypes of micro-interactions is an effective way to help stakeholders and developers understand how a design should function, how it supports project goals, and to gain buy-in. The complexity and level of uncertainty around the micro-interaction will influence how you decide to move forward.

For simpler transitions, Figma’s prototyping features may be enough. For more control, tools like Principle allow for advanced movement and interaction. If high fidelity is required, After Effects can be used to create detailed animations and exported as code using Lottie. You can also explore animation libraries like GSAP, which come with extensive documentation, or share live examples from existing sites. Each method has its benefits.

Live examples are especially useful for showing how something works on mobile and how accessibility was handled—though you’re never limited to someone else’s solution. Stakeholders often struggle to visualize how a micro-interaction will look with their brand and content, in which case building a prototype can be necessary (though time-consuming).

Sometimes, it’s more efficient to share a reference example, let the developer begin implementation, and then refine the animation directly in code. Spending hours perfecting a motion sequence in After Effects may be wasted if the developer can’t replicate it due to technical constraints. Any combination of the above approaches can be used, depending on the needs of the project.

Aligning Design Priorities with Front-End Developers

When working on these types of experiences, it’s critical to involve front-end developers from the very beginning, starting with the scope of work and participating in design workshops. This allows them to weigh in early on the feasibility of specific micro-interactions and assess the team's confidence in delivering them.

Developers can’t always guarantee that every micro-interaction can be implemented within the timeline especially if there are several they haven’t built before. They need time to explore the code and understand how all the interactions work together. Additional time is also needed for quality assurance to ensure that fixing one issue doesn’t inadvertently break something else.

During the design phase, we compiled a list of all the micro-interactions we were considering. The design team prioritized them from most to least important, then reviewed that list with the client to get their input. Once development began, the team started with the "must-have" interactions and worked their way down to the "nice-to-haves."

Common Risks

When brainstorming ideas sometimes teams can get carried away with sharing too much inspiration. The problem with too much is that it becomes harder to see what we are prioritizing, why we are sharing it, and increases the risk of miscommunication.

Quality assurance is especially important because if something is broken, takes a long time to load, or the presentation is skewed in some way each mistake increases the likelihood that someone will abandon the experience.

Creative projects can be difficult to navigate because creativity and quality are subjective. This type of project runs the most smoothly when a small, empowered team of creative designers are leading the project—supported by a strong project manager, and front-end developers who are involved at every stage of the process.

There sometimes will be team members who express skepticism of these types of websites in general and will try to skew the design towards what is familiar, simple, and not creative. This project type requires strong communication skills, imagination, trust in the team you’re working with, and everyone pulling in the same direction.

Smithsonian American Women's History Museum: Becoming Visible

Becoming Visible is an interactive online experience that explains how women's history in U.S. history have often been overlooked, forgotten, or obsucred and what it means to make them visible.

Success

First SWAHM Digital Exhibition
Narration by Rosario Dawson and Smithsonian Curators
Featured in New York Times, launched with remarks by Jill Biden, and Lynda Carter
Webby Nominated

Overview

Narrative-Driven Digital Experience

Becoming Visible leverages archival materials, custom illustrations, narration, music, micro-interactions, and thoughtfully crafted page transitions to create an engaging digital experience. The project was designed to perform seamlessly on mobile and built to meet accessibility standards.

Rapid, Collaborative, Sprint

Becoming Visible narrative, script, and concept was developed over a three-month period spanning the December holiday and required close-collaboration across design, development, and the client team. Following production, the project underwent continuous QA before launching on Women's History Day

Using Design to Focus Strategy and Narrative

The project involved a large group of stakeholders contributing to the scriptwriting, brainstorming, and ideation process, which initially made it challenging for the team to align on a single direction.

To build momentum, the design team developed early concepts and supporting content to help clarify the vision. During this phase, Corey Jones inadvertently named the project Becoming Visible while creating Concept 2. The visual direction grounded the team, strengthened the central metaphor, and ultimately helped focus both the narrative and script.

Design Collaborators

Jamie Bourne: Brand, Visual Design, Motion, Micro-interactions
Corey Jones: Brand, Visual Design, Illustration, Motion, Micro-interactions
Corey Hemingway: Illustration

Immersive Storytelling

Featured

Overview

Responsibilities

Goals

Challenges & Strategies

Smithsonian American Women's History Museum: Becoming Visible

Success

Overview

NRDC 50th

Success

Overview