Redesigning Insperity's Business Blog

A redesign of Insperity's business blog to provide valuable learning materials and engaging reading experience. 

My role & my team

I am the lead UX Designer working with 5 PMs, 6 managers, 7 developers, 3 tech writers, and 2 marketing coordinators

My role & my team

I am the lead UX Designer working with 5 PMs, 6 managers, 7 developers, 3 tech writers, and 2 marketing coordinators

Challenge

I am the lead UX Designer working with 5 PMs, 6 managers, 7 developers, 3 tech writers, and 2 marketing coordinators

Challenge

I am the lead UX Designer working with 5 PMs, 6 managers, 7 developers, 3 tech writers, and 2 marketing coordinators

Goal

I am the lead UX Designer working with 5 PMs, 6 managers, 7 developers, 3 tech writers, and 2 marketing coordinators

Goal

I am the lead UX Designer working with 5 PMs, 6 managers, 7 developers, 3 tech writers, and 2 marketing coordinators

01

Identifying the problem

01

Identifying the problem

I collaborated with the data analytics team and front-end engineering team to conduct an audit on 2 years of site data and 300+ survey responses. The data revealed that 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.

Too many pop-ups forced visitors to leave site early

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.

Too many pop-ups forced visitors to leave site early

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.

Too many pop-ups forced visitors to leave site early

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.

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.

02

Building a streamlined process

02

Building a streamlined process

02

Building a streamlined process

To create an engaging reading experience, I led the team to redefine promotional popup logic and align on a set of designs that focus on the content.

Redefine promotional popup logic

Partnered with the front-end developer, I identified three types of popups and their respective show-hide logic: 

1. Subscription pop-ups that appear when a visitor lands on a blog post,

2. E-book download pop-ups that show up a few seconds later,

3. Exit pop-ups that show up when the cursor moves outside of the page.


To provide a better reading experience, the team aligned on 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.


Redefine promotional popup logic

Partnered with the front-end developer, I identified three types of popups and their respective show-hide logic: 

1. Subscription pop-ups that appear when a visitor lands on a blog post,

2. E-book download pop-ups that show up a few seconds later,

3. Exit pop-ups that show up when the cursor moves outside of the page.


To provide a better reading experience, the team aligned on 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.


Redefine promotional popup logic

Partnered with the front-end developer, I identified three types of popups and their respective show-hide logic: 

1. Subscription pop-ups that appear when a visitor lands on a blog post,

2. E-book download pop-ups that show up a few seconds later,

3. Exit pop-ups that show up when the cursor moves outside of the page.


To provide a better reading experience, the team aligned on 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.


Optimize the 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.

Before

After

Improved information architecture

The new homepage uses a two-column layout to surface more content with less scrolling.

Before

After

For individual blog posts, I reinforced authorship with surfacing the author's profile picture​ and adopted one-column layout to create a more engaging reading environment.

Before

After

03

Iterating on design

User testing showed that the users wanted to have all information listed on the screen for a quick scan-through. I adjusted my design to reflect their feedback, and another round of user testing showed that the users enjoyed the new concept.

Before

After

03

Iterating on design

User testing showed that the users wanted to have all information listed on the screen for a quick scan-through. I adjusted my design to reflect their feedback, and another round of user testing showed that the users enjoyed the new concept.

Before

After

03

Iterating on design

User testing showed that the users wanted to have all information listed on the screen for a quick scan-through. I adjusted my design to reflect their feedback, and another round of user testing showed that the users enjoyed the new concept.

Before

After

04

An engaging reading experience that

253% ↑

blog subscribers​ in 1 year

250% ↑

e-book downloads​ in 1 year

20% ↑

average pageview in 6 months

04

An engaging reading experience that

253% ↑

blog subscribers​ in 1 year

250% ↑

e-book downloads​ in 1 year

20% ↑

average pageview in 6 months

04

An engaging reading experience that

34

customers on board in 1 month

90%

customer satisfaction rate

194%

MoM growth within 2 months

A role-specific and task-oriented dashboard

A role-specific and task-oriented dashboard

A user-centric information architecture

A user-centric information architecture

✦ MORE WORK ✦ MORE WORK

Simplifying data access

From concept to launch

Cross-team collaboration

User research

User journey

Personas

UX/UI

Wireframes

User testing

✦ MORE WORK ✦ MORE WORK

Simplifying data access

From concept to launch

Cross-team collaboration

User research

User journey

Personas

UX/UI

Wireframes

User testing

✦ MORE WORK ✦ MORE WORK

Simplifying data access

From concept to launch

Cross-team collaboration

User research

User journey

Personas

UX/UI

Wireframes

User testing