USER RESEARCH / IDEATING / DESIGN SYSTEM /WIREFRAMING / HIGH-FID PROTOTYPES

The Washington Post Redesign

The Washington Post is an American daily newspaper published in Washington D.C. It is the most widely circulated newspaper within the Washington Metropolitan area and large parts of Virginia and has a large national and international audience with the digital version having a growing number of readers in the U.S. and around the globe. I was given the opportunity to redesign the Washington Post's website to suit more specifically to its user base and needs.

  PROJECT INFO

• The project was chosen for the User Interface Design class
• Solo work
• April 2021 - June 2021

ROLES AND RESPONSIBILITIES

• Heuristic Analysis & Usability Test to find problems on the current website
• Ideating: Sketching Ideas for new interfaces
• Creating a new design system for the Washington Post home page & lead article
• Animating: Using Figma prototype settings to create high-fidelity micro-interactions.

     TOOLS USED

• Adobe After Effects
• Figma

The Problem

After doing a thorough Heuristic Analysis and Usability test, I found that

1. The home page has a high text/article density which makes the experience of going through the details overwhelming & time-consuming. It is hard for a user to effectively scan the page for useful details due to the large amount of text fitted so close to each other.
2. The overwhelming visual design was against both Hick’s law (the more choices you present your users with, the longer it will take them to reach a decision) and Miller’s law (the number of objects an average person can hold in working memory is about seven.) This makes the user take a longer time to scan for something they want to read about.

Goals & Objectives

1) To use design principles to make the Washington Post Website less overwhelming, more appealing, and more accessible to readers for effective and quick scanning.

2) Create 3 Versions of the Website: Phone, iPad, PC

Constraints

The biggest constraint I had while pursuing my goal of creating a more visually appealing page was the amount of content (Number of articles, space required for appropriate description). The Washington Post releases hundreds of articles every day and all these articles have to show up on the Home page for users to view them. Creating a design that still keeps the same or similar amount of information with a more breathable UI was a completely new challenge for me.

The Solution

Phone

Tablet

PC

The Process

Target Audience

Understanding Content Structure

To understand content structure I took screenshots of the website at 3 different breakpoints: 375px, 768px, and 1280px.

After getting screenshots of the entire page, I broke it down further and made content wireframes of each page at each breakpoint.

I analyzed the content wireframe structure to understand how the current version of the Washington Post is organized. This process helped me understand the overall structure of the website and what are some key areas that need change to achieve my goal.

Once I got done with my research, I started working on Wireframes and a design system for the Washington Post.

Design Sketches

Home Page

Lead Article

Style Guide

High-Fidelity Wireframes

Phone

Tablet

Computer

Final Designs

Phone

Tablet

Computer

The final redesign of the Washington Post features a much cleaner and breathable look while maintaining the same amount of information. I could achieve this by doing research in typefaces and sizes and testing what combination of text and image sizes can help me achieve are both clean and pleasing to look at.
I also experimented with the interplay between text and images and finally decided to use different versions of a text tab over an image to break the structural and visual monotony of the page as the reader scrolls down the page.
The new design has redefined the design hierarchy in aspects of font sizes and color. It also uses blues and reds as heading covers and backgrounds and features a back shadow of hands on the top article on the Home Page, which represents freedom of speech and democracy and gives another touch in terms of branding the website as the Washington Post.

The Results

After doing a second heuristic analysis, we found that the redesigned version has the following improvements

• Improved spacing for a breathable and clean layout
• The article density has been reduced on the homepage according to Miller's Law
• The news is arranged in a way so that it feels less overwhelming to the target audience
• While the number of articles on a page is decreased, the user still has access to all the news
  

The redesigned version was able to address user pains and needs and provided a less overwhelming visual design with increased scanning effectiveness. I was able to achieve all user goals and alleviate some of the user pains

Made with <3 by Tushar Rai ©2024