Layout, Flywheel’s official blog, was first launched in 2014 as a publication for designers. Since then, it’s evolved into a community of thoughtfully-written and curated content for busy creatives of all types. From articles and videos to specialized courses, you’ll find a range of resources for a variety of skills: site design, web development, marketing, business growth, client management, and so much more!

Today, I’m delighted to share that our site design has evolved to make all of this content more discoverable, easier to experience, and hopefully more enjoyable!

The short version: We have a brand new site design, and I’d love to hear what you think in the comments below!

The long version: We spent a lot of time thinking really intentionally about this redesign, and made some important decisions along the way. Keep reading for the strategy behind it all, details about our favorite features, and a look at the process from sketches to production!

Why the change?

Flywheel has evolved a lot since the company was founded in 2012. I’ll let you read the details of Flywheel’s history here, but to sum it up: Our products are more advanced, our audience is wider, and our mission is greater.  

To help creatives do their best work.

Our content strategy evolved with the rest of the company, but other than a couple bug fixes, we left Layout the same. (The one exception being a purple logo that showed up in 2016, which we never really acknowledged – sorry about that!)

Essentially, we were forcing something that was originally built as a design publication to also start speaking to developers, marketers, agency owners, and more – and simply put, the user experience was not great.

We were using the age-old “reverse, chronological” layout, with zero tags and only five categories: Business, WordPress, Inspiration, How-to, and Freebies. (How-to? Inspiration? For who?)

This made it hard to highlight our most helpful resources, and put a lot of responsibility on readers to create their own content journey. Engagement was low, our bounce rate was high, and people asked us for content we already had – they just couldn’t find it.

User experience was lacking, and on top of that – the experience for our own internal team wasn’t great, either. We were still using the WordPress Classic Editor, and while that does work just fine, we’ve been excited about the Gutenberg Editor and its potential for a long time.

On the visual side of things, our team had to work with a feature image size that was 1800 px wide by 500 px tall. While they were good sports about it, it’s not easy to tell stories in photos that long and narrow.

Plus, we always create our own images for articles – but you’d never know it!

We’ve been stock photo free since 2018.

We’re super proud of that fact, but the traditional site design for blogs only highlights the author – not anyone behind the visuals.

So, to sum it all up, we felt that we weren’t helping our readers do their best work, nor were we letting our own team do our best work.

Queue: This redesign!

We’ve kept the best parts of Layout (like the actionable content and inspiring imagery!), but in a way that’ll help us all do better work. You’ll be able to find the content you care about most, and we’ll be able to further our craft to give you even better stories.

A few new features

There are so many things we’re excited about with this design, but I wanted to highlight a few of our favorites!

New categories and tags

One of the most important elements of the new design was to make it easier for you to find more of the content you’re interested in, so we have five new categories plus more than 50 tags! You’ll see these in several places, making it much easier to explore the site.

Along with all the actionable advice and technical tutorials that Layout specializes in, you’ll now also find categories for Flywheel product updates and company stories! For customers and fans of our brand, it’s a nice holistic experience of all things Flywheel-related.

Powered by the Gutenberg Editor

While this is technically under the hood, we’re excited about the storytelling possibilities Gutenberg will give our team. Featuring new image sizes, layout options, and custom Gutenberg blocks, we have lots of ideas we’ll be experimenting with to give you higher quality content.

Coming soon: Highlighting authors, designers, photographers, and more!

We’re thrilled to give credit to everyone behind an article, not just the primary author. While we decided to launch without this feature, we’ll be rolling out additional credits very soon. Here’s a sneak peek!

Coming soon: Table of contents

Skip what you know and jump straight to the information you’re looking for. We’ll be rolling out a sticky table of contents soon, so you can easily navigate each and every article!

Behind the scenes

Because our audience consists of all types of people related to websites and the creative process, we wanted to share a little behind-the-scenes look of how we accomplished an update of this scale! I’ve already talked about some of the marketing strategy behind the redesign, but wanted to showcase a few of the design and development decisions we made along the way.

The design process

For this project, we actually worked with a talented friend and freelancer, Adam Nielsen. He took a very messy Google Doc with a bunch of marketing strategy notes and turned it into the design you’re looking at now!

Before the design was finalized, Adam spent a lot of time talking to Kimberly Bailey (our in-house photographer) and Bryan North (one of our designers) to make sure their vision for Layout’s imagery could come to life.

Fun fact: For a minute, we almost decided to change “Layout” to “Flywheel’s blog.” (Notice the logo in the upper left of the mockups!) We decided we wanted Layout to maintain its own identity, however, just with a closer connection to the Flywheel brand. (Hence, altering the logo slightly and switching it to Flywheel blue!) Our in-house Art Director, Nicholas Petersen, was behind this.

Development decisions

Once the design mockups were finalized, they were passed off to Josh Masen, our in-house developer, to turn it all into a functional website!

As you can probably guess, we use Flywheel’s hosting infrastructure, so the development process was super streamlined. The redesign started in Local, moved into a staging environment, and finally to production.

To create the custom theme, Josh used the Timber WordPress plugin and the Gutenberg Editor to create custom blocks.

What’s to come

The best part of all of this is that we have even more planned! Over the next few months, we’ll be rolling out more features to create a better reading experience, share unique stories, and help you do your best creative work.

This also means that we’d love your feedback! Tell me in the comments below: What should we do more of? What should we change? What can we help you learn this year?

We’re excited to build a community of creatives furthering our craft, and can’t thank you enough for joining us!