Yobs Technologies

Launched in April to May 2020

background.png

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)

Sacrificial Concepts (3).png

DESIGN PROCESS

Process.png

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:

  1.  inflexibility of the current dashboard (recruiters wanted to focus on one aspect of personality traits instead of overwhelmed by all of the data analysis)

  2. 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. 

Screen Shot 2020-10-28 at 5.29.48 PM.png
Screen Shot 2020-10-28 at 5.29.57 PM.png

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. 

Screen Shot 2020-12-25 at 7.04.52 PM.png
Screen Shot 2020-12-25 at 7.05.01 PM.png
Screen Shot 2020-12-25 at 7.04.28 PM.png
Screen Shot 2020-12-25 at 7.04.20 PM.png

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 

  1. deeper discovery of candidates' personality traits (combo of soft + hard skills) in order to make better recruiting decisions

  2.  multi layered analysis to gain a comprehensive understanding of the candidates among the whole pool

  3.  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.

Stakeholders Map Light@2x (3).png

 

Features' Brainstorm with clients and CEO

Stakeholders Map Light@2x (4).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

  1. Better scalable tabs on the far right, sacrifice real estate for detail trait analysis

  2. Possible concern with the understandability of the split view, equal emphasis on all the content might pass over important info users looking for

  3. Hierarchy aligned with user mental model, clear differentiation of space to emphasis on content importance, less scalable

Wireframe 3 (1).png

 

Horizontal Splitview

Wireframe 1 (3).png

 

3 Columns Vertical Splitview (Side Bar)

Wireframe 2 (1).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.

Wireframe (Final) (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.

Screen Shot 2020-10-28 at 5.33.37 PM.png
Screen Shot 2020-10-28 at 5.33.25 PM.png

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.  

Iteration 21.png

Dedicated personality summary with the most important traits surfaced for recruiters' quick glance

Iteration 24.png

Condensed soft skills summary with top 4 insights as line graph and explanation of the science behind Yobs

Iteration 16 (2).png

Big 5 Personality Analysis with top trait's strength and weaknesses displayed  

Iteration 20 (1).png

CTA button expanded into popup modal view, allowing an additional layer for recruiters to get in depth details for particular traits

Iteration 15 (1).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. 

Iteration 18 (2).png
Screen Shot 2020-12-25 at 11.16.45 PM.pn

Horizontal filtering 

Filtering relevant categories 

Frame 817.png

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 

Screen Shot 2020-12-25 at 11.34.32 PM.pn

Different visual variants for CTA

Screen Shot 2020-12-25 at 11.34.51 PM.pn

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 

Wireframe 1 (Horizontal filtering).png

b. Bounding Box for writing + Capture Screenshot for proof

Wireframe 1 (Horizontal filtering) (1).p

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. 

Frame 818.png

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

ultraleap
Study
LA Hacks
Premium Lenses
Collection
Scan