The Formstack Blog Redesign: An In-Depth Look
In July of this year, the Marketing Design Team at Formstack was staring our blog straight in the face. It hadn’t been touched in almost two years. And, it felt like it. Dust was piling up on remarkably well written posts by our content team, and the design was rather lackluster, bloated, obtrusive, and at times (especially on mobile), simply unusable.
Our design team of three were dealing with some rather dismal metrics. Our average session duration was under a minute. Our bounce rate was at an astronomical rate. Our page depth was quite low for a blog with 1,100+ articles. Visitors were just not engaged. They’d arrive on our blog organically, skim or quickly read a post, and then move on. We were doing a poor job at keeping people on our blog, and ultimately, engaged with our brand.
So where did we start?
A lot of the work happened long before we started wire-framing. Here’s a peek into our pre-design process:
Define the “big” goal of the blog.
Previously, we offered a free trial to our customers through the blog. We quickly recognized this presented a disjointed experience. An experience that read like this:
Hey, thanks for reading this article about how your marketing team can help improve the quality of your sales leads. Here, sign up for a trial of our lead collection product you really know nothing about.
Needless to say, it just didn’t make sense. Our visitors just aren’t ready to sign up for a free trial yet, on most occasions. We decided the blog should be a self-sustaining lead generation tool instead of a free-trial driver. Most traffic is coming organically, meaning for many visitors, it is their first touch with our brand. These blog visitors are looking at a very specific piece of content, and are not necessarily looking for a lead collection platform...yet. They need to be nurtured a bit before starting a free trial.
Craft a short hit-list of initiatives to achieve the goal.
Once we defined our goal, the pistons began to fire. How can we nurture organic blog traffic? We came up with three high-level initiatives that would drive the redesign process:
- Every single blog post should have an obvious and strongly defined call-to-action at the bottom, enticing the user to download a piece of content, sign for a demo of our product, or occasionally, sign up for a free trial.
- Subscriptions via e-mail sign up at bottom of every single page.
- Retain readership with better discovery tools.
Define objectives, and decide which team member is responsible for each.
In order to achieve our goal, we had to focus on the objectives, and get creative with how we went about tackling them. Our list looked a bit like this:
- Set clear priorities for each designer. We needed to understand who is responsible, what their role is, and the tools they need to be successful.
- Review Google Analytics. How can we better utilize high-trafficked blog posts? What do our statistics currently look like? Where do we need to improve?
- Encourage collaboration throughout our department. We’re designers. We’re not SEO experts, content writers, or even conversion specialists. To get everyone to buy in to the project, we needed to build a sense of ownership for everyone involved.
- Improve content discoverability & retain readership. It was critical we increase visitor time on blog, decrease bounce rates, and help our readers find more content that is relevant to what they’re looking for.
- Design with real content and try to account for the uniqueness of every post. Designing with actual content from our blog allowed us to craft an experience catered to our topics and audience, as well as help us understand the constraints of our content. Designing with real content will help a designer identify edge cases that might otherwise be frustratingly discovered in the development stage.
- Balance aesthetics & usability with optimized lead capture. Capturing leads is a must. We have fantastic content on our site readers will undoubtedly be interested in if they knew it existed.
- Avoid overloading the user with a cluttered reading experience. Readability is a top priority for any blog. Cluttering the reading area and forcing the user’s eyes away from the content distracts them, and can ultimately render them uninterested in the content being presented.
- Craft a better mobile experience. The mobile experience was quite poor. It needs to be improved, even though only 9% of our Blog acquisition traffic comes from mobile devices.
Record success metrics for the project.
How would we know the redesign was a success? What numbers can we look at after the redesign is implemented? As hinted at above, here’s what we decided were critical success metrics to observe post-mortem:
- Increased average session duration. The average length of a user session.
- Reduced initial bounce rate. The percentage of single-page visits. More specifically, the number of visits in which a visitor has left our blog from the entrance page without interacting with any other post or page.
- Increased number of pages viewed per user session. Otherwise known as Average Page Depth. This is the average number of pages viewed during a session (repeated views of a single page are counted).
Define the blog page & post architecture.
Defining the architecture was critical at the beginning of the project. Would it stay the same? Would we change the link structure? How would that affect the design process? Ultimately, we decided categories and search should suffice as efficient means for the user to find what they are looking for. We decided to relegate tags as a discovery tool on the site.
Set a timeline that can actually be achieved.
In order to work through a massive redesign, a realistic timeline is absolutely paramount. Maybe above everything else in the planning phase. When you have a bunch of other projects going on your team is responsible for, you must create a timeline that allows you to breathe, but also holds the team accountable throughout the process. Though you can’t predict hold-ups in the process, you best plan for them because they are enviable and will happen. Murphy’s law is alive and well in web development.
Let the designing begin!
Okay, so…holy moly. That’s a lot of stuff to sort out before a pencil is picked up to hash out ideas, or pixels begin to be pushed in Sketch (yes, we used Sketch to redesign the blog). Now that we had clear objectives in our design process, everything started to fall into place.
First things first: fonts.
The knew the proportions and rhythm of the body, headers & vertical measure would be critical in the success of the readability of our blog. Medium has one of the best reading experiences on the web. This is in part because of three things:
- Typeface selection
- Font sizes
- Observance and execution on the ideal measure and vertical rhythm.
We decided to go with Freight Text Pro and JAF Bernino Sans. They’re both available as part of TypeKit. There’s certainly a reason people love reading articles on Medium. A lot of it has to do with the font pairing. Freight Text offers a wide variety of degrees of emphasis, from the spare, lean Light to the thick and beefy Black. JAF Bernino Sans offers open shapes and balanced weight distribution make JAF Bernino a great text face, and the wide variety of weights and widths provide a supreme level of complexity for headings. We had also considered Proxima Nova for consistency, since it is used on our parent site. Proxima truly is a beautiful font with modern proportions and a subtle geometric appearance. However, it just wasn’t quite what we were looking for. Shoutout to Medium. If it ain’t broke, don’t fix it.
Typography: font sizes and vertical rhythm
We quickly realized we should strive to keep the blog article content width relatively slim (~700px, or nine Foundation column units). This is because 65 (or 66 in print) characters is often referred to as the perfect measure. We knew we could be a bit relaxed with this on the web, and keep the character count around 45 to 85 characters (including spaces and punctuation) per line. This is endorsed by Richard Rutter in his adaptation of Robert Bringhurst’s Elements of Typographic Scale.
Medium’s base paragraph font size is 21px. Google’s suggestion is start with a baseline font size of 16px, as does Rutter. Rutter’s recommendation is for body text is 16px (1em or 1x) and a measure of 60–75 characters long, and headings should be 48px (3em or 3x). We decided to move forward with a happy medium of 18px. It should be noted that in order to keep the rhythm of text, the vertical spacing between block-level elements should be the same as the line height defined for those elements.
Inspiration
Inspiration is vital in any large-scale web design project. We looked all over the place, and created a massive Pinterest board full of ideas. At this stage, anything goes. Really, the wilder the better.
We let the weird come out here, and really, we were quite surprised how effective it was towards our final product. It allowed us to dissect granular elements from design. This stage afforded us the time to gather a little bit of competitive analysis. What are other companies doing? Why is it effective? Or more importantly, why is it not effective?
Wire-framing
If you’re reading this, you undoubtedly know how important wire-framing is. For us, it gave us a time to explore ideas purely from a functionality standpoint. Simply put, how will the visitor interact with the site? What emotions might these interactions cause? And, how about animations? How should those work? Are they beneficial or detrimental?
We explored several options for each key interaction on the site, keeping in mind our core objectives and goals stated above. Looking at analytics, we knew search would be a key element on the blog. So, we wanted to make searching the site a little more fun. Animation can be a great way to inject just a little bit of excitement into user interactions that are often quite dull. Dissecting interactions on a granular level like this allows you to think outside the box a little bit, have some fun, and take your designs to the next level. But, at the same time, it forces you to keep things practical.
Mock-ups
This is where the real fun finally begins. Since we have brand guidelines to adhere to, choosing a color scheme is unnecessary. Lucky for us, this is a massive time-saver. And, since we already have fonts chosen and typographic scale in place, we can jump right into exploring how our brand’s colors can work within the elements of our layouts.
Obviously, this is a very time consuming part of the project. We used Invision as our collaboration and prototyping tool during the mock-up process. It helped us gather rapid feedback on individual elements, allowed everyone to efficiently collaborate, and were able to quickly iterate on designs with ease. I would highly suggest Invision to any design team looking for a solid prototyping and collaboration tool.
Here are four main pull-aways from our design that we hope will achieve our goal:
- The content area on the top left section of the homepage is variable, and can be changed by the content team at any time. This gives our marketing content team complete control over what they deem is most important to our target audience at any given time. These callouts can be links to anything — not necessarily just blog posts.
- Legibility has increased tenfold. We created a reading area based off proven typographic principles, and the reader can never be distracted by other elements while reading the post.
- Clear, defined call-to-actions are added at the bottom of each post. Again, these are defined by the content team before publishing the article. That way, each individual post has a callout that is highly relevant to the content found within the article.
- Smart recommended articles are located the bottom of each post. We didn’t use some bulky plugin to go pull “similar articles” for us. We wrote logic that made sense, and displays articles the reader will find interesting based on the content they have just finished consuming.
In Conclusion
This was a fantastic learning process for a fairly young design team of three. We wanted to start from scratch, look at the “state of the blog,” and create something truly unique that really helped us meet our Marketing team’s overall objectives. As designers, we must remember that it’s not all about aesthetics. Really, most of the process isn’t about aesthetics. It’s about functionality. It’s about figuring out what works, and what doesn’t. It’s about understanding the problem, breaking it down, and creating something that solves it. Designers are really just problem solvers with good taste.
I’m pretty proud of our team. I think we nailed it.
