THE SUN REDESIGN. – A QUICKFIRE UX REDESIGN

TIMELINE: 2 days

It’s amazing that the amount of news that happens in the world every day always just exactly fits the newspaper. Jerry Seinfeld

COVID-19 Page

Introduction

While breezing through twitter for sports news that I came across THE Sun website – a news website. I went inside website and found that the content was everywhere and I had to literally spend a good chunk of time searching for what I want. In addition to that, I also noticed that the content, the design, and the incessant advertisements hampered my experience on the website. No website wants that. Of course not. Regardless of the content , I decided to make some improvements to The Sun. So with my UX brains at work, the mission was to make the design simpler, the content readable, and increase the overall utility of the website.

MY ROLE: Designing and structuring The Sun website for better usability given the limited timeframe.

THE BRIEF

Given the reader base, how can THE SUN website be redesigned in such a way that the overall utility of the site can be improved?


Why do I need only two days? A great question.

I know that there are challenges that people solve in a day also but given that it is a news website and I wanted the redesign to be good, I honestly believe that I gave myself a good timeline. I wanted to challenge myself on this timeline as it offered little to no opportunity for extended and exhaustive research. With the assumption that all I had was the internet, family members to talk to, and some development and design tools. Could it be done in two days? I believed so ; given all the constraints. My belief turned into reality when I got about 7/8 pages up after careful thinking and brainstorming at the end of the second day.

THE PROCESS

As I set myself a timeline of 2 days, I wanted to divide the process in such a way that I get enough time to pull of the prototype after careful consideration of the data collected and synthesized. Hence I had to figure out the best way to go about things and decided to explore and generate ideas on day one while focusing solely on the design and prototype on the second day.

Day 1 🗓️

The first day, I explored to see who the users are for the website, what kind of news they portray, how their site is structured and who their competition are etc., I set out to find out all the possible issues with the website in addition to the content and did some quick review checks online. I performed multiple Nano usability tests by asking family members to sit on the site for about 15 minutes and noted down the usability concerns. Some of the overarching usability concerns are listed below. I wanted to finish gathering all the data

USABILITY CONCERNS derived from the nano usability tests:

  • Too much content.
  • A navigational loop causes confusion to the users.
  • Not kid-friendly.
  • The news may be irrelevant.
  • Cluttered with advertisements.
  • Not user-friendly – decreased accessibility throughout the website.

COMPETITIVE ANALYSIS

Considering this is a news website, I found the method of competitive analysis very useful. For the purpose of simplicity, I chose 5 competitor websites – The Boston Globe, The Washington Post, Sky News, The New York Times, and the Guardian As always, I wrote down notes on index cards about each product, and laid them side by side for a comparative study. I gained useful insights on how the website fares among the rest albeit not region centric.

SWOT ANALYSIS

Each Problem is to be analyzed one after the other. I wanted to validate some of the concerns by doing a SWOT (Strengths, Analysis, Opportunities, Threats) analysis. This was done to identify the shortcomings while highlighting the positives of the current design. The SWOT analysis gave me an idea of where to focus on, given the product’s standing.

SWOT Analysis for the website

PERSONA DEVELOPMENT

Given that I got a large chunk of data from the testing, the reviews from the internet and conducting a thorough SWOT analysis, I decided to make a persona to reflect the users goals and pain points. This I feel is a way to generate empathy and get to know more about the users in terms of their behaviors. What interested me was the number of personas that can be made for different user groups. I was approaching the end of the day and hence restricted only to one persona.

Day 2 🗓️

THE WIREFRAMES

I started the day and the process of design process by putting it out on paper. I was not very keen on the software before getting a basic idea from the pencil sketches. I was split on which one should take precedence as the base for the home page. This is when I used the technique of A/B testing. A/B testing is a great method to decide which out of a couple of designs would be more widely accepted. I managed to get an opinion on the type of design (Family members to the rescue, again!) , and a decision was made to go with the flow and iterate ideas along the way.

These are the basic outlines for the home page. For a start, I considered a card design as the prospect of sliders in the main page grabs the reader’s attention. The slider on the bottom of each section gives the reader an extra option to go over the cards on the slider.

Medium fidelity mockups

I used Balsamiq Mockups to create medium fidelity mock-ups, once my pen-paper sketches were out of the way. I realized that the iterative process is an exhaustive process and each iteration brings in something unique. Additionally, the digital mockups were different in comparison to the ones done on paper as I was improving them iteratively. However, it was not all doom and gloom as my mind was racing with how to go through each page and improve the usability of each page.

However, while transitioning from the Low-Fi wireframes to High-Fi Wireframes, I received feedback that color does not necessarily up the fidelity. Additionally, I dropped the idea of a stacked image text approach because that shied away from the main motive of the redesign and did not fall in line with the goals of the persona. The slider based approach added with texts to grab the viewer’s attention was an idea that proved to be useful and enhanced its usability.

SITEMAP

The creation of an improved sitemap started the Prototyping Phase for this project. Initially, I created the new sitemap on paper but then I was quick to realize that doing it digitally would take lesser time and is more efficient than writing everything down. I searched online for tools that aid in the editing of sitemaps and I found GlooMaps and hence ended up using it.

The sitemap link is found here.

HIGH FIDELITY PROTOTYPES

Before
After redesign

I witnessed some difficulties while navigating through the website. While I did manage to go through articles, I found that my eyes always deflected to other parts of the page, leading to a very short attention span. Additionally, the excess usage of white space made me feel as though there was too much content. (This happened even when there was not much content to see) and hence, I decided to go with the said changes with a rationale in mind for each of them.

  • The Removal of excess white space – As indicated above, one of the major problems that I faced was the presence of white space all over the website. I condensed the spacing and added content to make sure that the design is a text-heavy design and not completely image-oriented.
  • Removing parts of the original design and replacing it with an entirely new structure – personas, avid readers want to see text content on a website. Through the removal of the excess news on the right-hand side and replacing them with a simple box to make the readers aware of the latest headlines in a text format and keeping them consistent in all the pages directly played into the goals of the persona (Marc J Heikinnen). After brainstorming and checking other news websites for inspiration, I realized that I like headlines to be put on the right-hand side next to the search results to induce interest to the readers.
  • Incremental Change is good – I believe that incremental change is better for the users so that it is easier for them to accept. I kept the comment section for the articles as is and made sure that the images used are mostly of the same dimensions. This ensures that the user is not subjected to a barrage of changes feels out of place within the website
  • Placement of Advertisements – One of the bigger frustrations hinted by the users was the abundance of advertisement and its placement. I positioned the advertisements in such a way that they neither hinder the general reading population nor appear to confuse the readers on a given headline.

While some of these changes may have a greater impact as compared to the others, changes like the reduction of white space to accommodate more text content take on a weakness identified in the initial phases, head-on. Reduction in the content and changing the layout to accommodate stuff that is required can dramatically improve the usability of the website.

TAKEAWAYS

The Sun is a huge brand in the United Kingdom with more than a million readers. However, there are a lot of competitors who provide content in genres focused by The Sun. Through an incremental development in design, the readers do not fall into the zone of having too many changes hitting them at once. Adapting to a sudden change may be hard for users, but incremental changes may not affect the number of users visiting the website. From reducing the amount of white space to providing a clear readable menu, a small design idea can go a long way. Having said that, two days is a relatively small chunk of time to pull of a redesign which would effectively increase the number of people reading. I intend to work more on this and provide an end to end solution to make the website a better place on the internet.

Note: I do not work for, affiliated with The Sun. I did this UX redesign as I like to solve problems and news websites are my go-to places for information.