Donut is a 500k-reader daily newsletter that takes a “short and sweet” approach to people who don’t find more traditional media engaging. Stylized in all caps (DONUT, short for a Dose Of News Useful Today), it’s run by a 4-person team, inspired by other daily newsletters like Morning Brew and geared towards Gen Z.
Recently, Donut replatformed from WordPress to Gatsby. We spoke with co-founder Matt McDonald – who both designed and built their new site – to understand why.
“We’re in the process of becoming a content machine, and Gatsby made perfect sense because it’s a modern technical stack,” McDonald said. “I didn’t want to go back to WordPress, I wanted top-class performance and SEO, and Gatsby’s DX is grade-A.”
The Donut website uses a number of different avenues to drive conversion – design, SEO, and an app-based referral loop. Gatsby is an essential part of each. Let’s dive in.
Optimizing SEO with Gatsby and Gatsby Cloud
As a marketing engineer for Dropbox, McDonald learned the ins and outs of SEO, which he applied to Donut. For example, rather than having infinite scroll on their category pages, they paginate for SEO purposes.
Donut’s initial homepage design had a rich background, with a canvas and a number of blurred circles. Unfortunately, when he built it out, McDonald noticed that their Lighthouse score on that branch on Gatsby Cloud had dropped by 20 points. It turned out that the background was now getting flagged as the largest element, delaying LCP significantly.
As a result, they changed to their current background, implemented with CSS gradients.
Increasing Conversion With a Full Screen Quiz
The Donut home page’s main call to action is to a full-screen quiz they use to drive signups. It’s an increasingly popular UI pattern we’ve seen with a number of Gatsby sites (like Jaxxon’s jewelry selection quiz or MeetFabric’s life insurance selection quiz).
Full screen quizzes engage site visitors by asking them questions. Based on the answers, the quiz suggests an action. In Donut’s case, they have a variety of newsletters that are delivered over both text and SMS, which are recommended based on quiz answers.
Quizzes are a great way to increase conversion by gamification, and Gatsby’s DX made it simple and straightforward to implement.
Improving Code Quality With Component Queries
McDonald did look at other frameworks like Next, but in addition to Gatsby’s performance, one of the big selling points for him was component queries. Donut was storing their content in Sanity. Particular components might need particular data.
McDonald used the example of components like the header nav, footer, and social sharing links. They store the data for these inside Sanity, their CMS. And with Gatsby’s component-based static queries, rather than query at the page level, in a large query alongside a number of other components, and then pass the data down a component tree through props, they’re able to use the `useStaticQuery` hook to co-locate the query with the component.
Why was this so important to them? For McDonald, it was about code quality.
“Putting queries that logically belong to components at the page level is a violation of separation of concerns,” he said. “Plus, I can put this component anywhere and not worry about having to add page queries and pass down props.”
Using Gatsby Functions for A Personalized Ambassador App
After a visitor has signed up for the newsletter, Donut wants to make them into a promoter. They’ve added a viral growth loop via an ambassador program baked into their Gatsby site.
The setup: each subscriber has a unique referral link. They can invite their friends – and if their friends join, they receive points. Based on the number of points they accumulate, they can receive prizes – some at 5 points, some at 10 points, 20, 50, and so on.
The Ambassador functionality is powered on the backend by a Node.js backend, running on Heroku. On the frontend, Donut uses Gatsby Cloud + Gatsby Functions to securely authenticate with their backend and pull in personalized data on a per-user basis.
“I really don’t have any negative feedback [about Gatsby] at all,” McDonald says. “It’s all been positive and I’ve been super impressed with everything.”