Dear Blogger UX Audit & Implementation

Role:  UX Strategist & Researcher, Web Developer

Date:  Feb – Aug 2018

Tools:  Google Analytics, R Studio (data analysis), WordPress, Sketch, HTML&CSS 

Project Overview

Dear Blogger is a blogging resource company with 250,000+ readers. On the site, 30 writers share their knowledge about building profitable and compelling websites and blogs. The Dear Blogger website was experiencing a decrease in customer engagement, and I was brought on to reverse this trend. I led the team in the implementation of a user-centered design process, managing the project from the early sketches to the development of the designs into functional code.

Exploring the Current Design

At the outset, I asked Dear Blogger’s CEO to walk me through the website, the business structure, and the areas that needed improvement. I asked about the site’s customers/readers and the tools used to measure their engagement and customer conversions. Since there were none in place, I spearheaded adding analytics to the site that would give the business valuable insights into which articles were performing best for them.

User Research

By analyzing customer databases and website analytics, I was able to learn about the customer needs, the devices that they used to access the site, their geographic regions, age ranges, and so on. This data was summarized and presented to the CEO for consideration with regard to such issues as usability study recruitment and web development decisions.

USER PERSONAS

Readers

  • Owner of website
  • Prospective owner of website
  • Actively building website

Writers

  • Dear Blogger’s content contributors usually have their own blogs or businesses that they are promoting as well.

A note about the personas: Information on the personas’ demographics, behaviors, and intentional goals was also considered but was kept confidential.

User Experience Research

Before I launched the redesign, I researched the user experience for the current website in order to see what was working and what wasn’t. There are many good methods for user research, and I discussed the pros and cons of each with the team so as to identify the following three that best fit this project.

RESEARCH METHODS

  1. Contextual inquiry with the editor-in-chief
  2. Survey of 50 current website users
  3. Usability testing with 4 new website users

 

Usability Testing

I recruited and screened 40+ participants to find the 4 best matches for Dear Blogger’s target demographic/personas. I also handled the payments to the participants.

Data Analysis

I used data analysis tools (R Studio and Google Analytics) to gain insights in Dear Blogger’s customers.

The user bounce rate—that is, the proportion of visitors who view only one page before leaving the site—was high on Dear Blogger. In an effort to lower it, I made a number of UX/UI fixes. One change was the addition of pop-ups asking the reader to subscribe that did not detract from the interaction. Knowing that forceful pop-ups deter users, I used a gentle form that appears only after a reader has had the opportunity to appreciate the content.

Finding that Dear Blogger was being inundated with web development requests, I created a customer portal to manage the demand. The resulting Web Developer Customer portal automates the work of initial project take-offs, filters out spammers, and allows for quick prioritization of projects. In the second month of operation, dozens of clients came through the portal, including a famous actor, an e-commerce company, and several bloggers.

Wireframe Sketches

Interactive Prototyping

I selected a few homepage layouts from the sketches and proceeded to create the wireframes using a responsive design software called Sketch. Next, I showed the prototypes to several users, who tested them and provided feedback. Homepage Interaction:

 https://invis.io/UQL76BRHMZ6

Concept #1

Concept #2

Mobile Responsive Design

I also oversaw the development of mobile responsive features for Dear Blogger. Making the site mobile friendly involved changing the size of the content, font size, content padding, and more.

One of the main fixes was increasing the mobile font size from 11- to 16-point. Small text can be hard to read, causing visitors to give up before finishing an article. This is especially true of Dear Blogger, many of whose users are over the age of 50 and therefore prone to experience vision issues.

Some of the changes can be seen in the before & after image below.

Before & After Screenshots of Homepage

Find below two iterations of the homepage (The design on the right is the current Dear Blogger website): 

Before After

Find below two iterations of the homepage (The design on the right is the current Dear Blogger website): 

Before After

Homepage Slider Design

I also designed a series of new homepage sliders. The positioning of the logo at the bottom right in the images helps to distinguish them from advertisements. This was an important improvement because website visitors often form mental models of where to expect ads, and image sliders are usually associated with ads.

Impact on Customer Engagement

  • User engagement increased 25% (“bounce rate” improved 25% in Google Analytics)
  • The average time users spend on the site rised 36% (measured w/ Google Analytics).
  • More visitors are subscribing to the newsletterusing the email form positioned in the sidebar. Plus, the CEO says he’s excited to respond to customers’ emails again!
  • Author submissions are up, too; in fact, there have been more new requests than Dear Blogger can handle. This improvement may be due to enhanced access to posts, a better overall feel to the site, and/or authors easily finding the link in the footer.
  • There have been more YouTube comments on the videos featured in the sidebar area.

Work inquiry, question, or something else?

I'd love to hear from you, so feel free to reach out.