fish4jobs

Challenge

Along with my work for the fish4 CV database, fish4 needed a complete redesign of their job sites.

Our main objectives were:

• Clean and simple design
• Improve the way users searched and the navigation
• Reduce the number of adverts while trying to place bigger adverts on screen

The Home page

What others were doing

We had a look at couple other job sites. None of them really impressed me that much. Jobs Guardian website had a really nice front page but it’s other page seemed rushed. I liked the way Reed website kept their search form on the site throughout the user journey.

With a good starting point I begin analysing the good and bad parts of the site.

1. Shows the logo but the advert banner dents its identity.
2. The tab menu looks good but where it fails is the secondary menu which doesn’t give the user any indication to where they are on the site. Also the fact that some links go to external sites (at time of writing) is crazy! This will lead the user to lose trust. As the he/she won’t know where it takes them.
3. A very confusing part of the site. Where does the user start after having the booby-trapped menu? This part of the site is right heavy. The fish4tips seems to be trying to fight with the rest of this section. It feels like too much information is trying to be squeezed into this section for fear the user won’t see it… Scroll anyone?
4. Again another section is where elements are trying to fight each other for the user’s attention. Above this section, is badly thought section for displaying adverts.
5. This section is better and makes good use of space. The headers, paragraphs and lists are nicely spread out.
6. Another element which is fighting for the user’s attention.

In total just on the home page, we have about 7 different types of elements fighting for the user’s attention. Which most are cramped into the first 700px of the site’s height.

The redesigned home page

With the home page I decided to go with 1024×768 screen width (as from our stats 800×600 decreasing in size). I was told that the sales department would be happy with two advert slots. We had a look around and the Times website did a brilliant job of this. I cleaned up the header area and increased the size of the fish4jobs logo. There wasn’t an obivous place to sign in or register so I placed this into the header section as well. The tabs were taken off and a simple menu was placed in (which notified the user where they were on the site).

The search form was engulfed in a luke warm yellow to make it stand out without being to in your face. To let users know where to start. I got rid of the fish4tips as the chances of a user looking for job tips before they even started searching seems highly unlikely. I tried to keep things very simple, by having three column layout. Text to have a good amount of white space to improve readility. With call to action links the only links to be a button.

The Search results

After the user has realised what the site does. They do a search and come across this.

1. This section is clear and works well. There are no other elements trying to squeeze themselves into its space.
2. Another section which is clearly laid out.
3. This part of the page could do with an overhaul. There is no font differential and everything seems to blur into one. The location of the job should be below or above the salary and look odd sitting there in the top-hand corner. I’d also move the company name to below the salary so the whole thing is like a list and can be read quicker. i.e. Web Designer, (eyes moves down) location: Reading, salary: £29k and company is : SP Legal, etc.
4. The idea behind is quite brilliant. Sadly, the execution is not the same. They are meant to look like cards but the user interactivity is slightly poor shall we say. As it only works when you hover over the job title and doesn’t remember the last job title one hovered over. So it defaults back to the original card.

The redesigned search results page

To keep things constant the search form would stay in that place all across the website (while a user was searching). The job title would now have its own space and coloured background. For companies that paid a bit more they would get an orange background instead of grey. The salary and company name sit neatly next to the logo if provided. Be first to apply card-look is gone and a simple list is shown instead.

The “apply now” and “more details” links are gone. Using some kind of JavaScript, when a user would hover over the job it some cool icons in top right-hand corner would appear. Going over an icon would tell the user what the icon’s action is.

The Job’s page

Once the user has decided what job they like. The job application page is revealed.

1. The red header (Job search – advert details) doesn’t make any sense being there. Surely it would make more sense to have the job title there? <sarcasm>Maybe not… </sarcasm>. The next and previous links are a good idea so a user doesn’t have to keep going back and forth between the search results page and this one.
2. This section is better with font differential. The job title is larger than the most of the text on the page. One ascept that makes me wonder “huh?” is why is the salary above the “apply for this job now”. Surely it would make sense to put this below along with the rest of the job information. I’d also make it clearer to the user what “Full-time” and “Permanent” is. i.e. Working hours: Full time and Job type: Permanent. I would make “Additional Contact Information” not hidden and the plus icon doesn’t suit the site.
3. This section might of been better with the search form there. The rest of it seems like trying to sell advertisements (but hey I’m web designer my eye is trained to see things like this).

The redesigned job application page

For this page, I didn’t feel the need to have “Job search – advert details” as the main header. I thought the actual job title would sit better being the main header. The “apply for this job” was moved above the job information as I felt it would look better there – out of the way from the job spec. I also added the header “Summary” as I felt it would help improve the clarity. The fish4tips is also in a better area as it will give users tips before they apply for the job.