cgrinaldi / hackathon-front-end-clone

Redesign of www.hackreactor.com

Redesign of the HackReactor.com Home Page

Introduction

This front page redesign came about as an idea for work during an after hours front-end hackathon at Hack Reactor. We decided to approach the project from both a visual and ux/information design standpoint, curious to see how much we could accomplish in just one-and-a-half hours. Obviously, less than two hours of work don't make for a completed redesign, but the direction and mood of our design are things that are easily carried forward.

Here's the original page:

Visual approach

• HERO: The over-emphasis of the hero section of the front page. The image used in the original lacked personality and warmth, and was very dark. The overall impression was a stark, looming one. We chose a different image to feature on the front page (found elsewhere on the original site). The new image shows students white boarding. This is a far more active, engaging, and inviting picture, that actually connects with what the school actually does. The original image was too abstract for that. From a brand perspective, we felt this was a much better choice. From a visual perspective, the image provided many more medium tones and thus did not over-dominate the rest of the content on the page.

• NAV: The under-emphasis of the navigation bar at the top of the page. The white navigation bar actually served to emphasize the dark image dominating the page, rather than the navigation elements.

• FONTS

UX/Information Design

• THE FOLD: There were no clues provided for the user that there was any content available to them below the fold. The main image on the page was so large that it made the page look like a splash screen. Complete, instead of an introduction to more. We focused on making sure any image or hero we used on the page would be limited in its height to allow for some of the content below to show, encouraging users to scroll down to actually read it. (And making it possible for them to see at least some of it without having to scroll down.)

• OBSCURING INTERACTIVITY: There were several elements on the page that relied on users to interact with them before providing more information. We decided to remove one of them entirely (the carousel), and opted to move the three actually compelling elements above the fold. The information previously hidden by a hover requirement is now immediately available.

• REDUNDANCY: Several elements in the nav especially were very overlapping in message. 'Program' and 'Curriculum', for example. We consolidated where we could.

• CLARITY: Over-use of marketing elements muddled the message. We cut as much of it as we could. Additionally, a few items did not need to be in the nav at all. ('Hiring' was one.)