news portal
UI/UX case study
Autumn 2023

Experience
Redesign

a

Yahoo! logo

Case Study

Overview

The Client

Yahoo! is one of the first online web portal and service provider in the world. For 3 decades it has provided millions of users with web search, email and more. Yahoo!’s goal is to keep users all around the world informed with current events along with a safe and secure access to email and other essential online tools.

Yahoo! logo

The Goal

A redesign exercise of the German Yahoo! portal, with an emphasize on meeting the client’s goals: provide the latest news update, weather reports and easy access to online services, such as email.

Experience Audit

Current Design

The German Yahoo! portal delivers articles, weather and access to mail. It is evident that the portal is outdated.
Compared with the competition, it falls behind, as news and email portals, such as news.google.com, AOL and MSN provide a modern and sleek experience to their users. The current design suffers from duplicated buttons and an inefficient layout.

Yahoo! current design
Spacing Issues
ux audit
Redundant Buttons
ux audit
Sections That Require Change
ux audit

Redesign Process

Based on the UX audit and the competitor’s research, I redesigned Yahoo!’s German front page from the ground up. My goal was to create a coherent and pleasant experience, while delivering content in a clear way using modern design trends and familiar patterns and making sure to meet all the business’s client goals.

Concept Design

The first step in the design process is to create some layout wireframes and try new ideas. During this stage, it’s essential to put judgement aside and draw any idea that comes to mind. Drawing with pen and paper or in Photoshop enables me to go through many designs quickly.

ux concept
Low Fidelity Wireframes
wireframeswireframeswireframes
wireframewireframewireframewireframe
Sections That Require Change
ux audit

Final Design

final design

Colors

To keep things simple, I used the brand’s purple sparingly and for elements that are famously associated with the brand - mainly the logo, news category and the email button.For text and background various shades of grey were used. News items categories are color coded.

Brand
#5F01D1
Secondary
#DECAF5
Text
#000000
Labels & Icons
#6B6B6B
Background
#EDEDED
Badges
#FF5D5D
Business
Finance
Lifestyle
Sports
World
Weather
Typography

To retain a somewhat traditional newspaper look, I used a large serif font for the headline. The rest of the text is sans-serif for better readability and to stick to modern standards.

N
Playfair Display

An elegant, modern, serif font. Used typically for editorial purposes, for print and digital, for headlines and titles.

N
Sarabun

I found this font complements well with Playfair. It was chosen because of it's readability and versatillity.

Headline
Playfair Display/ Bold/ 36
Title small
Sarabun/ Medium/ 16
Body
Sarabun/ Light/ 16
Label normal
Sarabun/ ExtraLight/ 16
Label light
Sarabun/ Light/ 12
Label extra light
Sarabun/ ExtraLight/ 12
Keeping Things in Focus

While the main layout hasn’t changed much from the original design, individual elements have been redesigned to make the front page more simplified and accessible.

final design
Modern Elements
final design
Modern Elements

Like what you see? Get in touch.

yairmorr@gmail.com

And follow me.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.