How We Made a Story-Driven Product Demo & Why Going All-In Pays Off.

Last week we launched a campaign to showcase what’s new in Pathwright 2. To kickstart this campaign we wanted to do something different. This couldn’t be just another landing page.

Thousands of people use Pathwright for amazing things. We’ve seen big companies train employees, teachers reach kids in new ways, and communities pop up around learning things like tapestry design. It’s incredible! We wanted to help more people find their first step.

To do this we created an interactive website that showcases the teacher experience on Pathwright 2.

We’d never done or seen anything quite like this, so it was hard to predict how well it would work. So far the response has been overwhelmingly positive. We’ve had a solid spike in interest and signups. Those who’ve come from the landing page seem to get started faster and have a better picture of how to use the platform.

Along with the general platform interest we’ve had several inquiries about our design process. Here’s a look at objectives we had, design decisions we made, and challenges you might run into if you try something similar.

Designing a way to explore the teaching experience

Making educators the hero

The core idea was simple: deliver a bottled-up teaching experience of the Pathwright 2 platform. We wanted a story, not a fancy list of new features. At times the process even felt more like directing a movie than building a website. We borrowed ideas from a wide range of mediums outside the web — title sequences, video games, movie trailers, etc.

We wanted teachers to see in just a couple minutes what would normally take weeks or an entire semester to experience. The viewer sees some of the most rewarding milestones of teaching on Pathwright — inviting the first learners, watching them progress through the course, interacting with them through integrated discussions, seeing them compete the course.

It also turns out to be a great starting point for anyone new to Pathwright. It can be hard for brand new users to visualize what teaching on Pathwright (or even teaching online) means. This landing page makes it possible to explore that experience firsthand.

Driving the story with scroll

For the story to work, we had to build a deliberately active viewing experience. The story is controlled by scrolling — the most common interaction on the web, but also one that’s so easy to do wrong.

Scroll-driven interactions can come with tradeoffs — sites in this category often give up native scrolling for smooth triggers, timed animations, etc. This can lead to a less-than-great experience that can feel more like docking a spaceship* than scrolling a website.

We decided early on to keep native scrolling — to leave full control in the hand of the viewer. We wanted the scroll experience to be as easy as scrubbing back and forth through a video. This approach led to interesting technical challenges — like designing our own timeline framework, using keyframes to describe state, interpolating animations, etc. But these deserve a separate writeup.

Designing for movement

We took extensive measures to keep the viewer engaged, participating even. With scrolling as the only action, it was important to instill a sense of vertical movement. Elements moving at native scroll speed tended to be too distracting, but removing the movement entirely took with it the sense of momentum. We took inspiration from cinematic title sequences where titles fly in, then slow to a molasses crawl, then fly out again.

Eye movement was another important consideration — one that is sometimes forgotten when designing for the web. Not every website requires special attention to this aspect, but for our design it was crucial to intentionally guide how the viewer’s eyes dance back and forth when new elements are introduced. We found that timing and proximity played the most important roles in solving this.

Our first prototypes had the headings scrolling past at native speed. This made for an unpleasant experience where the viewer’s eyes were being dragged all over the screen. By reducing the movement, we made the introduction of new elements less surprising.

We also noticed that showing headings and new animating elements in unison forced the viewer to ignore one or the other. We found that showing the heading first, then pausing, and finally playing the related animation produced the best results.

Setting the stage for teaching online

Our objective was to demonstrate Pathwright 2 in a fun, new way. But this was a moving target. As we started design and development we realized this landing page could work as a demo platform and on-boarding tool. The secret superpower of the site is its customizability—we can load different headlines, different avatars, even a completely new path and discussion. This made for some fun easter eggs, but more importantly it means we can build unique demos and deliver custom experiences for different educational contexts.

Often, the biggest barriers to teaching online are the unknowns. With Pathwright 2 and this interactive landing page we hope to set the stage for thoughtful, creative educators to start teaching online.

Hey! If you liked this and want to see more of Pathwright for yourself, you can learn more here.