Author
Graeme Fulton
Company
Lostgrad Ltd
Project date
March 2015
Skills
User Testing, Responsive Design, WordPress
Topics
Portfolio

A complete redesign of the Lostgrad Community website [in progress]

I’ve decided to go with a simple user on boarding approach, whereby the user is welcomed and guided through what the site is. The goal being to set the site up so it is personalised to suit what they are looking for. The site is also designed from mobile up.

Welcome page

The first page will be a welcome page with some material telling the user exactly what the site is for, and what it will do for them - that is to help them find graduate jobs. Rather than sign up, we’re using a call to action: Find me a job! No mention of courses or anything else.

This is an initial placeholder for this page:

Home screen

We’re using a full page scroll plugin, so the user can flip through the on-boarding process with ease. There is also a breadcrumb showing how many steps they are to go through. There were initially 3 quick steps:

  1. What do you want to do
  2. Where do you want to do it
  3. What’s your degree classification

1. Select profession?

When the user scrolls to the next page, they’re asked what they want to do. Large icons make this selection much more visual for the user, as opposed to a form or list of checkboxes (the icons used are temporary and need replacing with icons of the same weight).

Select profession screenshot

2. Select location

I’d experimented with a few different options of how to get this information from the user. 

I tried a drop down option list, showing a hierarchy of locations. But this became confusing when choosing multiple locations from the dropdown.I also tried a checkbox method, similar to the ‘what do you want to do?’ step. This seemed fairly intuitive at first as it kept consistency in interactions across each step. However, there were too many different locations, and to show a hierarchy using checkboxes was difficult. I also tried using regions: North, East, South, West, but when observing an international student, they didn’t know where each actually was.

The best option we came across was an interactive map - this was a lot more work (see this tutorial), but was the most effective method during paper prototyping. Therefore, this was the design I went forward with. It’s easier to select on mobile too, as check boxes and drop downs can be are to manipulate. 

Select location

2. Select grade

The idea behind this third step was to get a bit more information from the user so we could suggest more suitable jobs based on their degree. Whilst doing so, a third step added an extra layer above a simple search website - with an aim to make the user feel like they’ve done a bit more work and provided extra information than they would have done on a normal job search site. Hopefully, this would make them feel like they’ve invested enough of their time into the site that they may as well sign up. 

However, feedback from this step has shown that the question is too ‘scary’. Therefore this step will be replaced with a different question.

select grade screenshot

Results from selections

After completing the on-boarding, the user is shown a list of jobs relevant to their selections:

job list

Sign up

Upon clicking a couple of the links, they are prompted to sign up to continue. Hopefully they’ve enjoyed the site enough to do so.

Sign up wall

Upon signing up, they won’t have a ‘profile’ page, as it’s not necessary, but more of a settings page, which they can change to discover different options.