TheHardTimes.net

Website redesign, 2017

Overview

TheHardTimes.net is an indepent satire blog that pokes fun at music, video games, and subculture. It acrues over 400 million visits annualy, and boasts a dedicated social media audience of nearly 800,000 followers.

Contributions

  • Research
  • Wireframes
  • UI Design
  • UX Design
  • Front-end Development

Collaborators

  • Matt Saincome
    Founder, CEO
  • Amber Bennoui
    Technical Product Manager
  • Will Garcia
    Backend Engineer

The Challenge:

As the brand and blog grew and expanded into new terrain, the original layout became cluttered with a mix of colour, visuals, and text competing for attention.

Goals

  • Reduce clutter and create a more cohesive, professional feeling experience.
  • Create clear visual hierarchy and navigation between Hard Times, Blog, and Hard Drive.
  • Create style guide that can be adapted to other expansions and sub-brands.

The pre-2017 version of TheHardtimes.net (click to enlarge)

Process

Research

We began by looking into what made high profile news sites stand out, as well as identifying and cataloging issues with the current site.

Wireframes

Created wireframes for mobile and desktop screen layouts to detail what the structure should look like.

Prototyping

Created high fidelity mockups to visualise the finished product and provide baseline for building the site.

Build

Building off of an existing Wordpress theme we built the site in a dev environment and launched after thorough testing and prep.

Iterating

Based on immediate feedback we made updates to include more thumbnails on the home page articles and filter out redundant articles on the home page. We also monitor Google Analytics to look for opportunities to optimize.

Result

Wireframes

Hard Times homepage wireframe

Hard Times post page wireframe

Colours

Interactions

Fonts

Laptop and mobile phone showing screenshots of TheHardTimes.net home page
Laptop and mobile phone showing screenshots of TheHardTimes.net article page
See it in action

Takeaways

  1. The site now has a clear visual hierarchy and improved typography, making pages more scannable and content more readable.
  2. A consistent visual language and guidelines has allowed for easy application to verticals with their own branding (e.g. Hard Drive), while still feeling like part of The Hard Times umbrella.
  3. Initially we launched without additional photos in main content area on home page to cut down on cognitive and bandwidth overload, but users expressed missing the imagery that visually supported funny headlines so we brought them back.