Dear Blogger: UX Design, Research, PM

Project Overview:

The aim of this portfolio piece is to show how UX Design & Research can lead to practical improvements for a business. I led the whole user-centered design process from start to finish, and then implemented the UI/UX  designs into functional code.

Contextual Inquiry w/ CEO of Dear Blogger:

Dear Blogger is a popular online publication that attracts 250,000+ readers and hosts 20+ writers who share their knowledge on building websites and blogs. 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. I wanted to know where he gets most of his revenue, so we could prioritize those areas.  

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.

Selecting Methods for Evaluating Designs & Learning about Users

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. Expert Heuristic Evaluations 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.

Heuristics/ Expert Critique

We needed more research on how to improve Dear Blogger, so I explored the possible candidates for expert critique/heuristic evaluations. I decided to conduct heuristic evaluations with the editor at Dear Blogger; she has been working with the CEO for 5+ years, and she proved to be an invaluable resource for learning about the company, customers, and what elements of the business need improvement. Her feedback helped to inform many of the design changes in the project, particularly changes related to making the content more discoverable.

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. Here is a link to an interactive InVision prototype showing the Popular Guide Dropdown Menu.  [For a more extensive InVision prototype, see my Coursera re-design project]

Managing Concurrent Projects: Design & Engineering

Through our various user studies, analysis, and tests, we came up with a long list of fixes for the site. I managed the prioritization and implementation of these fixes, which included hiring a freelance software developer (PHP & CSS).

  1. Mobile Responsive Fix (see below for details)
  2. Web Development for New Design (see below for details)–  UX/UI improvements were made to the homepage and dozens of other pages on the site.
  3. Technical Performance Improvements from Usability Study- I also managed the repairs of some technical performance issues on Dear Blogger. During our usability study we worked with a user who had very poor internet connection and it allowed us to discover a significant page loading issue.
  4. Vectorizing Logo- fixed the old logo that was low-resolution and pixelated

Mobile Responsive Fix

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!

  • 2x increase in customer engagement.
  • Average time for a user on the site has already jumped up 33%.
  • The bounce rate on homepage improved by dropping 16% (bounce rate is the percentage of people that leave the site after just viewing one page).
  • More YouTube comments consistently on any video featured in the sidebar area.
  • Increased subscribers from the email form positioned it in sidebar. Plus, the CEO says he’s excited to respond to customer emails again!
  • More authors coming in- too many new request to handle! Maybe due to improved access to posts, improvement in overall feel of the site, or the authors finding the link in the footer. In the words of the CEO,  ” it’s like LOTS of writers”.

It will still be at least a few months before all the business impacts are realized, so I will keep updating here.

source: thesocialmediamonthly.com