WPI Handshake Website

Andrew Hand
Analysis of good website design
3 min readOct 25, 2018

The WPI handshake website offers students an easy interface to look and apply for jobs. Part of what makes the website so easy to use is its user experience (UX) design. To get a better idea of what makes the WPI Handshake website so well designed I’m going to go over four elements of the UX design.

Contrast

First and for most, it utilizes the contrast of colors between different groups of elements on the page. In the example below, the designers chose to use black, grey and red to pull your attention to certain information:

Two Job Postings on Handshake

Notice how the deadlines are different colors, black and red, and that by changing the deadline that’s closer to red it draws the eye to the time-sensitive information. The designers also distinguish the reason for the post by bolding the company and position title.

Proximity

The spacing of the elements on the handshake webpage is the key to allowing the user to have everything they need and making it easy to find. In the screenshot of the homepage, there are multiple groups of like-elements. Each group is then separated so that the student can easily gloss over each group and get an idea of what information is there.

Handshake Home Page

Alignment

Everything on the home page (seen above) is left justified, which creates an overall easy reading experience for the student. The edges created on the left let the student follow the vertical flow of information. The fields which hold the text, however, are centered so that there is a natural symmetry to the image.

Repetition

Consistency is key, and there is a lot of it on the Handshake home page (seen above). From making tabs at the top of the page to list alternate pages on the website,

Toolbar on Handshake Home Page

to grid style listing of jobs,

Job Postings on Handshake

everything this website does is one long line of repetition. The webpage uses similar fonts, images, sizes, etc. to tie everything together on an abstract level allowing the student to view all the individual elements as a picture (of sorts).

Notes

All images came from https://wpi.joinhandshake.com/

--

--