Dear Blogger: UX Design, Research, PM

Project Overview:

Dear Blogger is an online website-building and blogging resource company with 250,000 readers. The site also hosts many writers who share their knowledge on building profitable and meaningful websites and blogs. The Dear Blogger website was seeing decreasing customer engagement and I was hired for a 5 month project to re-design the website. I led the team with a user-centered design process and managed the project from early sketches to implementation of the designs into functional code.

Exploring the Current Design

To begin the project, I asked the CEO of Dear Blogger to walk me through the website, the business structure, and the areas that need improvement. Additionally, I asked him about the Dear Blogger customers/readers, and what tools Dear Blogger uses to measure customer engagement and purchase decisions. There wasn’t an accurate set of analytics in place, so I led the addition of dozens of smart links to tell us which application, page, or website the customer purchases are coming from. We were off to a good start!

Learning about Dear Blogger Users

By analyzing customer databases and website analytics, I was able to learn about the customers; I researched the devices used to access the site, geographic regions, age ranges, etc. This data was all summarized and presented to the CEO to be considered for usability study recruitment, web development decisions, and more.

Personas:  

  • 3 Types of Readers
    1.     Website owners/bloggers
    2.     Prospective website owners/bloggers
    3.     Actively building website/blog
  • Writers- content contributors to Dear Blogger. They usually have their own blog or business that they are promoting as well.

Note about personas: information on  Demographics, Behaviors, and Intentional Goals were also considered in the personas but are kept confidential.

Evaluation of the Current Design

We evaluated the current design of Dear Blogger so that we could see what was working and what wasn’t. While there are many great methods to choose from when evaluating designs, it is important to select the ones that best fit the assignment. We selected 3 methods based on which ones made sense logistically, and also which ones would allow us to gather deep knowledge and a diverse set of feedback:

  1. Contextual Inquiry with the Editor in Chief.
  2. Survey with current website users.
  3. Usability Testing with new website users.

The table on the below from UC San Diego Design Lab, helped me explain the pros and cons of each method.

Need-finding | Creating Business Solutions

I used R Studio (R Programming) and Google Analytics to gain insights about customers at Dear Blogger; this included insights about customer purchase decisions, location, and other demographics. 

We found that the bounce rate on Dear Blogger was too high (bounce rate definition- the % of people who only view one page and then leave the site). In order to lower the bounce rate, we made a number of UX/UI fixes. One change was the addition of pop-ups asking the reader to subscribe, and making sure the interaction is delightful. We didn’t want to make a pop-up that forces a reader to subscribe, so we went with a gentle pop-up that appears only once the reader has already spent some time enjoying the site content.

After discovering that Dear Blogger was being inundated with customer web development requests, I created a customer portal to make this demand manageable. The Web Developer Customer portal automates the work of initial project take-offs, filters out spammers, and allows 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. Feel free to check out the Web Dev. Customer Portal here.

Sketching Design Options

Interactive Wireframing (Sketch & InVision)

We selected a few homepage layouts from the sketches and proceeded to create the wireframes using the Sketch App. Then we showed the prototypes to several users to test out and give us their feedback. See below screenshot of two of the wireframes that guided much of the front-end web development.

Mobile Responsive Design

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

One of the main fixes was changing the mobile font size from 11pt to 16pt. Small text can be hard for people to read, and as a result they could give up before they finish reading an article. This is especially true since the audience on Dear Blogger includes many people over the age of 50, who likely have greater difficulty with near vision eyesight.

You can see some of the changes in the before & after image below. Click image to enlarge.

Before & After Screenshots of Homepage:

Homepage Slider Design

I led the design and development of the new homepage slider. The logo in the bottom right of the images helps to distinguish them from advertisements. This was important because website visitors often form mental models of where to expect ads, and image sliders are usually associated with ads. See design below (click to enlarge):

Big Improvements in Customer Engagement!

  • User engagement on homepage increased 22%!
  • Average time a user spends on the homepage jumped up 39%.
  • Increased newsletter subscribers from the email form positioned it in sidebar. Plus, the CEO says he’s excited to respond to customer emails again!
  • Many more author submissions- too many new request to handle! This may be due to improved access to posts, improvement in overall feel of the site, or the authors finding the link in the footer.
  • More YouTube comments on any video featured in the sidebar area.

It will still be at least a few months before all the business impacts are realized, so I will keep updating here. Last updated 7-25-18

source: thesocialmediamonthly.com