Killington 4241 Magazine

Save Trees,
go digital.

11.01.21

bhave hair

4241 is a publication style marketing effort produced by Killington Resort on an annual basis focused on sharing stories about the mountain and its culture in an effort to strengthen the connection between the resort and its guests.

Tools Used:

Shopify

Google Analytics

Services Rendered:

Website Design

Website Development

Interaction Design

E-Commerce

Client Categories:Consumer Brand

View Live Site

THE Challenge:

Recreate the success of Killington's annual print magazine in a more modern, interactive digital form.

Prior to the pandemic, Killington had worked with the team at Buttery to produce an annual printed issue of 4241. The content followed the same formula: share stories to engage Killington’s customer base and strengthen their connection to the resort. Then, the pandemic hit and amidst all of the related uncertainty, Killington opted out of printing a physical version of the magazine last season. Then, this summer, after the dust had mostly settled, the team at Buttery reached out to us about working with them to produce an online version of the magazine on behalf of Killington that would bring their printed content into the modern era with immersive, interactive articles.

Our Solution:

Add engaging interaction, animation, and video content to existing stories and assets, bringing each story to life in a way that's impossible on paper.

Yet again, Webflow’s amazing suite of tools proved to be the perfect solution. This time around, we found ourselves facing a slightly different scenario. Rather than creating a website with the typical homepage, e-commerce, blog, and supporting pages, this website had the unique task of presenting itself as an online publication. As such, its contents are exclusively story based, meaning our primary challenge was determining how to best organize each type of content to ensure the easy editing and creation of stories.

Creating Distinct Article Types to Best Balance Creative Wants with Practical Needs

Our solution for this was to create three types of article content, while simultaneously allowing for the possibility of creating new content types in the future. Upon launching the 4241 Stories website, there are three types of articles: full immersive stories, galleries, and a blog from guest writer Peggy Shinn. For the galleries and guest blog, we set up two separate CMS collections to handle the unique content of each story type. For the individual story features, we opted out of utilizing the CMS as the goal of this project was to make highly unique, animated content. To accomplish this, we knew we needed to start with a fresh slate for each story, allowing us to leverage new and unique animations for each one.

Brining Articles to Life with Webflow's Animation, Lottie File Interactions, and Video Embed Tools

With the framework of the website in place, we found ourselves ready for the next, most exciting part of the project: adding animations. For this particular project, we found ourselves in the unusual role of not being tasked with designing the website, but instead implementing designs provided by Buttery, and creating interactions that would bring each page to life. Utilizing strategies such as Lottie animations that react to page scrolling, roll over animations, embedded videos, interactive elements that follow your mouse around the screen, and plenty more, we created a number of custom animations that bring the 4241 project to life in a way that was never possible in a traditional print format.

THE RESULTS:

Audience, engaged.

While most websites we work on measure success in terms of some form of a conversion rate, the measure of success in this case is how engaged the website visitors are. In other words, are we capturing their attention enough that they'll consume the content, ultimately increasing their interest in Killington. As a result, the metric we're using to measure success is the average time spent on page. While we're not in a position to share hard numbers regarding this project, we can confirm that this metric is being measured in full minutes across all articles. Noting this, we've already been contracted to work on numerous upcoming stories, ultimately growing the scale and overall effectiveness of the project.

Internally there is another result worth mentioning: we’ve learned a substantial amount about Webflow’s animation building tools and can’t wait to apply what we’ve learned to future projects.

bhave hair

About the Project

View Live Site

4241 is a publication style marketing effort produced by Killington Resort on an annual basis focused on sharing stories about the mountain and its culture in an effort to strengthen the connection between the resort and its guests.

Tools Used:

Shopify

Google Analytics

Services Rendered:

Website Design

Website Development

Interaction Design

E-Commerce

Client Categories:Consumer Brand

View Live Site

Challenge

Prior to the pandemic, Killington had worked with the team at Buttery to produce an annual printed issue of 4241. The content followed the same formula: share stories to engage Killington’s customer base and strengthen their connection to the resort. Then, the pandemic hit and amidst all of the related uncertainty, Killington opted out of printing a physical version of the magazine last season. Then, this summer, after the dust had mostly settled, the team at Buttery reached out to us about working with them to produce an online version of the magazine on behalf of Killington that would bring their printed content into the modern era with immersive, interactive articles.

Our Solution

Yet again, Webflow’s amazing suite of tools proved to be the perfect solution. This time around, we found ourselves facing a slightly different scenario. Rather than creating a website with the typical homepage, e-commerce, blog, and supporting pages, this website had the unique task of presenting itself as an online publication. As such, its contents are exclusively story based, meaning our primary challenge was determining how to best organize each type of content to ensure the easy editing and creation of stories.

Our solution for this was to create three types of article content, while simultaneously allowing for the possibility of creating new content types in the future. Upon launching the 4241 Stories website, there are three types of articles: full immersive stories, galleries, and a blog from guest writer Peggy Shinn. For the galleries and guest blog, we set up two separate CMS collections to handle the unique content of each story type. For the individual story features, we opted out of utilizing the CMS as the goal of this project was to make highly unique, animated content. To accomplish this, we knew we needed to start with a fresh slate for each story, allowing us to leverage new and unique animations for each one.

With the framework of the website in place, we found ourselves ready for the next, most exciting part of the project: adding animations. For this particular project, we found ourselves in the unusual role of not being tasked with designing the website, but instead implementing designs provided by Buttery, and creating interactions that would bring each page to life. Utilizing strategies such as Lottie animations that react to page scrolling, roll over animations, embedded videos, interactive elements that follow your mouse around the screen, and plenty more, we created a number of custom animations that bring the 4241 project to life in a way that was never possible in a traditional print format.

The Results

Upon launch of the new website, public reception has been extremely positive. While we’re not privy to analytics results, a testament to the site’s success so far can be found in the fact that since it’s recent launch, we’ve already been contracted to add numerous additional stories, thereby growing the scale and overall effectiveness of the project. Internally another result is that we’ve learned a substantial amount about Webflow’s animation building tools and are excited to continue rolling them out in future projects.

Scope of Work

Discovery
To host a wider range of file types, from images to audio files, we integrated our platform with Amazon’s secure S3 hosting. This enables users to not only host rich media on their pages, but also to sell digital goods through their shop.

Strategy
To host a wider range of file types, from images to audio files, we integrated our platform with Amazon’s secure S3 hosting. This enables users to not only host rich media on their pages, but also to sell digital goods through their shop.

Development
To host a wider range of file types, from images to audio files, we integrated our platform with Amazon’s secure S3 hosting. This enables users to not only host rich media on their pages, but also to sell digital goods through their shop.

Design
To host a wider range of file types, from images to audio files, we integrated our platform with Amazon’s secure S3 hosting. This enables users to not only host rich media on their pages, but also to sell digital goods through their shop.

Deployment
‍‍
To host a wider range of file types, from images to audio files, we integrated our platform with Amazon’s secure S3 hosting. This enables users to not only host rich media on their pages, but also to sell digital goods through their shop.

"Those guys over at stage are doing some really amazing work on that platform"

- The Guys at Stage

More Projects