H2H Case Study

A design update for a local Recruitment Agency

Lehel
4 min readApr 9, 2015

Head2Head (H2H) Recruiting is a Toronto based recruitment agency that reached out to us to revamp their site. Since the existing site was a bit dated, and a somewhat unintuitive to use in places, we decided to start from scratch. If you’d like to see the old design, you can still view it here.

H2H had a fairly comprehensive set of design guidelines and branding documentation so we decided to use that as a basis. We bent the rules on some of the typesetting a bit but used their existing brand colours and styleguide as a foundation for the redesign. Once we got a general lock on the new site architecture and the sections we wanted to promote on the homepage, I got started on the mockups. Below are some of the concepts we put together as a starting point.

One drawback of the old site was that it had become too bloated and complicated over time, so one of our primary goals with the redesign was to simplify everything. Cut down content and keep everything clean and professional.

In the end we reordered the section and the client liked the idea of the “circle tiles” from the first mockup but wanted to see us do something a bit more with it. We decided to expand on the idea and evolved the discs into content cards that would be used in a few different place throughout the site. A mockup of the homepage can be seen below.

The cards idea also made sense for mobile, but as opposed to vertically stacking them we decided to make each section horizontally scrollable on mobile so you can swipe through the cards in a carousel.

Shoutout to GraphicBurger.com for the mockup demo template above.

Once we had the general approval (minor adjustments not withstanding) we moved onto mocking up the rest of the pages. Below are some snapshots of the various mockups showing some of the different pages.

The site was also made to be fully responsive, so while we focused on the desktop version first, I made sure to do things in a way that made scaling things down to mobile quiet easy and we were able to turn the mobile mockups around fairly quickly.

On this particular project I focused strictly on the development of the visual design and production of the mock ups. Once we had a full set of mock ups everyone was happy with, I exported all the required assets and the project was handed off to the dev team for completion.

As always thanks for reading. If you have any questions in regards to my work, would like to reach out or see more examples of what I do, you can do so by viewing my portfolio at http://lehelbabos.com

--

--

Lehel

Product Designer and Frontend Dev. Part time whiskey snob, full time geek. Hopefully leaving the web a little nicer than I found it.