Germain Career Site

Desktop and mobile phone displaying UX designs of Germain's career site main page

Germain Motor Company is an auto group that stretches across three states and sells multiple brands of vehicles. They wanted a career site that drove potential candidates to apply via compelling information about their company culture and employee benefits.

Type of Project: UX/UI
Project Role: UX/UI designer

Introduction

At Hireology, one of my main areas of focus as a UX designer was updating and evolving our career sites experience. Hireology specializes in helping smaller businesses hire quality employees to fill their open positions. Companies have discovered that hiring an employee is no longer as simple as posting an advertisement to Craigslist or the local newspaper. Many organizations now have specific roles in their recruitment department that focus exclusively on their “hiring brand,” which can vary from their broader marketing brand. Part of any comprehensive hiring brand is making sure that the company has a clear, concise, and beautifully designed career site. Potential applicants can visit the site to find out more about the company, as well as any open positions they might be hiring for.

Hireology offers a range of solutions to launch a career site. Customers with basic subscriptions can find an attractive career site template that a Hireology representative will launch for them. Hireology also offers a fully customizable career site for clients who need a very specific experience built out. 

Brief

During my time there, Germain Motor Company requested a career site built from the ground up. As a company, they decided to expand their hiring brand by focusing on the benefits their company had to offer employees, the company culture that kept employees with them for years, and the training programs they ran to encourage employee development. They wanted a career site that conveyed all these things and that functioned well on a mobile browser for applicants that were job hunting on-the-go. 

U

Germain’s previous career site, while functional, was not an ideal experience for mobile users.

Laptop and mobile phone displaying old designs of Germain's previous career site main page

Research & Planning

I started the UX design process by clarifying the issues that we wanted to solve and setting clear expectations of what it meant to see the results we wanted. At Hireology, this process was a joint effort between myself and other members of the career sites team. We looked at the existing Germain career site and explored its SEO presence. We inspected the code. From a design perspective, I came up with a list of issues that I specifically wanted to address.

When we were ready, we met with our contact from Germain and talked through our observations and expectations. From that meeting, I walked away with four main areas that I wanted to focus on during my design process:

The Mobile Experience

Germain’s original career site was designed as a desktop experience. While it functioned sufficiently on mobile, it had not been built to allow mobile users easy access to the information that they were looking for. Fonts were too small, images were difficult to make out at the smaller size, and the navigation was clunky. 

Architecture

Part of Germain’s ask for a new career site involved developing a separate – but complimentary – hiring brand from Germain’s marketing site. This required substantially changing the site architecture as it had previously existed. We also needed to make navigation clearer for site visitors in the future.

Z

Accessibility

Accessibility can have legal ramifications on the most unassuming of sites. When combined with the trickiness of hiring, having an accessible site is paramount. I encountered text that could only be found in images, color contrasts that would have been hard to read for someone with a visual disability, and font sizes that needed to be re-considered.

Updated Visuals

Germain’s existing visual design was functional, but I wanted to give the overall look and feel a facelift. Germain’s marketing team wanted a corporate look that was professional and clean, with a lot of white space. We wanted to emphasize the feel of the company’s culture through carefully selected images of real employees.

Site Map

My first step was to develop a site map so that we could focus on building a solid site architecture. Germain decided they wanted their career site to function as its own site, independent from their main sales site. I built out my site map accordingly. The Germain team planned to use their pre-existing site copy with some edits, though they were open to our recommendations for any modifications. We focused on developing content that would speak to potential candidates and drive them to apply. I wanted the call to action to be the apply button. It would exist on every page, always sticking to the top when the user scrolled, to ensure that candidates would always be able to get right to the list of open positions. After all stakeholders had agreed to the sitemap, I could move forward with the low fidelity wireframes.

A browser window displaying a diagram of Germain's site map

Low Fidelity Wireframes

At Hireology, the UX department works in Figma. I used this tool to build out the low fidelity wireframes of each unique page design – both desktop and mobile. The wireframes were also built into a clickable prototype. I have often found this to be the easiest way to show wireframes to clients, as it gives them a better idea of how the final site or application will function. The low fidelity wireframes were approved by the developer, the project manager, and the product manager before they were presented to the client. I addressed any concerns with a quick revision round before moving on to high fidelity wireframes.

A browser window displaying low resolution wireframes of Germain's career site redesign

Three mobile phones displaying low resolution wireframes of Germain's mobile career site redesign
A browser window displaying low resolution wireframes of Germain's career site redesign

Three mobile phones displaying low resolution wireframes of Germain's mobile career site redesign

A browser window displaying low resolution wireframes of Germain's career site redesign

High Fidelity Wireframes

The high fidelity wireframes were also built in Figma, with updated design styles closer to the finished product. All planned pages were built out with stock images and Lorem Ipsum copy while we waited for final copy and images to be delivered by Germain’s marketing department. The wireframes made another cycle through each teammate for approval, and then we presented them to the Germain team. A final set of revisions were completed to apply Germain’s provided photography and updated copy into the prototype.

A high resolution mockup of Germain's Core Values page
A high resolution mockup of Germain's main career site page
A high resolution mockup of Germain's Benefits page

Hand Off to Development

After all levels of leadership in Germain’s organization had signed off on the final prototype, I handed off the designs in Figma to our developer with a small UI kit to work from.

Tiles showing pieces of Germain's website style guide for the developer