Talan Active Guidance
To extend Talan's Active Guidance campaign beyond a traditional landing page, I helped design an immersive storytelling microsite that combined interaction design, motion, and narrative to communicate a complex business message. From defining user interactions and building high-fidelity prototypes to supporting development and implementation, I collaborated across teams to create a memorable digital experience that guided users from exploration to engagement.
My Role: UI/UX Designer
Timeline: July 2024 - February 2025
Tools: Figma - FigJam - Photoshop - Midjourney - Premiere Pro
Project Overview
Following the production of Talan's Active Guidance campaign video, the marketing team set out to extend the campaign into an interactive digital experience focused on the SAP Business Unit in the U.S. Midwest. Rather than creating a traditional landing page, the goal was to translate the video's narrative into an immersive microsite that encouraged visitors to actively participate in the journey before engaging with Talan.
Inspired directly by the campaign film, the experience followed the metaphor of a mountain expedition, where visitors climbed alongside a guide through a series of interactive moments before transitioning into a modern business environment where Talan became their trusted digital transformation partner. Every interaction, animation, and transition was intentionally designed to reinforce the campaign story while leading users toward the final video and contact experience. The navigation guide outlined a nine-step journey with interactions ranging from parallax storytelling and hover states to mini-games, cursor effects, animated transitions, and contextual content reveals.
The Challenge
Unlike a conventional campaign landing page, this project needed to communicate an abstract brand promise.
The Active Guidance campaign positioned Talan as more than a technology consulting firm. Instead of presenting services through static content, the experience needed to demonstrate how Talan guides organizations through complex digital transformation journeys while allowing clients to remain in control of their own path.
The project introduced several design challenges:
-
Translate a linear marketing video into an interactive digital narrative.
-
Create an immersive experience without sacrificing usability or conversion.
-
Maintain visual continuity between AI-generated imagery, video stills, and brand assets.
-
Balance storytelling with clear business messaging throughout the experience.
-
Build interactions that felt engaging while remaining technically feasible for development.
-
Preserve accessibility and responsiveness despite relying heavily on animations and transitions.
My Approach
1. Defining the Story
The project began by mapping the business objectives into a complete interaction scenario.
Working collaboratively across marketing, design, and content teams, we developed a navigation guide that defined every screen, transition, animation, interaction, and success metric before any visual design work began. The experience was carefully structured to mirror the campaign video while giving users control over how they explored the story, including optional shortcuts that allowed visitors to jump directly to the video if desired.
The Inspiration Video
2. Rethinking the User Flow
Instead of relying on static scrolling, every stage introduced a new interaction designed to reinforce the narrative.
Some examples included:
-
Narrative storytelling following the user journey
-
Rope-guided scrolling animations
-
Parallax mountain environments
-
A drag-and-drop rescue interaction where users helped a climber
-
Cards place strategically revealing additional business insights
-
Animated transitions between mountain landscapes and corporate environments
-
Ambient concepts including wind and snowfall audio to deepen immersion (Added in development phase)
-
A seamless transition into the campaign video before reaching the contact form
These interactions were intentionally designed to create progression rather than simply presenting information, encouraging users to actively participate in the experience instead of passively consuming content. The navigation guide documented each interaction, its purpose within the story, and proposed engagement KPIs such as hover rates, interaction completion, video plays, and form conversions.
Below is a shorthand version of the frame by frame interaction guide developed to guide the design.
Active Guidance User Journey
1. Enter the Journey
Scene: Snowy Mountain
Visitors are welcomed by a quiet mountain landscape.
A "Start the Journey" button invites them into the experience.
Interaction
-
Click to begin
-
An interactive snowball added for the live website
4. Lend a Helping Hand
Scene: Rescue Moment
Users encounter a climber in difficulty and are invited to help by dragging an ice axe into place before continuing the journey.
Interaction
-
Drag-and-drop mini interaction
7. Reach the Summit
Scene: Final Descent
The mountain expedition concludes as the environment gradually transforms into a modern office, symbolizing the client's successful transformation with Talan as their guide.
Interaction
-
Animated environmental transition
-
Scroll-driven storytelling
2. Meet Your Guide
Scene: Mountain Climb
As users scroll, a climbing rope descends into view, revealing the campaign message piece by piece and introducing Talan as their guide through digital transformation.
Interaction
-
Scroll-triggered rope animation
-
Progressive text reveal
5. Through the Storm
Scene: Snowstorm
A calm mountain scene transforms as users move their cursor, revealing a hidden snowstorm beneath the surface while additional insight cards reinforce Talan's partnership philosophy.
Interaction
-
Cursor reveal effect
-
Animated content cards
8. Watch the Campaign
Scene: Conference Room
The interactive journey concludes with the original Active Guidance campaign video, allowing visitors to experience the complete narrative before continuing.
Interaction
-
Embedded campaign video
-
Animated play interface
3. Navigate the Challenge
Scene: Mountain Traverse
The climb continues through a dramatic mountain landscape using parallax effects. Interactive insight cards appear alongside the climbers, introducing Talan's practical approach and expertise.
Interaction
-
Parallax scrolling
-
Floating information cards
6. Explore the Solution
Scene: Transition Landscape
Key business capabilities including Data, Business Processes, and Cloud Systems & ERPs become interactive. Hovering over each topic reveals additional details without interrupting the story.
Interaction
-
Hover-triggered information panels
9. Take the Next Step
Scene: Contact
After completing the experience, visitors are invited to connect with Talan through a streamlined contact form, completing the transition from storytelling to engagement.
Interaction
-
Contact form
-
Return navigation
3. Creating a Cohesive Visual Language
Much of the required imagery did not exist.
To extend the campaign beyond the original video, we generated new visuals using Midjourney while carefully matching the original production's lighting, camera angles, composition, and atmosphere. Video frames were also extracted and combined with AI-generated assets to create a consistent visual style across the experience.
Throughout multiple design iterations, branding elements evolved alongside the company's visual identity, requiring continuous refinement of layouts, colors, typography, and motion design before the final prototype was completed.
Examples of Some Images Created with Midjourney
The Module Library
The Design Guidelines
4. Refinement & Developer Collaboration
Before implementation, the experience underwent an external visual design review to identify opportunities for refinement.
Following the audit, we adjusted layouts, navigation behaviors, responsiveness, interaction clarity, animation timing, and visual hierarchy before preparing a comprehensive handoff package containing design files, interaction documentation, visual assets, animation references, and supporting materials for the development team.
During development I worked closely with engineers to review the implementation, document UX improvements, and validate the experience across devices. My final review included recommendations such as improving desktop responsiveness, expanding click targets, refining animation positioning, simplifying interactions that caused confusion, and resolving layout issues introduced during implementation.
Final Product
The completed microsite successfully transformed a traditional marketing campaign into an immersive storytelling experience that combined interaction design, motion, and narrative to communicate Talan's Active Guidance philosophy.
The final deliverables included:
-
High-fidelity interactive Figma prototype
-
Complete interaction and navigation documentation
-
AI-generated visual asset library
-
Motion and animation specifications
-
Developer handoff documentation
-
UX review and implementation recommendations
-
Collaborative implementation support through launch
Although the experience was only available for a limited time, it received positive feedback during internal reviews and user demonstrations. The project was ultimately retired following a broader shift in Talan's marketing strategy from Active Guidance to Positive Innovation, rather than due to usability or design concerns.
Some Final Pages
The Prototype
The Impact & Takeaways
Reflection
Although the microsite was ultimately retired following a company-wide shift from the Active Guidance campaign to a new Positive Innovation messaging strategy, the project successfully demonstrated how interactive storytelling could communicate a complex consulting value proposition in a more engaging and memorable way.
The final experience:
-
Transformed a traditional campaign landing page into an immersive narrative that encouraged active participation.
-
Established a reusable framework for combining video, interaction design, and storytelling in future campaign experiences.
-
Delivered a comprehensive design system, interaction guide, visual asset library, and developer documentation that streamlined implementation.
-
Validated the concept through positive internal reviews and user demonstrations prior to launch.
Additionally, this project pushed me beyond traditional UI design and reinforced several important lessons:
Storytelling can be a UX tool
A well-structured narrative can guide users through complex ideas more naturally than static marketing content.
Cross-functional collaboration leads to stronger outcomes
Working closely with marketers, copywriters, developers, and an external visual design consultant strengthened the final experience and highlighted the value of iterative feedback.
Flexibility is essential
As branding evolved throughout the project, adapting designs while maintaining visual consistency reinforced the importance of designing for change rather than designing for a single fixed solution.
Motion should have purpose
Every animation and interaction was designed to support the story rather than serve as decoration.
Design systems extend beyond UI components
Creating detailed interaction specifications and developer documentation was just as important as producing polished interface designs.