Product Design
Web App
2021
About Tayo HR
TayoHR is a recruiting software for medium and large-sized businesses and the people who work in them.
TayoHR make it easy to source, screen and onboarding candidates while prioritizing DEI by leveraging the use of AI, automation and analytics. TayoHR is designed to set you free to focus on what matters most and use data to help the organization make strategic
decisions.
Project goal
Design a MVP solution which can be presented to higher management and investors and further allow the project team to develop the product phase 1.
Business goal is to make TayoHR to be the key leader in using AI, Analytics and Automation tools to bring efficiency and fairness to the recruiting process. And how our feature technology can be used to democratize opportunity for every qualified candidate.
Key Problems
Key problems the software intends to solves are lack of equitable hiring in the workplace, retention challenges and tedious administrative tasks in HR space. TayoHR is a value based and cloud based SaaS platform that empowers recruiters and hiring managers to make faster, better, and bias-free hiring decisions. Unlike the competitors, Tayo HR wants to prioritize DEI in the recruitment and onboarding workflow process to eliminate conscious/unconscious bias to achieve equitable hiring.
Scope & Design Process
My Role
Responsible for end to end design process
Stakeholders
Project Manager, Founder,
Top Management
Our approach
Work in an agile way by designing and validating one section at a time
Discover
Define
Design
Deliver
I conducted workshops with stakeholders to understand requirements, document our research, and prioritise features
Requiremeant Gathering
User Interviews/Surveys
Competitor Analysis
Card Sorting
Secondary Research
Persona Development
•
•
•
•
•
•
We needed to understand user activities and define the experience of the product journey and ended up in the following artifacts
User Scenario
Task Flow/User Flow
Info. Architecture
•
•
•
As per the prioritised flows we ideated on a few approaches while testing each flow and created visual designs
Ideation/Whiteboarding
High-Fidielity Wireframes
Visual Design
Interactive Prototype
User Testing
•
•
•
•
•
Once all the designs were finalised we coordinated with the project manager to have a smooth hand over
Design Validation
Final Prototype
Specs and Assets
•
•
•
Timeline
Week 1
Week 3
Week 5
Week 2
Week 7
Week 8
Week 4
Week 6
Plan & Discover
Define
Testing & Validation
Design UX
Wireframes | Flow 1
Flow 2 & 3
Flow 4, 5 & 6
Design UI : Visual Designs
Prototype & Handoff
Requirements
Job description tool
Candidate screening
Schedule interviews
Video interviews
Candidate verification and background check
Chatbot
Recruitment analytics
Onboarding experience
Applicant tracking system
Post multiple jobs
AI candidate shortlisting system
Research
Understanding recruitment
We conducted our research phase to understand all the aspects of recruitment and as we had access to users (few directly & few via project manager) we gather insights from them & understood their perspectives. We also had a few insights from a business perspective from the project manager, so we further focused on the experience, pain points, roles, and competitors so that it gives us a foundation to analyse these results and convert them into features & user flows.
User
interviews
Competitive
analysis
Secondary
research
User research
It is hard to concentrate & keep track of different hiring stages of multiple candidates
I want to ensure that the candidate has a good recruiting experience
It is a challenge to manage multiple job boards
Unaware of active jobs
I want to hire best candidate without any personal bias
Recruiters
screening,
write & publish jobs, interviews, onboarding
Keeping track of offer letters is challenging for me
I have to put extra effort to check the status of background verification
Candidates say no to the provided offer on the date of joining
Hiring a candidate is a slow process as it involves multiple steps
Senior Recruiters
interviews, job offers, salary negotiations
Interview gets scheduled without screening the candidate
Candidates sometimes look good on paper but lack the relevant skills
Communication gaps with recruiters should be reduced
Sometimes documents related to the candidate's profile are missing and it creates a blocker in the process
Hiring managers
evaluation & assessment, onboarding
Key interview insights
80%
Recruiters find it difficult to manage multiple candidates on different job boards.
65%
Recruiters find it difficult to be mindful of diversity & inclusion while looking for a candidate
70%
Recruiters think constructing an excellent job description is time consuming & difficult. They would rather concentrate on pre screening candidates
70%
Hiring managers agreed that keeping track of events performed and yet to be performed for a job opening was a hassle.
60%
Senior recruiters find it difficult to track the verification process without interrupting their workflow
80%
Hiring managers said it will be helpful if they can track job openings individually to make informed decisions
Competitor analysis
As this was a new area of domain for me, I tried studying as many competitors as possible. Few competitors were already suggested by the project manager in our ongoing workshops, but I had to explore all possible competitors from a UX perspective as provided competitors were not enough to conduct an analysis. I browsed through review websites, documentations, demo videos, product trials and documented those results.
Workable
Workable provides recruitment tools, processes, and automation all in one complete solution. Workable has exceptional candidate experience, it provides applicants with an advanced careers page builder, interview self-scheduling, native texting, and one-way video interview tools.
Highlights
Sourcing
AI & Automation
Reporting
Breezy HR
Breezy HR is the drag-and-drop simple, affordable and flexible ATS/Recruiting solution. With a user-friendly interface and very limited onboarding time, Breezy encourages entire teams to participate in the recruiting and hiring process for their best recruiting results yet.
Highlights
ATS - Drag & Drop
Video Interviews
Candidate Management
Bamboo HR
BambooHR offers small and growing companies a human resource information system (HRIS) that includes an applicant tracking system (ATS), time tracking, payroll processing, employee engagement and employee satisfaction tools, automated reminders, and workforce data analytics to manage all aspects of the employee lifecycle.
Highlights
Good overall fit
Onboarding
Ease of Use
Rating in terms of user experience
Great
Average
Poor
Products we studied for specific feature
for the AI candidate matching feature using psychometric tests
for the smart job description tool
for analytics dashboards especially DEI dashboards
Understanding the recruiting process
As I had very little idea about the recruitment process, I conducted workshops with the project manager to understand all the aspects of recruiting. We tried understanding the importance of each role while talking to each type of user. This was very important for my understanding as we had to further explore each recruiting stage to construct user flows. In this activity, I gained a good high level knowledge of the process and formally documented the same.
What is it ?
S
o
u
r
c
i
n
g
Shortlisting
Background verification
Interview &
Assessment
Job Offer
O
n
b
o
a
r
d
i
n
g
User personas
I conducted a workshop to create a persona with the project manager which was sub result of the interviews we conducted earlier. This gave a good foundation for understanding our users for later design phases.
Recruiter • 27
John is a white male and works as a recruieter in an agency on contract basis, he focuses on inclusive hiring and manages a lot of communication and followups.
Personality
Open minded, Extrovert, Adventurous, Constructive, Enjoy interacting to people
Interests
Blogger and writes experiences, Meeting new people, Hiking, Fishing
Skills
Public speaking, Interpersonal skills, Task oriented, Good Communicator
Reasons to use product
Increase efficiency, Hire quality candidates, Better collaboration
John
Hiring manager • 35
Denice is an african american female, works as a product manager in a product based company. She has good amount of exprecience in recruiting and regulary coordinates with HR staff.
Personality
Introvert, Joyful, Cautious, Loves staying indoors
Interests
Book reading, Poetry clubs, Tv shows
Skills
Good interpersonal skills, Team leader, Task management
Reasons to use product
Communicate with candidates easily, Interview candidates efficiently, Onboard candidates efficiently
Denice
Define
User stories
Although this was an activity conducted by the project manager, I helped by creating a few user stories for each use case so that we have the foundation of a few features and epics. This also helped us gain further knowledge about the activities of the different personas.
Stakeholder
Designer
User Journey
As we gathered the understanding of the recruitment process earlier in our discovery phase, we took that as a starting point and started constructing the journey of the user for hiring a candidate to gain an understanding of different touchpoints, intentions, and opportunity areas. This also defined the hiring funnel formally.
Sourcing
Shortlisting
Selection
Onboarding
Create a new job opening and write an appropriate job description
Post the created job to multiple job boards
Recruiter pre-screen the applications before sharing with hiring manager
Recruiter conducts a screening call with the candidate
Hiring manager screens resume and shortlists for next stage and conduct first-level screening on call
Hiring manager shares an assignment with the candidate
Recruiter schedules & hiring manager conducts an evaluation interview with the potential candidate
Hiring manager does the assessment & review of the interview & assignment and shares the feedback
Recruiter creates an offer for the candidate and the candidate accepts it
Recruiter initiates the background checks
The onboarding process gets started and recruiter tracks the process for a smooth onboarding experience
Login to application
Click on create new job and fill all the details
Paste job description previously created in google docs
Post the job and repeat for each platform
Open applicant’s mail to screen and forwards to hiring manager
Recruiter contacts the candidate through the provided phone no. in the resume to understand the candidate
Meanwhile hiring manager opens recruiter’s mail and reverts to schedule an initial call with the candidate
Recruiter opens google calendar and creates a meeting invite
Hiring manager evaluates and shortlists the candidate via mail
As per hiring manager’s first level evaluation recruiter shares the appropriate assignment
After recieving the assignment via mail, recruiter opens google calendar and creates a meeting invite for candidate and hiring manager
Hiring manager shares review & assessment via mail to the recruiter
Recruiter starts writing the offer letter on google docs and browses to previously written letter for reference
Recruiter opens third party application and inputs details of the candidate for background check
Recruiter sends onboarding checklist of documents and todo list for onboarding
Recruiter does back and forth for this process via mails
Writing job description is a time taking process without any reference docs
Manually posting job on each platform is frustating
Not sure how each job post is doing
Have to switch multiple applications
Looses track of mails as there are multiple candidates
New mail is drafted for each stage
Not sure about status of each candidate in a long list of job openings and candidates
Non availability of hiring manager or candidate for video interview
Choosing correct assignment is sometimes difficult
Have to switch multiple applications
Login each time to third party application to see background check status
Generation of too many mails for onboarding, which developes frustation and mismanagement
Provide smart job description writing solution
Jobs tracking at one place
Provide list of reference documents, intergtaed into the description wiritng tool
Make status of the cadidates visible upfront and transparent
Intergrate all processes at one place
Reduce dependency
on mail
Offer video response interviews
Segregate candidates on the basis of jobs
Reduce dependency on google calendar
Intergrate all onboarding activities
Showcase third party application status
Provide status of all onboarding activities
Phases
Actions
Touchpoints
Gains
Opportunities
Information Architecture
Once we had user stories and user journey, we got a pretty good understanding of different sections of the application and its functionalities. We created the architecture to define what things are required and should be aligned within each section.
User Flows
As we had a high level hiring flow from our early discovery, I created use cases for each hiring stage and divided them into sections and further created user flows for each section seperately. All of this could have been created into one single flow, but as per our finding each user have a defined role and would access the required section only. So we had to cater that need and focused on each use case.
We have showcased a few of the major user flows out of all the use cases, all of them were prioritised as P1, P2, P3, and so on...
New job posting
Manage jobs
Pre screening & Schedule Interview
Send offer to new hire
Design
Wireframes
As per the defined priority, I picked each user flow and started working on the wireframes for it. At this stage, competitive analysis and user stories came in handy and helped me to design solutions by giving a good reference point.
Signin, Signup & Dashboard
Jobs & Jobs creation
Candidate & Pipeline
Feedback on Wireframes
The project manager presented the wireframes to the potential users and received feedback on the designs, we amended our designs for the problem areas. This gave a pretty good validation and confidence boost to take these wireframes to the next phase.
Finding candidates as per jobs and their status is time consuming and there can be 100s of candidates so will it be more difficult to find a candidate even with a filter option
Need more flexibility of actions performed from candidate detail screen as there are more things required to take action on expect scheduling interview and sending email
Many questions can be asked from a user and not just one long one. I will be interested in seeing response to each question separately
No way to save new offer letter
Visual Designs
As we defined the layout pretty well in the wireframe stage, I chose to keep the visuals simplistic and neutral as users have to consume a lot of information at the same time. So to keep the visual load to a minimum, I used less color and more white spaces. Also as this application was an MVP and later many features would be added, I designed the visuals keeping scalability in mind.
Dashboard
Dashboard overview
Dashboard gave a high level view to the users of all kinds of information without deepdiving into different sections. this will be mostly used by senior recruiter and hiring managers
Jobs section
Create a new job
Creating a new job flow has 3 major stages - writing a job description, preview & job boards. We wanted to focus on guiding the user to write job descriptions by using AI capabilities which eventually improves the quality of job descriptions for different requirements
Jobs section
Choose from the template library
When the user writes a description it gets stored in a library and the user can later use these as templated, which eventually saves a lot of time while posting new jobs. We gave the option like score and dates to make the choice easier for the user
Jobs section
Schedule interview
Users can schedule an interview without switching to another external calendar/meeting application. This action is performed in a modal window which helps the user to concentrate. They can also add required team members to the interview. Users can choose to schedule either of the two interview formats
Live
Interview
Video
Response
Candidates section
Candidate overview
Users can see all the candidates and their status in one single view which is segregated by jobs, user can collapse those jobs which are required by them and can concentrate on the required one. They can further apply filters to find the required information easily. As storing candidates' data is usual practice by recruiters in excel sheets, users can also import candidates from excel sheets to the current view
Candidates section
Candidate’s profile
Users can navigate to this screen from the candidate overview and see each and every detail about a candidate. They can then perform many actions here, one of them being to schedule an interview which is the most frequently performed action.
Candidates section
Video interview response
Users can see the response video question by question and provide their feedback or assessment by commenting, this feature helps the user to assess candidates efficiently and creates an automated experience. The questions can solely be related to skills, experience, or used to conduct a technical test.
Candidates section
Pipeline board
Just like the candidate view, the user can choose to look at the candidates in a kanban board format. The motive of this view is to have a holistic view divided by hiring stages, user can see all these details in more of a visual format and move candidates from one hiring stage to another by drag & drop action
Offer section
Offer generation
Users can initiate offer generation from the candidate detail view once the candidate has been interviewed. All the fields are linked to a predefined document format which reduces the pain of writing an offer letter for every selected candidate
Offer section
Review document
Once users click on the “Next & Review” button from the previous screen, they can review the document and make amendments as per the requirement and choose to submit the document by “Send for Approval” (if approval is required by a senior) or “Send without Approval” (if approval is not required by a senior)
Offer section
Other details
As this is a 4 step process (personal, job, compensation, and other), every time user saves one type of detail the system automatically saves the document into a draft unless the user wants to intentionally cancel and delete it. This process was chosen to be done in an accordion format as the user can easily go back and forth filling these details.
Offer section
Offer overview
Users can see all the offer letters generated for a candidate and their status in this view. This view is especially for a senior recruiter or hiring manager to approve the generated letter to open and see the offer letter, as of now demonstrated design is from the recruiter's perspective for a senior recruiter or hiring manager they’ll also see an approval button next to discard.
Onboarding section
Onboarding overview
Users can see the view segregated by onboarding stages and also perform an action like initiate, stop, and complete the onboarding process for a candidate
Onboarding section
Initiate onboarding
Users can add required details for onboarding the candidate and assign a buddy to help them onboard, use can also import any previously created document.
Client testimonial
Project manager
Client Representative
Just to quickly let you know that the UI/UX Project we worked on turned out to be a successful one. Without each one of you, it might not have been possible. And I’d like to thank each one of you for the hard work and all the effort in building the designs and mockups for TayoHR software.
On behalf of the management, I would like to extend our appreciation for the amazing work done on the TayoHR ideation to prototype designs. The professionalism and the endless hours that you and your team have spent on the prototype have impressed the stakeholders immensely. Thank you once again for all the effort.
“
”
Collaborative workshops
Stakeholder
Designer
Thank you for your time