Role
Senior Product Designer,
UX / UI
Tools
Figma, Overflow, Webflow, UserTesting
The Challenge
An essential part of structured interviewing is making sure to ask candidates the same questions in every interview. That includes the ability to go back and score candidates' answers based on those questions.
While Hireguide's existing version of an interview script builder was a good design, feedback from various users felt consistent. They expressed confusion on what to do next when first landing on this page. They didn't seem to interact much with the Questions Library, and also felt unsure of how to use the skill filters in order to find specific types of questions.
User Testing
In order to validate our proposed solutions, I took the team's mid-fidelity wireframes and brought them into a high-fidelity prototype that we then tested with users on UserTesting.com. We chose to do some light testing through this website as a way to quickly check to see if our assumptions on how to improve the user experience were correct.
Design. Test. Iterate. Repeat.
We decided to test with three initial users who work full-time in Human Resources. Some of their key tasks included:
Final High-Fidelity Designs
Once our team had clear feedback from usability testing, I made final edits to the high-fidelity wireframes so they could then be handed off to our engineering team to start implementation. Overall, our assumptions on what users were getting stuck on in the previous Question Builder designs were validated.
The Issue
After conducting user tests with 60+ participants at the end of 2022, we noticed a lot of users were unclear as to what their next steps should be once they landed on the Position Details page.
The Position Details page acts as a dashboard for each role a user is hiring for and allows them to collaborate with their hiring team, add candidates, setup interviews, and also manage the various rounds of interviews that go into hiring the right candidate.
The Solution
In an effort to "guide" users, our team worked to create best practices that outlined the suggested steps an interviewer should take to get the most out of their hiring process with Hireguide.
Smart Guide was to act as not only a task list, but also as a learning tool to educate our users on the science behind hiring and how to complete each step in the process.
It was collectively agreed upon that Smart Guide should not be too intrusive to a user when it was open on the Position Details page. The designs needed to be flexible to accommodate different types of educational content, including videos, and also needed to utilize gamification with a "Process Score" to motivate and reward users for completeing the tasks.
Enhancing the Existing UI & Design Language
When I began to take my wireframes into high-fidelity UI, I automatically knew that I wanted to bring in brighter colors from our marketing palette to make Smart Guide stand out. The UI needed to balance both in boldness and playfulness, yet still work with the existing design system.
High-Fidelity Designs
When I began to take my wireframes into high-fidelity UI, I automatically knew that I wanted to bring in brighter colors from our marketing palette to make Smart Guide stand out. The UI needed to balance both in boldness and playfulness, yet still work with the existing design system.
User Insights
The advantage of using Hireguide's Smart Guide interview process is that users can then receive personal and workspace insights into how they did on their interviews and planning.
I knew that I wanted to carry over UI from Smart Guide into the Insights designs because they directly correlate and therefore should visually communicate such.
The design concepts for Insights utilized the same color palette as Smart Guide, broke down user insights into the same categories as the tasks in Smart Guide did, and also included progress scores that tied into the progress scores from Smart Guide.
