Dear Blogger: User Research & Website Redesign

Skills:  UX design & research, project management, data analysis

Date: February 2018- August 2018

Tools: Wordpress, Google Analytics, Photoshop, Sketch


Project Overview:

Dear Blogger is a blogging resource company with 250,000 readers. On the site, more than 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 hired as part of a six-month project to redesign the website and consult with the management team in order 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 purchase decisions. Since no accurate set of analytics was in place, I spearheaded the addition of dozens of smart links to indicate the application, page, or website from which the customer purchases originated. We were off to a good start!

User Research

By analyzing customer databases and website analytics, I was able to learn about the customers, 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
    • owners of websites
    • prospective owners of websites
    • those engaged in actively building websites
  • 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.

METHODS USED:

  1. contextual inquiry with the editor-in-chief
  2. survey of current website users
  3. usability testing with new website users

 

SCREENING OF PARTICIPANTS FOR A USABILITY STUDY

Sample of Results

Data Analysis

I used R Studio (R Programming) and Google Analytics to gain insights in Dear Blogger’s customers, including their purchase decisions, locations, and various other demographics.

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

Sketching

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

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. Click the image to enlarge.

Before & After Screenshots of Homepage

 

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

Homepage Slider Design

The development of the new homepage slider was also done under my leadership. 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. The design can be seen below (click to enlarge):

 

Impact on Customer Engagement

  • User engagement has increased 25%.
  • The average time users spend on the site is up 36%.
  • More visitors are subscribing to the newsletter using 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.
source: thesocialmediamonthly.com