Landing page redesign for a News web application

Web Designer

UX Designer

UI Designer

Figma

Notion

Less is more and more can be organized.

Overview.

TUKO News is one of the top media companies whose primary focus is providing news and entertainment to Kenyans. It captures and reports news that is not reported by the mainstream media.

Problem

At first glance, the TUKO News app is clattered and there isn't a concise visual hierarchy to guide the user in his/her interaction with the app. The call-to-action buttons are not highlighted and their position is less than ideal. This has, in the past, created mental fatigue in interacting with the application.

Plan of action

I listed down all the steps for this project that would be effective and inform my design process and decisions:

Assumptions and hypothesis

Primary research (Surveys)

UX research (Personas)

Ideation and brainstorming

Wireframing

UI and prototypes

Tools

Figjam

Figma

Unsplash

Adobe

Team

1 UI designer

My Role

UI design

UX research

Scope of work

Design 3 pages:

Home page/Landing page

Subscription page

My Design Process

Assumptions

I jotted down what could be true about the users and the existing product. The purpose of this was to explore the problem statement from multiple angles and that would inform the choices I make in the design process.

Assumptions about users

Users might be getting overwhelmed by seeing a lot of ads

Users might get distracted by the number of ads in between the articles.

The lack of proper categorization of articles might force users to opt for other news websites.

The pop-up notifications might be annoying and the user ends up canceling them before reading the notifications.

Users might want news customization to their feeds.

Users might prefer push notifications instead of random alerts in the middle of reading an article.

The stark black-and-white contrast might be causing eye strain to users in the higher age bracket.

Assumptions about the product/business

TUKO news might be generating revenue through the ads

Nowadays, news apps are spamming users with a lot of irrelevant news

News apps are providing the TRENDING NEWS section to help users know about the top stories.

Hypothesis

After brainstorming the assumptions that I had, I came up with a few hypothesis statements that listed possible solutions to the problem(s) that I had defined. This will be validated later in the primary and secondary research

Users would prefer a customized feed rather than having random articles in the "recommended" section.

Since the web page would benefit from more interaction, they can introduce a discussion forum where users can react to the articles.

The app can have a "Subscribe" button where users can pick their top 5 categories of news for their customized feed.

Based on the assumptions, I think users might be getting more annoyed by the constant ads. Giving users the option of getting rid of ads through weekly, monthly, or yearly subscriptions would be ideal.

The app serves individuals from different age brackets. Introducing news reels would capture the attention of young readers and also readers on the go.

Secondary research

I went through various sources on the internet to get more insights to validate my hypotheses and find out if I was going in the right direction.

Top Insights

On average, a user takes only 2 minutes on the web page.

On average, a user browses only 2 pages per visit before exiting the web page.

Only 17% of the users are within the age bracket of 18yrs to 25yrs

52% of people feel push notifications are an annoying distraction and 26% prefer to get notifications based on their selected preferences.

The users are evidently annoyed by the ads and more than half of them say they are willing to pay for premium services to eliminate the ads.

source: Similarwebanalytics.com

User Insights

Primary research

I reached out to "real" users to get their insights.

User insights

I went ahead and conducted 1:1 interviews with 6 users over a virtual setup. I got useful information from the 6 users whom I chose for this interview

Inferences from user insights

Many users complained of a "bland" and complex UI and complicated categorization making it difficult to find what one is looking for.

Some users prefer discussions on articles with others on the forum.

Some users are open to the paid plans.

Almost all users were unhappy about the unsolicited advertisements.

The users who have a specific interest do not like the amount of content that is not relevant to them on their feed.

Most users prefer a customized feed rather than a random one.

User persona

Features of my product

1. Customization page

First-time users will have the option to answer a few questions based on which the web page will customize their feed.

2. Premium plans

First-time users and returning users who want to eliminate ads on their feed will have the option of weekly, monthly, and annual premium plans.

3. Personalized notifications

Users can set a suitable time when they'd like to receive news updates.

They can decide on the number of notifications they want to receive in a day.

4. Visually appealing landing page

It will be easier to navigate to your category of choice with the introduction of the "Sections" menu button

The number of elements will be reduced to accommodate only "your feed" and "Top stories"

The background will be changed to reduce eye strain and at the same time maintain reasonable contrast

A different typeface will be used.

User Flow diagram

User Flow

User flow is the path taken by the user as they navigate a web or mobile app to complete a task. I came up with the following user flow:

First Iteration of the wireframes

Wireframes

Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding a few relevant stock images and copies provided by the marketing team. At this stage, the wireframes were defined enough for some user testing. Based on 4 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.

TUKO NEWS Landing page

UI DESIGN

I moved directly to creating the UI screen and prototype

The landing page features the top stories and recommended articles based on the chosen preferences

The sections button reduces clutter and enables the user to choose a specific category and navigate there directly

The landing page also features a "Subscribe" button that leads to the premium paid plans.

Learnings

It is good to have a visually appealing UI design but it's more important to have a visual design that resonates to the everyday users. Hence, less is more.

Talking to the everyday users gives you a wider perspective that what the statistics on paper do. Users are more than statistics and it's important to resonate to their needs.