LJ HAZZARD

This was a project to redesign the header for The Student Room and create a clean, modern and easy to navigate header. 

​

The existing header had several issues that I wanted to address. These included lots of shapes and colours which made the site and contents look cluttered and messy, the site has pages that have both a fixed width and a relative width with a navigation anchored to the left edge of the tool bar, meaning the navigation jumped around on every page that a user visited, there was no clear structure or consistency in the navigation drop downs and the ask a question tool was also situated away from most of the areas that attracted engagement such as a notifications and PMs. Within this project I wanted to address the inconsistencies and usability issues.

​

​

UI CHANGES

I was excited to tidy up the design and create a clean, modern user interface. One of the main things I wanted to do was reduce the number of different colours used so I created a colour hierarchy using shade of blue. These were then used for the hovers and expanded sections so that each level became darker the deeper the user navigated.

​

The previous design used a lot of image shapes for buttons which were difficult to edit and would often cause visual and development issues, so I designed all buttons to use a consistent shape. 

​

To add more personalisation to the site I added in user avatars to messages received and also to the user's account drop down for both desktop and mobile views. This change saw an increase of users customising their avatar.

​

​

NAVIGATION

The site had a mixture of fixed width and relative width pages and the navigation aligned left for the later pages meaning the navigation tabs jumped around within the browser. I fixed the navigation in the centre of the bar so that this stopped happening. Another change was to make the navigation drop downs all the same width, using the same amount of columns and structure of content within them so that users knew what to expect from each tab drop down. 

​

​

ASK A QUESTION TOOL

One of the smallest changes but had the biggest impact was moving the ask a question tool that was situated next to the logo was to move it next to the other engagement icons on the right hand side. As a  guest these were the log in and sign up buttons and for a member these are the notifications and personal message buttons. This move increased usage of the tool by over 200%.

​