RIT University News Reskin

ROLE Visual and Web Design
WHEN 3 Weeks, Fall 2016
CLIENT School Project
RIT News Website open on a laptop

University News is the official news website for RIT, aggregating content from all colleges, sports, student affair and alumni. The goal was to reskin the websites current homepage using existing content structure for the desktop view.


With weak content hierarchy and lack of visual appeal, the current website is overwhelming and not engaging. My redesign aimed to organise and simplify the content of RIT News. Three things that I focused on improving on the site:

  • 01 - Grid Structure

    Employ a strong grid structure to create a aligned and ordered design.

  • 02 - Content Hierarchy and Organisation

    Structure the content in a way that encourages skimming, engagement and accessible entry and exit points.

  • 03 - Visual Appeal

    A more dynamic and clean design with bold colors.


I focused on a few key areas of the website: The header, building a user profile, use of article cards and rethinking the scoreboard UI. I went through several iterations for the website layout as well as each smaller sections. My first iteration for the website layout fell short in terms of achieving a strong grid structure and content hierarchy. The bold typography in the section headers were not consistent. Both the name of the page and the section headers had the same hierarchy which made it confusing.


RIT News wireframe

1 - Featured Story

Full-width featured story

2 - Top stories

Highlights the most recent stories

3 - Events

Lists of upcoming events organised by date.

4 - Sports

Updates on RIT athletics

5 - Scoreboard

See updates on scores for all sports at RIT

6 - In the news

Stories of RIT, RIT students or faculty and staff in the news

7 - Featured Video

See featured videos about RIT campus and student life.


Iterations for the website header


Iterations for the news section


iterations for the events sections


Iterations for the scoreboard
Showing the Full width wbesite header

Full Width Featured Story

Homepage is where users get introduced to the site. A full width header draws attention and engages the user by providing an entry point.

User Profile

Allows user to add categories they want to read about. If the user prefers 'sports' to 'business', they can just drag 'sports' at the top of the list to reorder how the sections appear on their homepage.

Feature 2 showing the User profile
Showing the articles arranged in form of UI cards

Article UI Cards

Cards help organise information into meaningful sections and improve scanability. The use of images makes the content more appealing to the user.


Putting scores in a comparison format with logos improves readability and scannability.

Showing the scoreboard design


Final design for RIT News


This project aimed to improve the aesthetics and the information hierarchy of the RIT University News Homepage. I wanted to give the web page a more bold and clean look. The reskin challenged me to organise and present large amounts of information with visually appealing elements. It was a good reminder and application of fundamental principles of design and typography.