Boost Conversion with Simplicity
Role
Lead UX Designer
company
Insperity, Inc.
Duration
Aug 2017 - Feb 2018
Insperity's blog attracts > 40,000 visitors to the site every week. In the beginning of 2017, our team redesigned the blog to improve our reader experience.
Two months after launching the new design, we reached the outcome of a 250% increase on e-book downloads, and 253% on the number of blog subscribers.
01
Project Overview
Q: Why this project?
Insperity provides Human Resource (HR) services for companies that need support establishing their HR practices. HR can be very industry-specific and a lot of business owners don’t know how to get started with it. Insperity provides a knowledge hub to educate our readers on HR-related topics. Moreover, we provide e-books, case studies, and other downloadable materials for to educate those that want more HR knowledge. Readers interested in learning more can subscribe to our blog or download those materials - both can be done by filling out a form on the page.
And here is the cool part: while filling out the form, readers’ email addresses will be stored in our database, and we can keep in touch with them by sending out new blog posts and emails. If they are interested in us helping with their HR strategy, our sales team can follow up with them. In digital marketing, that’s what we call a sales lead. That’s another reason we created the blog, to gain access to sales leads.
Q: So the goal of this project is?
From a business standpoint, the main goal of this project is to gain access to sales leads by increasing the # of e-book downloads, as well as the # of blog subscribers. But in order to achieve that, we needed to improve the overall reading experience.
Q: Any challenges?
The biggest challenge I encountered was finding the tipping point between user goals and business goals. As a UX Designer, putting the user first is critical, but we also need to meet marketing goals. How can I find the balance between delivering a user-friendly reading environment while encouraging readers to subscribe to the blog or download an e-book?
But actually, the answer to the question is simple: Data.
Data demonstrates how readers interact with the blog, what elements work, and what doesn’t work. It guides us to make decisions more efficiently and objectively.
Another challenge rose due to the unique nature of this company: we could not directly talk to blog users or our clients. But here is where technologies come into place. Online surveys allowed us to gather user insights remotely.
MY ROLE
- Conducted user research to understand user pain points
- Built interactive wireframes to
communicate page flow and interaction
- Assisted in visual design
- Participated in QA process
UX Designer
MY TOOLS
02
Research
User Research, market research, and data analysis
Using Hotjar's survey tool, we asked our readers one question: what would you change on the blog to improve your reading experience? And the feedback shows that readers wanted us to remove distractions on the blog: there are too many additional links and content next to the article, which makes it hard for them to concentrate on the article itself. Also, the instant popup created a huge distraction to the readers.
I also conducted market research to understand what makes publication platforms, such as Medium, Moz, and Hubspot user-friendly. I learned that, to create an enjoyable reading environment, it’s important to let readers focus on the article by removing unnecessary links and design elements. This result reinforces what we learned from the user research.
Screenshots of representative feedback from Hotjar
A Screenshot of the market research documentation
Last but not least, data from Google Analytics helped us identify two areas to improve in: decrease bounce rate and increase average time spent on page.
In conclusion, the redesign should focus on
creating a more engaging reading experience by
Removing distractions from the blog pages
03
Design Process
Wireframe
The direction for the redesign became clear after the research, but to efficiently communicate with the team, I used Axure to create an interactive wireframe to demonstrate the site flow and the layout of each page.
I collaborated with 1 project manager, 2 copywriters and 1 developer to explore three different layouts for both the blog homepage and blog interior page. We paid close attention to the characters in one line, to make sure that the reading experience will be as effortless as possible. After carefully discussing with the team, we decided to go with the layout without any rails. You can interact with the finalized wireframe here.
Screenshots of the article page, we moved forward with the middle one
Team collaboration
I transferred the wireframe to a .ai format and delivered it to our visual designer to let her start with the visual design. At the same time, I participated in various discussions with our copywriters and developers in terms of concerns of page implementation and adding new features to the page.
I also worked on webpage QA and made sure the blog worked as the way we designed.
04
Final Look
01 - Homepage
Before
After
02 - Article Page
Before
After
05
Outcome
253% increase on e-book downloads
250% increase on the # of blog subscribers
Average page bounce rate decreased 25%
# of general pageview increased 20%
# of unique pageview increased 20%