An Online Publisher’s Website Analysis

Heuristic review and proposal of monthly research and tests. Included the early iterations to introduce a paywall.


Business Problem

Big Picture

Interviewing Stakeholders & SMEs

Technical Questions

Sketching the Flow

Testing with Admin Users

Figma Wireframes

Figma Prototype

Designing for Failure


Company Background

how does this thing work?

The client's business model was pretty complex, and I found quite fascinating. Their authority and readership were rooted in the awards ceremonies they've carried out for almost a century. They receive a lot of material voluntarily from companies competing for these awards. And the appraisal process for the awards selection in turn helps provide intel and guide their online publishing department.

Project #Goals

A meeting with the stakeholders made it clear they wanted to address several areas simultaneously. I would be sure to organize these according to their dependencies later on. Meanwhile, I would also note which members of my team I would need to involve.

  • Introduce online subscription registration process for premium content
  • Create an online environment conducive to Advertisers
  • Improve content integration
  • Enhance overall look and feel
  • Learn more about the appetite for continued research
  • Improve user behavior metrics that are connected with revenue

Conclusions from Navigation Layout Review

Observing and Documenting

The following work was included in the scope.

  • Review and perform a heuristic review for key pages: Homepage, category, and article pages. Myself, a visual designer, as well as a product manager who was interested in the project, would fill out the Heuristic sheet and provide additional thoughts.
  • Review competitors, document relevant business information and identify design patterns in use.
  • Outline methods for integrating a subscription-based revenue model.
  • Record important baseline metrics such as pages per visit, number of weekly and monthly returning visitors, etc.

Creating Product Categories for SEO and Google Shopping


Outline Select Competitor Key Pages

We wanted to focus on how a few competitors utilized space on various key pages. Here I outlined sections and color coded them for Article & Homepages of 4 competitors. I also provided information on the company’s revenue streams and content production to connect tactics to their larger strategy.


Vox identifies as a technology company that produces media, rather than an “old media” company using technology. They were chosen in this review for their relatively quick ascent in modern news distribution using moden technology. They may represent a general approach more commonly adoptd by “digital media” companies.

Vox runs a YouTube channel and several podcasts. Both of these exist on external platforms as well as within their own website portals. They’re harnessing the UX and SEO value of Podcast transcripts and show notes, as well as the network leverage of corresponding platforms such as YouTube, Stitcher, and Apple Podcasts to aid acquisition.

Competitor Research

I recorded layouts from over a dozen competitors and took notes of useful and interesting design patterns. Here are some examples:

  • NPR’s Second Tier Navigation changes according to relevance, not according to logical categorization.
  • NPR’s right side media player is docked on all pages.
  • Splash page featuring 3 product offers
  • Daisy chained article pages (at the end of 1 page, a new article begins)
    • Fast Company:
    • Forbes: (they are actively testing variations, and a current article page may not look as it did in the screenshot)
  • Regular visits to the site can “earn” user additional access
  • Uninterrupted subscription time earns user additional offers
  • Limited free access to premium content (limit per view, content teaser)
  • Time sensitive offers on shares (elements of viral coefficient)
    • Mid-article “further reading” and “promo material” cross-links for cross-linking or paywalls

Layout Patterns for eCommerce Navigation


Heuristic Review

Myself and members on my team reviewed the site and offered feedback. We graded the site on 5 categories, each category containing a dozen of sub-points. 

A few notable observations:

  • Downright immoral navigation label structuring and usability.
  • Confusing and discontinuous article labeling system.
  • Generally poor use of whitespace
  • Frequent use of aggressive attention grabbers.
  • Cannibalizing use of ads and vendor services to monetize the site.

UX and Site Metrics

On the one hand, we want to make sure the primary business objectives related to the website are implemented. But we also have to see how users interact with that implementation.

We need to turn the abundance of options presented to the user into questions about the user-journey and navigation.

  • How do users get to the site? What ad or content did they click? What are they expecting?
  • What do they do here? Heat and scroll maps, traffic behavior, pages per visit.
  • What might they want to do there? Qualitative research eg: user interviews, intersected with the client’s capabilities and long-term objectives.
  • How might we simplify navigation to serve users as well as business objectives? Card sorting, tree testing, task analysis.



Example Navigation

I wanted to show the client how we might solidify research findings into paths for design.


There are a few things we should do absolutely: adding labels, removing lower priority and categorically secondary links, and adding important items to the desktop navigation bar. We have provided a few possible examples below.

The specific labels and grouping structure can remain the same for the sake of speed and avoiding large sudden changes.

In the mid-term, we should look at how your site visitors both comprehend the subject matter and discover their goals in a way that informs our navigation structure. We can approach this with a closed card sorting exercise and very short survey, while observing traffic patterns.