Responsive Web Design for Recruitment Agency Ivory Jacobs

We wanted to let you know some of the finer details about a recent branding and web design project we worked on for Ivory Jacobs, a new specialist recruitment agency, who place recruitment professionals into other recruitment agencies across the UK.

Branding

Michele, Ivory Jacobs’ Director, wanted something ‘clean and modern’ to represent her new company. We carried out some initial research, looking at other logos in this space, and began to think about a few different concepts we could present based on the details we collected from the client. Michele was clear about not wanting to see any of the usual cliches in recruitment company logos (people, symbols implying connections etc etc), so the concept that won out convincingly was a simple combination of the company initials, the “I” and “J”, although we did present several other ideas using custom drawn icons to accompany the typography. 1-ivory-jacobs-recruitment-logo Above you can see the final logo concept that Ivory Jacobs chose.

Website Planning / Research

Once we had the new logo signed-off we had a clear ‘style’ in place, to carry through to the website. However, prior to any design work in Photoshop, we always create wireframes for the main pages of the site for all our projects. Before setting pen to paper creating wireframes though, we needed to find out what goals the client had for the site and what tasks users would need to be able to carry out. From our design questionnaire, we established that the new Ivory Jacobs website would be the first port-of-call for both clients and candidates and needed to:

  • list details of job vacancies and make applying for jobs easy
  • be modern and eye catching – making them ‘stand-out’ from competitors
  • tell prospective customers about them in a concise way
  • have links to the client’s social media profiles to encourage engagement

Website Wireframes

Now we had clear goals and tasks established, we were ready to produce wireframes for the main pages of the website. On the homepage we had the idea to use a large greyscale background image and include a parallax background effect when the user scrolls down the homepage, so the content hides the image and then reveals the bottom portion of it when you get to a particular section. This worked well with the brief to give the design space to breath and encourage scrolling. Did you know: it’s actually a common misconception that users don’t scroll? Also, it was really important for a user to be able to submit a CV easily, so we proposed making this a link in the header that reveals a slide down form, thereby making it super-easy for a candidate to send their CV. Here’s a look at our homepage wireframe: 2-ivory-jacobs-recruitment-home-wireframe Above: the homepage wireframe we produced for the Ivory Jacobs Recruitment website. We also produced wireframes for the job listing page itself and the news page, which Michele was delighted with, so we were given the green light to move to the design stage.

Website Design

The beauty of wireframing is that as you’re laying out pages, you’re getting a pretty good feel for how things might look in your head. The main aim with the look and feel for Ivory Jacobs was to space the content out, use nice clear typography and use accent colours to pick out key calls-to-action on the pages. The goal with the homepage was to immediately let users know that Ivory Jacobs work in the recruitment to recruitment space, provide an easy way to view the job vacancies, and to also have a featured job. Here’s the design concept we produced:

3-ivory-jacobs-recruitment-home-design

We feel confident that we successfully achieved a great looking design and Michele was really excited when we started revealing our design concepts to her. As usual, we created designs for all the pages we wireframed. Here’s a look at one of those, the job listing page: 4-ivory-jacobs-recruitment-joblisting-design The ‘Job Listing’ page design concept we created in Photoshop.

WordPress Responsive Development

We received a pretty quick sign-off on the designs, so it was time to start writing some code. We’d agreed with the client early on to build the site on WordPress so they could easily manage the content and post/remove vacancies, but at this point Ivory Jacobs didn’t want the site to be responsive. A responsive website is where the layout adjusts to the dimensions of the device you’re viewing it on. 5-ivory-jacobs-recruitment-wordpress Here you can see how easy it is for Ivory Jacobs to manage their vacancies. We respected Michele and her teams decision on this, but put our point for having a responsive site across strongly, so we agreed to build the site on a responsive framework at the start of the project to allow us to make it responsive in the future really easily if the client changed their mind. You’ll see now that the site is fully responsive, as the first month of Google Analytics stats showed the site was getting a fair amount of traffic from iPads and smartphones, so going responsive was something we had to do. This was a sinch as we already had the framework in place. 6-ivory-jacobs-responsive-design The top portions of the Homepage (left) and Vacancies page (right) on mobile devices.

What the Client said….

This was a great project to sink our teeth into and Michele was really pleased with the final result. This is what she said about working with us:

“Fantastic service from Will and the team! Thrilled with the outcome of the Ivory Jacobs website.”

She’s also been kind enough to let us know about some fabulous comments she’s received from others visiting the site.

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?