Yobs Technologies
Launched in April to May 2020
ROLE: Contract Product Designer
RESPONSIBILITIES: User Research, Business Strategy, UX, Visual Design and engineering handoff
TEAM: 1 designer, 1 CEO, 1 engineering lead
DURATION: 3 months
Yobs is an award-Winning AI API for remote soft skills assessment, leveraging NLP, computer vision and ML, combined with prosody and linguistic analysis to capture the best talents over voice and video.
How might we design wireframes for personality web dashboards and behavioral assessment reports that can be reused as templates for external clients like Nissan and PwC in order to capture accurate trait highlights for sourcing the right candidates?
PROJECT OVERVIEW
PROJECTS I HAVE WORKED ON AND LAUNCHED IN SPRING 2020
-
Project 1: Designing an end to end personality web dashboard for personality traits analysis and direct integrations with external clients
-
Project 2: Created a user feedback loop to improve the machine learning algorithm and overall feedback flow
-
Project 3: Enabled recruiters to track and compare candidates through data table
-
Project 4: Added a custom personality module for personalized analysis
-
Project 5: Designed and deployed a behavioral assessment report in sandbox environment using curl command
-
Project 6: Investor's slide deck's design and branding (Under NDA)
.png)
DESIGN PROCESS
DESIGN PROCESS
What is the problem?
In Yobs, we provide a detailed web dashboard to analyze candidates’ personality traits, soft skills, and overall interview performance, with a downloadable personality PDF report to speed up the traditional hiring process. Yobs is an API that combines technology (computer vision, ML, NLP) with domain expertise (human in the loop) to remotely assess talent over voice/video.
In Q2 2020, through use research, we identified a key usability problem. Poor navigation, unclear text copy and unintuitive data visualization led to >36% churn rate. Inconsistent typography and features also resulted in excessive long sessions to perform core actions.
USE CASES
After multiple meetings with external clients like Nissan and PwC, I was able to gather some main use cases for the project. The two main verticals that the dashboard were serving included low level recruiters (non-technical) and high level recruiters (technical). I gathered their main problems as followed:
-
inflexibility of the current dashboard (recruiters wanted to focus on one aspect of personality traits instead of overwhelmed by all of the data analysis)
-
lack of clear definition of each personality led to degraded credibility and poor analysis of candidates' ability.
I then came up with several design opportunities and goals to tackle users' problems.
DESIGN CRITIQUE
By undergoing extensive rounds of user critique sessions, I was able to extrapolate detail insights on the old infratruture of Yob's personality dashboard:
Lack of accessibility of Candidate Insights' Page
65% of recruiters expressed the need to download PDF report in order to quickly share the candidates' results with others. In addition, the combination of personality and perfect score confused the users since users thought the perfect score was ideal to the users. Thus a more focused and streamlined experience is needed.
Ambiguous Text Copy
The text analysis was super unclear as users shouldn't make competition against ideal scores, and instead should focus on insights and candidates comparison. The poor negative space also decreased glanceability and use of light fonts also decreased legibility.
Poor Personality Visualization
77% of users voiced out that the chaotic radar graph gave wrong interpretation of personality traits were correlated and assessed holistically led to decision paralysis. The separation will align to mental models.
Misuse of colors, icons and text hierarchy
The poor contrast ratio between word and background like the overly bright blue color to indicate percentile caused the word with difficulty to stand out. In addition, inconsistent and unintuitive icons didn't align with users mental model. Lastly, lack of text hierarchy decreased fast visual scanning.
OVERVIEW
PROJECT 1: Personality Web Dashboard
One of the projects I was tasked during my time at Yobs was to design a candidate result dashboard that enabled recruiters to quickly identify different personality traits of the interviewees and determined whether the candidate was worthwhile to move on to the final stage of the interview.
The whole dashboard is a drag and drop module which allows recruiters to view users' personality profile, compare unique percentile among other candidates, capture traits from big 5 personality analysis and soft skills' summary. The whole result page is generated by Yob's API that leveraged computer vision, linguistics analysis and prosody to infer personality characteristics in interview settings.
The goal of the whole dashboard design is to allow
-
deeper discovery of candidates' personality traits (combo of soft + hard skills) in order to make better recruiting decisions
-
multi layered analysis to gain a comprehensive understanding of the candidates among the whole pool
-
flexible personalization of modules to view each trait's data in order to find fit between companies and interviewees.
RESEARCH
Sacrificial Concepts
As Yobs continues to expand the client base beyond some Tier 1 early customers (CareerArc, OpenClassroom), we could tell that users want more ways to interact and understand the candidates’ data and set relevant filters for personality traits.
By using a new research methodology (low fidelity and future concepts to enable users to brainstorm with the team), we create and articulate new features that have the highest users’ needs.
.png)
Features' Brainstorm with clients and CEO
.png)
Features' narrow down with engineering and resource bandwidth considerations
PERSONALITY WEB DASHBOARD
DASHBOARD LAYOUT
I began looking into a single page framework to lessen the friction it takes to analyze new pages. This would enable certain modules and panels to handle the load times, while maintaining a single layout that allows users to focus on most important info like data and summary
-
Better scalable tabs on the far right, sacrifice real estate for detail trait analysis
-
Possible concern with the understandability of the split view, equal emphasis on all the content might pass over important info users looking for
-
Hierarchy aligned with user mental model, clear differentiation of space to emphasis on content importance, less scalable
.png)
Horizontal Splitview
.png)
3 Columns Vertical Splitview (Side Bar)
.png)
2 Columns Vertical Splitview
Using card sorting methodologies and looking at our user data, we determined the hierarchy in the image below was most intuitive, achieved best users' understanding and had the most optimal navigational efficiency to users when coming into the platform.
%20(1).png)
USER FLOWS / INFORMATION ARCHITECUTRE
After determining the right format and layout for the dashboard , I created user flows. I brought these flows into design critiques to explore how effective they solved user needs. I also used these flows to identify edge cases early on, to layout the foundation for the candidate result page and address engineering needs.
FINAL DESIGN
The final design of the candidate results' dashboard was crafted from a combination of research findings, design iterations with external clients, engineering feasibility, and product requirements.
Since the dashboard served as a template for integrating into different companies recruiting channels, the whole architecture was built into various modules which recruiters can apply or reduce to best suit their interests. Each module was also created dynamically, which each module can be swapped from different position in order to best prioritize recruiters' needs. This allows fast agility to control and personalize each candidate's result.
Lastly, recruiters could also easily filter through multiple layers of data visualization, Big 5 and soft skills, allowing better decision makings on determining most important traits for a particular role. Clear descriptions of traits also made recruiters easily gauge users' ability and make better assumptions.
Dedicated personality summary with the most important traits surfaced for recruiters' quick glance
Condensed soft skills summary with top 4 insights as line graph and explanation of the science behind Yobs
.png)
Big 5 Personality Analysis with top trait's strength and weaknesses displayed
.png)
CTA button expanded into popup modal view, allowing an additional layer for recruiters to get in depth details for particular traits
.png)
Popup modal to indicate completion time for PDF download
CUSTOMIZATION
With the right data visualization, I also looked into designing filters and modules that best catered toward different recruiters’ needs to gauge candidates’ ability.
.png)
Horizontal filtering
Filtering relevant categories
User Flow for Custom Module Customization
VISUAL TREATMENT
After designing the different components for personalized modules and customized filtering, I started to scope out different states and tested with users to find the most intuitive visual treatment for CTA selection. In addition, I considered edge cases like error state, loading state and also network error to address internet connection speed and data processing latency
Different visual variants for CTA
Loading State, Error Consideration and Network Error
OVERVIEW
PROJECT 2: Feedback Loop
Working on the ML Algorithms, engineers discovered users feedback could improve data quality and there was a strong user needs from recruiters to point out incosistenncy in data and area of improvement. I designed two variants that could achieve the goal.
The first one was a quick and efficient feedback selection that gave the most common defects of the dashboard for users' selections, but might require additional models. The second design was a bounding box for writing and capturing with screenshots taken in the dashboard's infrastructure. The problem however, is that the latency with loading the screenshot might increase churn and possibly tough engineering implementation.
a. Feedback Selection + Bounding Box for writing
.png)
b. Bounding Box for writing + Capture Screenshot for proof
%20(1)_p.png)
I decided to move on with choice a due to better conversion and faster engineering implementation. I then explored several ways to design feedback layout with icons and text copy placement. I also accounted for edge case where users would want to write a lot of text and imposed word limit down below to account for the word limit scenario.
USABILITY TESTINGS
14 usability testings are conducted with top notched recruiters from 6 tier 1 early customers including Nissan Motor, OpenClassrooms, CareerArc and Workwhile, etc. Utilizing templates from User Experience Questionnaire, I was able to assess important aspects like clarity, efficiency, and dependability.
-
6 out of 6 customers gave excellent score on the clarity of each data component and the ability to view personality traits in depth
-
5 out of 6 customers could efficiently navigate in the dashboard and find personality that best fit their needs of sourcing candidates
-
6 out of 6 customers approved that they could depend on the result dashboard to make preliminary judgment on sourcing right candidates
BUSINESS OUTCOMES
After completing various demos and usability testings, our team was able to achieve early business deals with multiple external clients:
-
Successful paid POC, agreed on escalation to annual SLA for 1,000 users with Nissan
-
Contract signed, $50K first year SLA with PwC and EY
-
Paid POC ongoing, positive feedback for an annual SLA with OpenClassRooms
KEY LEARNINGS
Defining the scope and process
By breaking down the project into multiple steps, I was able to document all the learnings along the way which also constantly helped me to clarify the project scope and progress with the CEO so that my design could meet both users' needs, product requirements and engineering's constraints.
Universal and flexible design solutions
From designing the web dashboard, I learned to repurpose each design to different use cases. I l found that it was utterly important to accommodate my design solutions to extensive amount of use cases. By universally adapting to different users' needs, it can be easily appealed to a wider range of users.
Testing is key
By engaging users early before creating wireframes and onboarding users for usability testings helped me a lot to understand the user needs and the wider business scope. It also helped me to be confident in my own design decisions and make a real impact to the business.
Balancing between enough and too much
It's always important to provide the right information to users while not overwhelming them. My initial design was way too wordy and visually cluttered, thus I had to make sure whether the extra clarification was necessary to aid users' navigation or finding candidates' information.
MORE PROJECTS
 |  |  |  |
|---|---|---|---|
 |  |