Insperity's Business Blog Redesign
A redesign of Insperity's business blog to provide valuable learning materials and engaging reading experience.
MY ROLE
User Research, Wireframing,
Prototyping, User Testing
MY TEAM
Project Manager, Visual Designer, Copy Writer, Front-end Developer, Data Analyst
OUTCOME
253% ↑ in blog subscribers
250% ↑ in e-book downloads
YEAR
2018
Why This Project
Insperity business blog converts approximately 10% of its subscribers into sales leads, but the company has struggled to increase blog conversion because subscriptions to the blog is in sustained decline. When the subscription rate hit a critical low point, the team urgently needed to turn things around.
The Problem
Visitors came to the blog for the content, but left because of the poor reading experience. The experience of the blog is not compelling enough to convince visitors to stay, needless to say subscribe to it.
Behavior Data and User Feedback Shows that Visitors Had Trouble Finishing A Blog Post
I collaborated with a data analyst and a front-end developer to analyze the behavior data. Site traffic data shows that individual blog posts attract the most visitors, not the blog homepage. Heatmap shows that only 5% of the visitors scrolled to the bottom of a blog post, and visitors' mouse movement shows that they were not interested in any side rail content.
Heatmap
Red line shows visitors' mouse movement
I was eager to talk to users to understand what motivated their behaviors, but I was instructed not to contact them due to company policy.
So, I got creative: I created a feedback poll on the site that allowed me to gather user feedback without talking directly to users.
​
Feedback showed that visitors enjoyed the content. Their frustrations focused on the interruptions while reading.
"I really enjoy your content, please keep up the good work!"
“Please turn off the popups. I am trying to read here.”
“...I don't mind seeing it [popup] once, but not EVERY TIME.”
The Blog Layout Can't Compete with the Best Practices in the Market
With blogging become a mature medium for knowledge sharing, visitors don't have to tolerate bad reading experience. Medium demonstrates what an engaging reading environment can be, and even conversion rate focused business like Hubspot renovated their blog to focus on content, not sales pitches with constant popups.
​
Users expectations are evolving and becoming more sophisticated and demanding. We needed to keep up.
Insperity
.png)
Hubspot (up) & Medium (bottom)
The Concept
To create a better reading experience, I led the team to: 1) Redefine promotional popup logic, 2) Design a clean blog page layout.
Redefine Promotional Popup Logic
Partnered with the front-end developer, we first listed out all popups' show-hide logic to reexamine their value.
​
1. A subscription pop-up appears when a visitor lands on a blog post.
​
2. An e-book download pop-ups shows up a few seconds later. Its content is not necessarily tied to the blog content.
​
3. An exit pop-up appears the second the cursor moves outside the upper page boundary.
The team came up with a series of guidelines for popup usage:
​
1. Visitors decide when to subscribe
Visitors won't see the subscription popup until they reach the end of a blog post.
​
2. Treat e-books as educational materials, not promotional pieces
Partnered with two copywriters, we connected e-books to related blog posts to educate visitors if they are looking for more on the same topic.
​
3. If visitors want to leave, let them leave without any resistance
I fought for the idea of eliminating the exit pop-up since we saw neither any noticeable return, nor did it provide any value to the user experience. The management team agreed to put it to test for two months.
Design A Clean Blog Page Layout
Blog design best practices demonstrates the value of a clean blog layout. I decided to remove all side rails content on the blog post and revamp the design for both the blog homepage and blog posts.
​
For the blog homepage:
1. Demonstrate authorship with the author's profile picture (in green)
A profile picture makes the content more relatable. It allows readers to develop trust in the content.
Before
After
2. Display more information
The new homepage uses a two-column layout so that visitors can scan through more content with less scrolling.
Before
After
For individual blog posts:
1. Reinforce authorship with the author's profile picture
​
2. One-column content without distractions
The team removed the right rail information to create a more engaging reading environment. We also redesigned the social sharing list to make it less prominent.
Before
After
User Testing Reveals What We Missed
I conducted user testing to help verify the direction in which we were heading.
​
People who used the existing blog experienced the same as the blog visitors. People who used our concept not only spent more time on selected blog posts but also more likely to finish at least one blog post.
“I remember the blog post used to have a few popups showing up during my reading. I found them a bit annoying. Now it's much easier for me to finish the post."
However, I've noticed that a lot of testers zoomed in when reading a blog post. Apparently, the team overlooked site legibility, which is also a major part of the reading experience.
"It's difficult for me to read if I don't zoom in."
After another round of iteration, we increased the body font size to 18px.
Exceeding Project Scope
Since e-book download pages and magazine pages also attract a good amount of traffic. Moreover, visitor behavior flow showed that more than 60% of the visitors jumped between blog posts and e-book download pages. To provide a consistent reading experience, we applied the idea to all other sections within Insperity resource center.
E-book Download Page
​Infographic Page
Case Study Page
The Outcome
253%
250%
20%
in blog subscribers​
in e-book downloads
in average pageview
One Subscription Popup. No More Interruption.
In the new design, only one subscription popup will show at the end of the post. Visitors can either subscribe to the blog if they find it helpful or leave without any resistance from the page.
Before
After
Clean Layout. No More Distraction.
The new blog post uses a clean layout to let visitors focus on the content.
Old Blog Post
.png)
New Blog Post
Less Scrolling. More Trust.
The two-column layout allows visitors to scan through more information at once, and adding the author's profile picture not only humanizes the business but also help visitors develop trust in the content.
Old Blog Homepage
.png)
New Blog Homepage
The Lesson
Connecting User Goals with Business Goals
Having worked in both Marketing and IT department, I found myself facing more resistance in the marketing department when advocating for users.
​
But this project allows me to understand the business from a marketer's perspective, and it helps me learn to communicate the value of UX in their language. Moreover, a positive user experience is worthless if it does not culminate in sales, so I learn to ask myself: what value can I bring to the table so that customers will be happy to stay as a customer?