Product ConveyIQ (previously Take the Interview)
Project To create a responsive platform for recruiters to link into their Applicant Tracking System and automate the candidate communication process
Role Lead Product Designer
Team Thomas Blum (User Researcher), Katie Franklin (Product Manager)
Materials Whiteboard, Sketch, InVision
Understand the current platform
The first step of the redesign was to get acquainted with the current platform and understand how its users interacted with the functionality. Recruiters of large organizations used ConveyIQ to interview candidates in bulk and quickly evaluate candidate quality without arranging multiple time consuming phone or in-person interviews.
The current website was designed with a lack of consistency and an experience that was built around technological restrictions and not around an innovative empathetic user flow. There was no way to track individual candidates or use silver tiered candidates for other open roles. The platform was geared to help with only one part of the interview process and needed to be opened up to capture the entire workflow of a recruiter.
Identify key problems and business strategy
ConveyIQ had found it wanted to expand out of simply offering on-demand video interviewing as this had limited growth potential in a saturated market. Recruiters found that they were having trouble finding time to follow up and communicate with their potential candidates due to an overwhelming amount of applicants per role.
Draw paper prototypes
The design team (along with the CEO, product managers, and developers) used Google Sprint methodologies to establish what basic functionality was required for the MVP. Dot voting on individual features from participants in the sprint bubbled up the top priority items to explore.
Digitize paper prototype to high level wireframes
After the design sprint, the first step was to digitize the paper prototypes. These high level wireframes pulled together the collected ideas from the various drawn designs. Top prioritized features were expanded to display more detailed functionality. These wires were then put in front of developers for technical limitations exploration and in front of stakeholders for approval.
Build a clickable prototype
Once approved, the high level wireframes were finessed to have real world data. The pages were constructed into a clickable prototype so that they were able to be tested by recruiters for usability. Strengths and weaknesses were revealed and the details were ironed out further. There were also concerns about the data visualization of email campaigns and we soon realized they did not organize their daily work in the manner we laid out for them.
Revisions! Revisions! Revisions!
After came many rounds of revisions. We tested out different ideas and stream-lined the functionality for an MVP which would be a simplified experience yet still be able to lift the burden of the recruiters' daily workflow. Features like filtering candidates and building candidate profiles to house a candidate history became incorporated into the design.
Establish final wireframes for development
The product team dissected the final wireframes to slot features into the upcoming roadmap and determine technical efforts. The final user experience incorporated a few final changes such as scrapping the photography for individual candidates since not every applicant would be taking a video interview. A campaign library was established to build email templates through the platform. The candidate history became an activity stream to work with the technology of the Applicant Tracking System.
Envision a brand and visual identity
Meanwhile... In a rebranding effort, the Take the Interview brand was expanding to more than just taking the interview and wanted to encapsulate the full hiring process. It was adopting a new company name of ConveyIQ and was looking for a new look and feel for the reveal.
Working with an agency, I created a brand concept of the waterfall. The waterfall is a source of power and movement as the ConveyIQ will be helping candidates move from a large pool of applicants to the final few that will be hired in any open position. There is a consistent cadence as the rhythm of the water continues to flow. The visual language of all components and brand identity would be supported by this concept.
Stylistic choices were made. The color palette consisted of a strong gradient with bold supporting colors. The overall tactility of the components were flatter shapes with a delicate touch of shadow depth. The composition of the page would start with a heavy banner and trickle down to lighter elements with significant white space. Thin lines worked with this white space to balance the strong color blocks and bold iconography.
Create a visual language for a technical platform
There were many iterations on the styling choices as they applied to the platform. Each style set was voted on by the product team to determine the winner which would become the future of the visual components.
Architect site navigation and responsive structure
One of the most import decisions was how to structure the navigation to encompass all the features in a logical format along with enough simplicity to incorporate new features down the line. We decided to build the primary navigation across the left hand side to make it easily adaptable from our current platform. We wanted to make adoption to the new designs as fluid as possible for our current users.
The secondary navigation appeared horizontally across the masthead. It was a combination of tabs and filtering paradigms that reorganized the information given on a page. One of the main reasons for this decision was that the current filtering pattern was not visible and was overlooked by the majority of our user-base. We were able to combine multiple pages into one with strong filtering capabilities that brought the user into an already filtered list from different parts of the site. This made it easy for the recruiter to remove filters and reveal their entire pool of candidates at any time.
Lay out all components and patterns in a style guide
Every component was categorized and documented in a visual design style guide which aided developers to pre-build all the components in a React library. These standards accounted for all the ways a user interacted with a component and the logical basis in which to code these responsive elements. This became the foundation for all future designs. It was also beneficial for any changes to the design as it required little effort by the development team. They could make changes to the core library and it would effect all templated pages that housed that element.
All pages were categorized into six different templates. This helped limit developer strain and they were able to quickly build the site with consistency.
Organize functionality into a release schedule
After the visual styles were applied to the wireframes, the North Star vision was dissected into multiple release iterations. The first release was a working product that could stand on its own. New features were designed to sit on top of this core functionality and the platform would be able to easily scale and incorporate the rich features envisioned.
Complete from start to finish
The platform launched but it is continuing to expand based on user requests and new ideas that help recruiters handle their busy workload and find the best hires for the position.