TIMELINE: August 2019 – December 2019
It’s amazing that the amount of news that happens in the world every day always just exactly fits the newspaper. – Jerry Seinfeld
After much thinking, I noticed that there are two types of people when it comes to news websites. One, people who sit and read the news thoroughly and the other, people who skim through websites. However, I found that not all websites give the user the comfort to stay on for long periods. It is either the content, the design, or incessant advertisements that hamper the reader’s experience on the website. No website wants that. Of course not. Hence, I decided to make some improvements to The Sun – a news website. 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.
SKILLS: UI/UX, Prototyping, User Flows, Re-branding, Persona Development, Interaction Design.
ROLE: Product Designer responsible for carrying out the entire process of re-branding the website – THE SUN.
With a large reader base, how can THE SUN website be redesigned in such a way that the overall utility of the site can be improved?
- 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.
FOR A START, 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 and wrote down notes on where the competitors are better off in comparison to The SUN and where this website stands out.
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.
MOODBOARD. WHY NOT?
While the personas enabled me to come up with a type of design considering different user groups, the Moodboard was the motivation for the creation of the logo and the visual hierarchy of the website. Initially, I tried to make sure that most of the components used in the moodboard made it to my logo in one form or the other. However, while approaching the problem from a minimalist approach, I found it difficult to narrow down on a single logo post the pen-paper sketch.
The main idea was to make sure that I have a “Sun” in the end, either in the form of an actual Sun drawing or letters depicting the same. In the end, I made my logo an S inside the Sun drawn out of simple shapes. I chose this because the “S” symbolizes the sun and the outer drawing is actually the sun itself. Although the understanding can differ from person to person, when I think of the Sun, I think about the energy and the positive vibes. This was also the reason I went with warmer colors. I want the readers and the visitors alike to feel energetic and fresh throughout their time spent on the website.
I started the 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 for the home page, given two distinct home pages. 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, and a decision was made to go with the flow and generate ideas along the way.
This is the basic outline of 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.
I used Balsamiq Mockups to create low 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.
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 cards simply they were not in line with the goals of the personas and I went with a normal text-based approach instead. As it is a news-website, I went with a text-based approach.
THE Interaction design
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
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 goals hinted by my other persona (Rob P. Higdon) was the fact that he loves to search deals by looking at the advertisements on the page. 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.
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 hit them. 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.
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. I did the redesign as my semester project in grad school as a foray into the working world of UX…