Home Projects About Resume


The News & Observer

UI/UX Design

Disclaimer: All articles and graphics used in this prototype are from online resource libraries.

INTRODUCTION

The News & Observer is a design-led initiative focused on creating a media news website that enables users to quickly and efficiently navigate the content they seek. The project emphasizes a clear and engaging content hierarchy, clean typography, and a user interface that delivers a thoughtful and seamless user experience.

MY ROLE

This is a self-initiated project in which I designed the media news website from the ground up, managing all aspects from product scoping and user flows to wireframes, design finalization, and rapid prototyping. Additionally, I conducted user research to produce viable ideas and solutions to potential problems.

PROJECT DELIVERABLES

Wireframes, Final Design, Prototypes

TIMELINE

March 2024 - April 2024 (One month)

PROJECT SCOPE

1 UI/UX Designer

TOOLS

Figma, Adobe CC, Canva

Problem Discovery
People are dissatisfied with news websites due to excessive advertisements and disorganized content.
User feedback on news websites reveals significant frustration due to difficulties in navigating to desired content, overwhelming advertisements, and disorganized layouts. This is particularly problematic in mobile versions, where essential content is hard to distinguish, leading to a poor user experience. This sparked a question -

HMW improve the overall user experience of news websites by making them easier to navigate and reducing distractions?

My Solution - The News & Observer
A modern, intuitive, and user-friendly redesign of news websites.
Experience streamlined news reading.
Navigation Menu
Discover the news category that interests you the most.
  • Quickly find your news with the intuitive search feature.
  • Explore diverse news categories tailored to help you find today's top stories.
Newsletter Subscription
Subscribe to the newsletter to receive the latest updates directly in your inbox.
  • Easily sign up for the newsletter from various locations across the website.
  • A user-friendly interface requiring minimal steps for subscription.
The Process
Wireframes
Wireframes establish the essential structure and layout for the news website, providing a blueprint for content organization and user interface design.
To gain a comprehensive understanding of the news website's structure, I created wireframes for the navigation menu, newsletter signup, homepage, and content page. Each wireframe focuses on alignment, element sizing, and layout, particularly for ad placements. Emphasizing content hierarchy was crucial when designing the homepage and content page to ensure a dynamic presentation of articles and balanced advertisement placement.

Navigation

Signup

Home

Content

Final Designs
Giving a realistic representation of typical news websites helps visualize the strengths and weaknesses of the design work completed so far.
To achieve a realistic view of the news website, I added text and graphics to the completed wireframes. In Figma, I established a design library and created various components, such as buttons, fonts, and colors, for the final designs.

Navigation

Signup

Home

Content

Prototypes
Prototyping is the final and most crucial step in the design process that brings interactivity and dynamics to the website.
To simulate the actual website experience, I created prototypes for each user interface, linking web pages to demonstrate navigation when users click buttons or text. I also reviewed the logic behind the user flow to ensure that the connections are intuitive and user-friendly, providing a seamless interaction. A key aspect of a great user experience is allowing users to easily return to their previous location without difficulty.

Navigation

Signup

Home

Content

Project Takeaways
A deeper understanding of user experience and the effective use of UI elements.
Initially, during the wireframing phase of the design process, I was confident that I could complete the entire project quickly after outlining the structure and layout of the news website. However, I soon realized that creating the design library in Figma required significantly more time. I spent considerable time refining font styles, buttons, colors, and alignments.

Establishing a clear typographic hierarchy was just as important as the content hierarchy, and I focused on finding the optimal balance for text, graphics, and alignments to ensure an elegant design. After testing the prototype with several users, I learned that simplicity is key, as users prefer an easy-to-use interface over a complex one.
Next project

View

Apocalypse Guardian: Echoes of Nature

UI/UX Design