rh-final.jpg

ReelHire. Design

 

Role

UX/UI Designer & Developer

Summary

Several examples and explanations of the design choices our team made while polishing the ReelHire service MVP. All described solutions came as a result of continuous testing and were validated primarily through user feedback. These solutions helped shape the way users perceived and interacted with the service, and based on user feedback, resulted in creating a more meaningful and pleasant experience.

 
 

Team & Stakeholders

Product Owner, Software Engineer, Recruiters & HR consultants


Color palette - providing comfort

The idea behind picking green as the primary colour came from the initial vision of the service and the problem it was build to solve. ReelHire was created as a tool to evaluate a candidate's personality. And generally, in order for a person to open and show her true character, she needs to feel comfortable, calm and secure. Green is the colour in the centre of the spectrum, that does not require any adjustments from our eyes to interpret it, thus evoking the feeling of comfort and calmness. However, in all fairness, this wasn't a decision based purely on theory. We tested a lot of different colours and green also felt better than the others.

Green was picked based on both color theory and numerous palette tests

Our next step was to determine the exact hue, saturation and brightness. We tested a range of green hues, from cold to warm, trying them out on desktop, mobile and tablet with different brightness adjustments, for different UI elements and in various colour combinations, involving recruiters, friends and family to give feedback on which one felt the best. 

We also followed a basic material design principles, having one primary colour (green), and several complimentary colours (white and different shades of grey), while occasionally using red and yellow to highlight important UI elements or service states. Our goal was to create a simple, consistent and predictable experience and avoid an overwhelming amount of colour information.

 
 
 
 
rh3_3.jpg
 

Problem - Ignoring the stars

After releasing an early version of the service and getting first testers on board, we noticed that the candidate rating stars were heavily under-used. Rating stars were meant to be a way for a recruiter to mark candidates inside a questionnaire folder. A recruiter would give a candidate a certain number of stars, depending on whether she liked him or not. Also, this served as a way to arrange candidates in the folder. So, on paper rating stars where a useful feature, but in reality they were heavily ignored.

rh3_4.jpg
The rating stars were hard to notice and their interactivity was not evident

We started by asking question, reaching out to our testers and asking them why were they ignoring the rating feature. With a couple of them we went through the experience, observing how they worked with the service. In the end we identified several issues that could have been the cause for underusing stars. First of all, stars were hard to see. Some of our testers didn't even know stars were there. Secondly, it was not at all obvious what stars were and not evident that they are interactive. Stars had to stand out and needed an explanation on how to use them.

Solution

I am always extremely cautious about adding animations to the project. Custom animations are expensive, they have a high probability to bring in bugs and they take a lot of time to test and adjust for different screen sizes and browsers. In addition, animations require a lot of thought to design, since to determine a proper animation for an experience, one needs to consider the theme, aesthetics, frequency with which this animation will be shown, the time it takes to play and whether this time is worth taking away from a user. However, in this case, we decided to use animation to solve the problem.

Our solution was to explain the stars through animation

Our solution had to make the stars stand out without breaking the design consistency and visual priorities on the page. Also, the solution we would choose had to be reasonable, not taking too much budget to implement. Additionally, I wanted the whole UI element to be self-explanatory and actively invite users to interact. I wanted stars to introduce themselves, so I started by writing a short monologue that I imagined they were telling:

  1. "Hi, my name is Stars, I am right here"

  2. "I am interactable, please click on me"

  3. "I start on the left and end on the right"

  4. "Not that I am the most important thing on the page, but I might be useful for you"

  5. "I am cool, try me now!"

With this in mind I've sketched and explored several options, prototyped and discussed them with the team and in the end created and implemented the final animation that met our initial requirements and, in my opinion, pretty accurately conveyed all of the things I wanted stars to communicate.

Result

rh3_4_animation.gif

The majority of the testers noticed and absolutely loved the animation. Some of them even reported clicking the stars for the fun of it, getting candidates rated as a result. Though, despite, overall positive feedback, we saw an improvement on star usage only by 25-30% (estimated roughly through observation), which is OK, but not the result we wanted to achieve, suggesting that there could have been a deeper problem with the way the rating system was designed.

 
 
 
 
rh3_4_animation_2_1.gif
 
 

Onboarding & Tutorial

Video resume services are still rare, and were a completely new thing back in 2015. Even though concepts, like creating and sending out questionnaires, recording videos or having an online profile, are common and easy to understand on their own, using all of them in a specific manner within a single service required extensive explanations and guidance. Our main goal was to minimize the amount of tutorial text our users needed to read in order to use the service.

Our goal was to minimize the amount of text users needed to read in order to use the service

We also wanted to gradually introduce our users to the service content and functionality, giving them access and explaining only parts that were valuable to them right now. In addition, we wanted the service to be constantly guiding the user's to the next step, maybe even converse with them. In the end we defined three key principles to follow in designing the tutorial:

  1. Only valuable information

  2. Automatic explanation & guidance

  3. The best tutorial is the one a user does not notice

Also, before starting to design the tutorial, we wanted to understand how people, who have not dealt with the service before, perceived it. It was important to understand what mental model of our service a new user was forming, which areas and steps were confusing and needed clarification and which did not. I worked with a couple of people, who never saw ReelHire before, asking them to complete different tasks. I observed how they navigated around the screens and documented questions and perception difficulties they had. After that we were ready to create a tutorial.

Result

Our solution was to integrate the tutorial into the way ReelHire behaved and interacted with users. We tried to make it an integral part of the experience, as if the service was consciously explaining itself, rather than introducing a manual a user needed to read beforehand and navigate back to it after encountering a problem. However this smart tutorial was available only in desktop version of the service. Below are the key features of our tutorial solution:

We integrated the tutorial into the way ReelHire behaved and interacted with users - a part of the experience

1. Folders and tabs of ReelHire, that did not bring value at the given time, were not explained and could not be accessed unless they become valuable. This approach allowed to avoid useless information about the service from the start, instead focusing user attention on areas that are important at the moment.

Example: we do not explain what is "My Questionnaires" folder to a job seeker, if he or she had not received any questionnaires yet. We just told the user when the folder would become available.

rh3_6_1.gif

2. We used short on-demand explanation rather than a manual style tutorial. All main tabs and key features are explained through pop-overs. Sometimes, you are even told what will happen after you press the button.

Example: The "Save & Get Link" button at the bottom of the page explains what will happen after you push it. ("This will create a public version of your resume")

rh3_6_3.gif

3. The text on the pop-overs is designed in such a way that in some cases it feels like the service is talking to you, consciously guiding you through the experience. That was my favourite feature and when such "conversations" occurred, it felt really nice.

Example: Service offers you to choose "Are you a jobseeker" "Or, are you a recruiter?".

rh3_7_3.gif