- User Experience Designer
- Web Designer
- Information Architect
- User Research
- Site Architecture
- UX Design Mockups
- Web development of all pages
- Low-maintenance CMS solution
- Updated brand visuals
Seattle’s boutique solution to staffing and recruiting needed a site as fresh as their service.
When iMatch approached me to redesign their site they stressed that their niche was in technology and finance professionals. Both of these segments are used to clean, modern user experiences that adapt to whatever device is handy.
I worked with various department stakeholders to sketch out user-flows, wireframe each page, and finally design and develop the website. Using a mobile-first approach each page was built to prioritize the most important information into sections that render beautifully across mobile phones, tablets, and desktops, and supporting all browsers
While adding fidelity to the website mockups I realized that the site also needed a refresh to their brand colors and some new custom illustrations they could use throughout their digital and social media channels. I worked on a new palette that complimented their rich red that clients had grown to recognize.
The final stages of this project included the implementation of a light content management system that allowed the client to make simple edits without having to perform large-scale updates typically associated with typical solutions like WordPress and Drupal. The site also incorporates a dynamic Career Portal powered by Bullhorn and PHP.
I redesigned the iMatch career portal to improve usability and make it easier for job seekers to find the right positions. The portal allows users to easily search, sort, and review job openings based on a number of factors. Users can also share job postings on their social channels and with their email contacts, as well as view similar jobs that might match their criteria. When a user finds a match, they can complete the simplified application form and submit their resume all through the portal.
Buttons are disabled until users have completed the requisite form fields with valid entries. Informative inline error messages populate throughout the form fields to help users through the funnel towards a completed job submission.
Watch the video to the right to follow a user through the flow of searching and filtering for an Accountant job, reviewing the job descriptions of posts, then exploring the related openings, and ultimately applying for a job that best matches their skill set through the form.
In order to design a website and career portal that solved user needs, I along with the project stakeholders had to really understand what those needs were. After conducting several empathy interviews with existing iMatch clients and users of similar job finding sites, where I asked open-ended questions about the way they used the job search tools they were familiar with. As we’d navigate through these tools, I’d ask questions like, “how does this message make you feel?” and “what do you like or dislike about this process?” From these interviews, I had a collection of qualitative information about how the users interact with these tools.
I chose to use an empathy map to help align my efforts with the stakeholders so we could visualize what our user’s needs were and decide how to prioritize them. An empathy map is a collaborative visualization that’s used to articulate what we know about a particular type of user by focusing on what they say, think, do, and feel. In this case, we focused on job-seekers in the financial space, as that is a core user group. We did a similar exercise with the technical recruiters as well. These steps helped to externalize knowledge about users to create a shared understanding of the problems we were solving and made reaching consensus as a stakeholder group easier.
To meet the needs for iMatch, I needed to better understand who they were trying to serve. I worked with the Managing Director to break down their typical clients and what industries they came from. iMatch has a personalized approach to recruiting/staffing and the staff prides itself on being able to fill a broad array of talent requests, but ultimately their clients break out into two high-level segments: people who need talent, and talent who want a new job. The bulk of their clients in both of these segments are in the Information Technology and Finance industries. The reps at iMatch were able to describe a few of their recurring clients in great detail, and from that, we were able to put together personas that represented who they were targeting currently and who they wanted to start attracting and servicing through their website. The personas we came up with helped me to identify who I was designing for. I had a better sense of what goals they were trying to accomplish; what state of mind they were in when using the site; and ultimately, what information they need to take the desired action.
I worked iMatch to understand what information the users of the site needed, and also hypothesized on what content would help tell iMatch’s story. After a few rounds of adding top-level sections and then combining some of the more granular breakdowns, we landed on five top-level sections that would ultimately appear as the main navigation throughout the site: Find Work, Find People, Our Process, Our Team, and Contact. Each section led down their respective decision funnels for the user.
Wireframes & Mock-Ups
I developed wireframes to provide clarity on how each page-type would be structured. I used only neutral grays for color to keep all of the stakeholders focused on content, scale, and visual hierarchy knowing that colors would be a consideration for the mock-up and development phases of this project. For navigation, I only included text for items where we had sign-off on verbiage and added placeholder text to give the team a sense of how content would flow on each page.
After a round of edits to the wireframes, we had consensus and I mocked up the key pages that could serve as the templates for all others. These were the Home, Find work, Our Team, and Contact pages.
Drag slider to compare medium and high fidelity mock-ups.
Find Work Page
Our Team Page
The main red from iMatches brand, dubbed “Recruiter Red” need an earthy clay color to give the palette a human element. iMatch is all about human-to-human connection. Their recruiters have a very hands-on approach with their clients, and the various shades and tints of this clay color reinforce the idea that the process will be organic and personalized. Hired Maroon is used on buttons and links to give just enough user feedback when clicking elements throughout the site.
All values measured year-over-year from the previous year’s activity compared to the first year of the new site being launched.