top of page
pratt news.png

Optimizing Interaction Accessibility and Increasing User Engagement for Pratt News Website October 2021 

Pratt News is a website that collects news articles from the Pratt Institute campus and community. Using Google Analytics and Hotjar Heatmaps, this project analyzes users’ behavior (Sept 20 — Oct 2, 2021) on the newly launched Pratt News website, focusing on its Home and Prattfolio pages, in order to understand how people are interacting with the site and responding to the new design. To make interactions more accessible and visible across devices, we provided recommendations for the navigation, CTA buttons, articles previews on the homepage and for content on the Prattfolio page on both mobile and desktop versions.

Client:                 Pratt News Design

Duration:            2 weeks

Location:            New York, NY

Method:             Google Analytics, HotJar Heatmaps

Teammate:         Aichen Guo, Xiujie Bi, Victor Chien

                             Preet Gangrade, Danielle Kingberg

My role:       

  • Compared site performance on mobile and desktop using HotJar heatmap

  • Analyzed findings about navigation bar and mobile & desktop clicks based on HotJar Data

  • Summarized findings about page path of Prattfolio based on Google Analytics

  • Created recommendations for CTA button placement

About Pratt News: precursor to a large-scale re-design of the main pratt.edu site

After a large-scale re-design of the main pratt.edu website, the new site was launched at the end of July, 2021. 
Curious to find out the performance of the new site, our clients - the creative director and the lead developer from the Pratt website design team - asked us to conduct a data-driven research to help them understand how people are interacting with the new Pratt News site to make further improvements.

Goals of the research are:

  • to understand how well the new site is performing

  • to suggest ways to increase user engagement, and

  • to inform the design of the new main Pratt website.

How to analyze a website's performance?

1. IDENTIFY RESEARCH METHODS & METRICS

截屏2021-10-15 下午3.59.49.png
Methods

2. GENERATE RESEARCH QUESTIONS

  • Who are our users?
    (e.g. new/returning, location, device preferences...etc.)

  • How effective is the current visual hierarchy on the overview page to engage the users by device?

  • What elements get the most engagement by device? Least?
    (e.g. Buttons, hyperlinks, layout...etc)

  • What are people clicking on?
    (e.g. button, hyperlinks, etc.) 

  • How does placement and location of these elements affect users’ interaction?

IMG_3286.HEIC

Team Discussion

 
3. UNDERSTAND USERS

截屏2021-10-14 下午8.30.21.png

​Based on data from Google Analytics, we were able to see that:

  • User Types include 65% new users & 35% returning users

  • The majority of users are accessing the Pratt News site via Desktop 64% or Mobile 34%.

  • Overall, the bounce rate is 25% higher on mobile than desktop.

​

Therefore, while it is crucial to assure the performance of the desktop version to secure the site's primary users, it is also important to improve the mobile version to lower the bounce rate.

User Data from Google Analytics

Assessing Homepage - Why do mobile users access more news content than desktop users?

Assess Homepage
截屏2021-10-14 下午10.55.13.png

By comparing the heatmaps of Pratt News homepage on mobile and desktop versions, we found out:

​

Mobile

  • 75% reach Daily Hub

  • 50% reach Prattfolio

​

Desktop

  • 50% reach Daily Hub

  • 25% reach Prattfolio

​

To find out why, we decided to explore the following aspects that could potentially lead to the difference in scroll rate:

  • if navigation bars are intuitive,

  • if CTA buttons are obvious, and

  • where users like to click on using different devices.

HotJar Scrollmaps of Mobile & Desktop Versions

1. THE NAVIGATION BARS ON MOBILE ARE LESS ACCESSIBLE THAN DESKTOP

截屏2021-10-14 下午11.16.53.png
截屏2021-10-14 下午11.17.12.png

Desktop Heatmap

Mobile Heatmap

The News page has two navigation bars for two different websites: the main Pratt website, and the Pratt News website.
​
What worked well — the desktop navigation bar (1) is optimized for easy access, attracting more clicks to explore the Pratt News website. A more intuitive navigation bar could be the reason that people scroll less on homepage using desktop.
​
What didn’t work well — the folded navigation bar on mobile (2) receives less interaction compared to the Pratt hamburger icon (3) as shown in the heatmaps, which distracts users from the News navigation bar.
 
When the news navigation menu is more accessible, it results in a lower bounce rate and less effort in scrolling for the user to get to their interested content, which explains why desktop homepage has less scroll rate.

截屏2021-10-14 下午11.39.17.png

2. CTA PLACEMENT IS TOO LOW

CTA Buttons for Prattfolio and Daily Hub Sections on Desktop & Mobile

Call-to-action (CTA) buttons are located at the bottom of each section on both desktop and mobile, as shown above.

This could possibly explain the difference in scroll depth because, users unfamiliar with the page layout have to scroll down to the bottom of each section to access more information, which can cause excessive scrolling and thus higher scroll rate on mobile version since all stories are displayed vertically. The lack of efficiency in reading resulted in less clicks for sections like Daily Hub and Prattfolio that are placed further down on the page.

3. CLICKABLE ELEMENTS ABOVE THE FOLD MAKE AN INFLUENCE: WHILE ICONS AND IMAGES GET MORE CLICKS ON MOBILE, TITLES GET MORE CLICKS ON DESKTOP

截屏2021-10-15 上午12.08.39.png

Clicks on Mobile Homepage

Clicks on Desktop Homepage

In comparison, we found that

  • Recorded mobile users prefer to click on icons (40% clicks) rather than plain text

  • Mobile users also prefer to click on pictures (20% clicks) rather than titles to access news articles

  • Recorded desktop users clicked more on news titles to access articles rather than on pictures

 

As the content shown above the fold is different on mobile and desktop, the preference of where to click on using different devices can potentially influence the scroll rate. 

Recommendations for Homepage - Redesign mobile navigation, move CTA buttons, and simplify article previews

1. MAKE NEWS MENU ITEMS VISIBLE ON MOBILE

Homepage Solutions
截屏2021-10-15 上午12.39.09.png

Redesign Mobile Navigation Bar

To make navigation more intuitive on mobile, we changed the folded menu bar to a visible menu, in which users can navigate to a certain category directly without additional clicks. This could potentially increase mobile users' interaction with the Pratt News website and thus reduce the mobile bounce rate.

2. PLACE CTA BUTTONS AT THE TOP OF SECTIONS & REDUCE CONTENT SHOWN IN DAILY HUB ON MOBILE

�截屏2021-10-15 上午1.33.29.png

Mockup of Moving CTA Buttons to the Top

To make the CTA buttons more accessible, it is recommended to place CTA buttons at the top of sections for reading efficiency. 

Moreover, while stories on Daily Hub are displayed horizontally on desktop, they are shown vertically on mobile, leading to excessive scrolling. Thus, it is also recommended to reduce content shown in daily hub on mobile by shortening the big image and reducing 5 stories to 3 stories to make the lower sections more accessible.

3. SIMPLIFY THE ARTICLE PREVIEWS ON THE HOMEPAGE

截屏2021-10-15 上午1.56.52.png

Use the Atlantic as an Example for Mockup

Since icons and images get more clicks on mobile and titles get more clicks on desktop, it is recommended to simplify the article previews by prioritizing the most clickable elements above the fold on each platform. 
As shown in the mockup, it is advised to remove article descriptions for non-featured articles and reduce the image and title size to entice more interaction by offering more content above the fold. To make "read more" more clickable, it is also recommended to add an arrow icon to increase users' interaction with the site.

Examine Prattfolio

Examining Prattfolio Page - Low bounce rate but short average time spent.
Where do users go?

截屏2021-10-15 上午2.10.06.png

GA Pageviews of Prattfolio 

According to data from Google Analytics, there’s a low bounce rate (25%), but a short average time (30s) spent on the page, so where are users coming from and going?

1. USERS MOSTLY GO BACK TO HOMEPAGE OR PRATTFOLIO CONTENT

截屏2021-10-15 上午2.13.46.png

GA Page Path for Prattfolio

Good news! The page is effectively guiding users to content with the majority quickly navigating from main pages to access the current issue or the 3rd featured article on the main Prattfolio page. 

Bad news — The majority are quickly navigating back to the Pratt News homepage.

2. WITHIN PRATTFOLIO CONTENT, USERS ARE MOST INTERESTED IN VIEWING THE CURRENT MAGAZINE ISSUE OR DEPARTMENT NEWS

As shown in the Heatmap,

  • Users have a strong tendency to click on the Current Issue or Departments rather than scrolling down to access more content. 

  • 50% of users click on descriptions, titles and pictures for the first 7 articles on the page. 

  • 75% desktop users only reach the 2nd article on the Prattfolio page.

截屏2021-10-15 上午2.22.20.png

HotJar Heatmap of Prattfolio

3. CAUSE OF LOW PERFORMANCE - DUPLICATED CONTENT ON THE FEATURED ARTICLES AND CURRENT ISSUE

截屏2021-10-15 上午2.30.16.png

As shown in the webpage screenshots, the Featured articles and Current Issue articles are re-ordered duplicates, which can potentially cause users exiting the page due to repeating content.

Duplicated Content on Current Issue and Features

Prattfolio Solution

Recommendation for Prattfolio - Streamline content to encourage more views of the latest news and avoid unnecessary clicks

  • Combine the main Prattfolio page and current issue to streamline the experience by giving users access to explore the latest content with less clicks.

  • Change the Current Issue button to Previous Issues with a drop-down menu to encourage users to explore past issues if interested rather than make the content available as part of the main Prattfolio page

截屏2021-10-15 上午2.39.18.png

Mockup for Prattfolio

Project Summary

截屏2021-10-15 上午2.45.54.png

A Visual Summary of the Performance of Pratt News

OVERALL FINDINGS

Our users are mostly on desktop (64%) and mobile (34%).

  1. The navigation bars on mobile are less accessible than desktop.

  2. Pratt News: CTA placement makes the interaction less accessible. 

  3. Pratt News: On mobile, icons and images attracts more clicks.

  4. Prattfolio: While Users are most interested in the viewing the current magazine issue or Department news, the Featured articles and Current Issue articles are duplicated.

SUMMARY OF RECOMMENDATIONS

Recommendations for Homepage:

  • Pratt News Mobile: Make menu items visible

  • Place CTA buttons at the top of modules, reducing content of Daily Hub on mobile

  • Simplify the article previews to entice more interactions

 

Recommendations for Prattfolio:

  • Combine Prattfolio overview page with the Current issue to encourage more views on the latest content and reduce clicks

Concluding with positive client feedback and things to consider for next steps

CLIENT: "IMPRESSIVE DATA-DRIVEN ANALYSIS" 

Outcomes

  • The Creative Director and Lead Developer from Pratt News were very impressed of our team’s work.

  • They especially liked the CTA button recommendation but they also think placing it at the bottom of the sections makes sense as an expansion of the content, so they are interested in looking at the data in the future after moving the buttons.

  • They think adjusting the image of the DailyHub stories on mobile is a tricky one. Removing it might not be a good choice as people are attracted to images. But cropping it or adjusting the size that only show a portion of an image might be inappropriate in some cases and editorials may not like it.

  • Overall, they found the data driven approach to our recommendations very helpful and looked forward to incorporating our research into future improvements.

IMG_3424.HEIC

Presentation to the Clients

NEXT STEPS: INCORPORATING USABILITY TEST & A/B TESTING

Throughout the process, there are a few limitations regarding web analytics:

  • As HotJar was setup to begin collecting data on September 22nd, the data we were able to work with was only three weeks long. Longer time recorded could lead to more insightful and valuable evaluation.

  • On HotJar Heatmap view, links under the hamburger menu are folded, which makes it unclear if users clicked the icon out of confusion or selected a navigation option. 

  • HotJar's recordings do not capture audio. While the lack of audio is good for protecting users' privacy, it is hard for analysts to understand users' clicks and scroll behavior in action.

​

To account for these setbacks, I would conduct the following approaches if given more time:

  • Incorporating a usability test as part of the research to support user behavior observed through the HotJar;

  • Exploring more pages on the website to make comprehensive recommendations and further improve the current design;

  • Performing A/B testing to continue tracking website performance and find out if current recommendations are effective.

 

 © 2024 by Aichen Guo.

bottom of page