In the Works: A Digital Magazine for Founders

What is In the Works?

In the Works is a digital magazine published by Help Scout, and is dedicated to telling the stories of founders and leaders in the process of building mission-driven companies. Driven by core values of authenticity, grit, kindness, and impact, the magazine seeks to amplify the voices of values-driven business leaders and serve as a repository of meaningful, high-quality content.

The Business Need

So why did a software company publish a digital magazine?

Forging relationships with small businesses

Our goal was to forge even deeper relationships with small business leaders beyond offering customer communication software and expertise.

Establishing trusted partnership with founders

Our hope is to be a trusted partner to mission-driven founders as they grow their companies with care.

Supporting the community

It’s possible to be successful while doing right by your community, the environment, and society at large.

-- In the Works, “About”

Key Techinical Decisions

The dev team -- me + Katia Zanotti -- were tasked with bringing the designs and stories to life and integrating a content management system for the content team.

The In the Works brand wanted to bring delight, subtle animation, and polish to the user experience. The dev team accomplished this through micro-interaction and scroll-driven animation.

We were also tasked with integrating a seamless multi-media experience to the site and building out a content management system for our editors. This we accomplished with the CMS Contentful.js, the flexibility of which allowed us to develop a highly customized editing experience for the content team.

Delightful UX

Haiku generator

The footer features a random haiku generator (pulling pre-written stanzas from a database). This component was developed by Team Lead Mark Carter, but I made some contributions to its UI.

Feature: Full-Screen Menu Overlay Component

The full-screen overlay main menu includes a featured story component

Scroll-driven Animation

The home page includes a fun logo translate-and-scale CSS transform, and use of the Observer API to trigger animations as the user scrolls.

Intersection Observer API

Many pages on the site make use of the Intersection Observer API to fade-in cards and images as they enter the viewport.

Audio Player

In the Works features a persistent audio player, which allows a user to listen to content as they browse the site.

The listen page collects all the podcasts, and includes synchronization between the global audio player and the specific card which is playing.

Integrating a CMS

We chose Contentful for the magazine's CMS. Our major tasks were to build out data models for each of the site's content types. We had many:

• Issue
• Navigation
• ListenPost
• ReadPost
• SnackPost
• WatchPost
• CategoryPage
• Podcast
• ... and many more!

Contentful comes with a variety of field types, so we were able to fine-tune the fields for each content type.

The most interesting part of using Contentful is its extensibility. Using the App Framework, it is possible to extend the functionality of the default Entry Editor.

Conditional Fields

Contentful does not offer out-of-the-box conditional fields functionality. I created an app that does so here.

CMS Feature: Asymetrical Photo Grid Component

An example of a custom content type built for the CMS is the PhotoGrid component, which allows editors to include asymmetrical and responsive photo grid components within long-form articles, all implemented with CSS grid.

Key Metrics

We were interested in tracking key audience engagement and brand awareness metrics. The business goals for the site were a little fuzzy, and therefore difficult to measure preciesly: e.g., the degree of meaningful connection and thought leadership cannot be measured directly. However, there are a several standard metrics to use for measuring brand recognition, audience connection, and prospective customer nurture.

Audience Engagement

• Social media engagement: Twitter (now X) shares, LinkedIn shares, Brand Mentions, Hashtag performance, social media referrals, CTR
• Newsletter subscriber retention rate
• Time on page per session
• Pages viewed per Session
• Bounce Rate

Brand Awareness

• Impressions
• Reach
• Traffic: Organic search, Referral, Direct

Metrics Benchmarks

While I don't have access to the metrics data, here are some industry benchmarks for similar sites over a 6-month period:

Social Media Engagement

• Twitter Shares: 80-160 shares per month
• LinkedIn Shares: 30-80 shares per month
• Brand Mentions: 8-25 mentions per month
• Hashtag Performance: 15-50 hashtag interactions per month
• Social Media Referrals: 10%-30% of total traffic (average per month)
• Click-Through Rate (CTR): 1%-3% (average per month)

User Engagement

• Newsletter Subscriber Retention Rate: 70%-80% retention per month (average)
• Time on Page per Session: 2-5 minutes per session (average per month)
• Pages Viewed per Session: 3-6 pages per session (average per month)
• Bounce Rate: 40%-60% per month (average)
• Impressions: 8,300-16,700 impressions per month (average)
• Reach: 5,000-12,000 reach per month (average)

Traffic

• Organic Search: 30%-50% of total traffic per month
• Referral: 15%-25% of total traffic per month
• Direct: 20%-40% of total traffic per month