Quest Research redesign
Quest Research is a passive talent sourcing firm providing specialist recruitment research services. I redesigned their brand and website to help them increase conversions and improve the user experience.
Designing the brand
After talking to the client and doing some research into the company, it was clear that the brand needed to have a professional, corporate aesthetic that still appealed to those in the technology sector. We wanted to create a symbol that represented the company and its ideals of speed, agility and intelligence. Our belief that a relatively small company can still be powerful was also something we wanted to capture in the symbolism.
We threw some ideas around and started looking to the animal kingdom, particularly birds, for inspiration. We discovered that the kingfisher, although relatively small and unassuming, was a fast and intelligent hunter – a perfect symbol for a company that uses technology and data to hunt for talented human resources.
I sketched out a bunch of ideas (above left) for the logo symbol, concentrating on the shape of the kingfisher. I wanted to take a more abstract approach and focus on representing the bird’s wings in different ways. I started using curves to draw wings in various shapes and sizes, but soon realised that sharp lines and angles would help me portray the speed and agility we were after. I kept the logo design very minimal and paired the symbol with clean sans-serif typography as seen above.
The complementary blue and orange colour palette (above) was inspired by the kingfisher’s brightly coloured feathers. We went for clean and crisp typography, using Proxima Nova throughout in varying shades of grey. The business card design (above right) was clean and simple, printed on classic thick matte stock, which went well with the brand.
Imagery needed to portray movement, speed and beauty. We used beautiful photos of kingfishers in their natural habitat, some of which can be seen in the mood board above. Action shots were especially effective at conveying speed and power. Simple line art was used for the iconography, giving a more technical feel to the brand.
Research and discovery
Along with the new branding, I also needed to create and build a new website to replace the old one, which wasn’t responsive. The first thing I did was try and figure out what was working, and what wasn’t, on the old website. Luckily the old website was hooked up to Google Analytics, so I had some idea of how it was being used. Some quick customer interviews also provided useful insights including; some users found the website difficult to read on mobiles, some thought the website looked dated and cluttered and many couldn’t find the content they were looking for.
The first two customer pain points above were relatively simple problems to solve, but the third one required some extra thinking. When designing a website, one of the first things that needs to be figured out is the content. Content is definitely king. Why did they come to your website? How can you solve their problem? Once the purpose of the website is clear, you can find the most effective way to deliver the message. Content was written based on insights from customer interviews, research and a competitor analysis.
It was clear that we basically needed a simple brochure website that outlined the company’s services and gave potential customers an easy way to get in touch. We decided to go with a simple one-page website broken up into five sections as seen in the sitemap above. Clicking on a link in the top navigation bar would slide the user down to the appropriate section of the page. I used a two-column fluid layout for each section, which stacked into a single-column layout on smaller devices as seen in the sketch above. I sketched out wireframes (above) for each section of the site to block out the basic elements and to give me some blueprints to work from.
Designing the visuals
Now that we had a brand, a website blueprint and content to work with, it was time to push some pixels around. We wanted the design aesthetic to be minimal with a strong focus on content and typography. A lot of the hard work had already been done creating the wireframes. Now it was simply a matter of experimenting with colours and layout and also creating the image assets.
On the above homepage, the image of the kingfisher moves independently from the background to create a subtle parallax effect. The navigation bar is stuck to the top of the browser and follows the user as they scroll, to ensure that they can easily navigate to different sections of the page. I also thought it would be nice to hide the navigation bar when the user scrolls down to get it out of the way of the content. It reappears when the user scrolls up.
The services section (above) is divided into blocks of content, with a solid-coloured block and image used to divide each section. Text was centred vertically within each block, which was actually pretty tricky to code given that it’s a fluid grid and the text blocks have dynamic heights. I used a large centre-aligned quote to complete the section.
Truly responsive images
When coding up the website, I wanted to ensure that images were responsive. I’m not just talking about adding “max-width: 100%” to your images; I mean actually serving an appropriate-sized image to the user based on their device. After looking into this a bit further, I found a future-proof method of setting up responsive images using Picturefill 2.0.
The picture element is a standard W3C HTML element that allows developers to deliver an appropriate image to users depending on their screen size and resolution. Picturefill basically enables full browser support for the picture element so that we can use it today. I created small image assets for mobile users and larger ones for those with larger screen resolutions and optimised all images using JPEGmini.
Taking flight
User testing validated that customers were able to find the information they were looking for, both on desktop and mobile. We received positive feedback about the new branding and the conversion rate also increased which was awesome to see. It was refreshing to work with a client who was so passionate about his business. We were able to work together to create a website and brand that not only fulfilled its purpose, but was one that we could both be proud of too.
