Published on <a href="https://blog.prototypr.io/streamlining-the-job-search-process-df38e761812?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Kevin Xu <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IanSNOqQgB8hMgjQNCl5VQ.png">
<h4>Branding, UX/UI design, web design.</h4>
<h4>The Problem:</h4>
Hiring new employees is a time consuming, costly and slow process. Often times, unqualified candidates apply for positions and some potentially drop out during the application process, thus slowing down the recruitment process. With the vast amount of “qualified” candidates out there, how do recruitment staff find the right fit for the position?
<h4>The Solution:</h4>
Smarthire allows recruiting staff to seek out professionals already working in the technology industry and invite them to the platform, providing them access to new and fitting jobs catered to their own career goals. Smarthire is an invite only platform where candidates are evaluated, receives a rating based on their skills and their rating determine the quality of their job matches.
<h4>Tools</h4>
Sketch (wireframes and visual design), InVision (prototype), pen and paper (sketches, storyboarding), Xtensio (personas), draw.io (user flows), Balsamiq (low-fidelity wireframes).
<h4>Time</h4>
3 weeks Sprint in Agile environment
<h3>Discovery</h3>
<h4>Value proposition and research</h4>
Due to the difficulty of recruiting experienced professionals, our client decided to focus his product strategy on data scientists, artificial intelligence developers and machine learners. The goal of the product is to recruit experienced tech professionals for startups and small sized companies, who depend heavily on the skills and vision of their new employees.
With the product strategy in mind, i proceeded to conduct interviews and created surveys to understand what employees want in a new opportunity and what recruitment looks for in terms of finding a right fit for their company.
<blockquote>I asked myself the questions: what exactly do job seekers value in a new opportunity and how do we design our recruitment process to satisfy those values? I interviewed and surveyed tech professionals to find answers.</blockquote>
<h4>Key Insights</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/922/1*abgonrwwhFGaCjUS96Opdw.png">
The key differentiator of Smarthire is an evaluation process conducted by technical experts. The position of technical expert can be applied to by anyone meeting the skill and experience requirements. The evaluation is to measure soft and hard skills of Smarthire users, it takes the format of an interview and technical skill tests.
<img alt="" src="https://cdn-images-1.medium.com/max/922/1*LgX4tmi_OaPZfegg98NPtw.png">
Job seekers’ most valued traits were: challenging projects, professional growth and company leadership. I utilized these insights to create job values users can select in their profile page to filter through job matches.
<img alt="" src="https://cdn-images-1.medium.com/max/918/1*ey0jzHaM2nUaoEuD0Kfzig.png">
Most recruitment staff’s preferred method of recruitment are through referrals and Linkedin. Their most tracked metrics are: time taken to fill position and cost of hiring. This data helped me design the sign-up process, allowing information to be imported from Linkedin and resumes.
<blockquote>I conducted a competitor analysis on Hired.com and Karen.ai to understand the key features that makes them effective.</blockquote>
<h4>Competitive Analysis</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dg0t9CAYnjmGNPigutZSEQ.png">
Hired.com has a split between employer and job seekers right on the homepage to differentiate the two processes for better user understanding.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2T66aTGvPCSx9RvbbJYVEQ.png">
Karen.ai possess an AI that interacts with candidates to gain insight to determine an overall fit for positions. Candidates also receive updates on their job applications for simple job status tracking.
<blockquote>From here, i compiled all the research insights into two personas: the tech professional who uses Smarthire to passively receive job notifications because he is open to new opportunities and the technical expert who evaluates tech professionals to ensure they are matched with jobs of the same skill level.</blockquote>
<h4>Persona: The Tech Professional</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*II7qMB1Orov8_sw-MLcEbw.png">
Designing for Jeff helped in making key design decisions as I always had the end user in mind.
<h4>Persona: The Technical Expert</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*go4UORpWTWvZ2h7Zd3uw7Q.png">
Designing for Harrison helped in understanding what types of people would apply to become a technical evaluator.
<blockquote>I created an user flow of Jeff to pinpoint exactly how he goes through Smarthire when first accessing our website.</blockquote>
<h4>User Flow</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5zPH46UjipbazhKEKCfOyw.png">
With the following research insights in mind, i proceeded to design phase.
<ul>
<li>Way to filter through jobs using multiple options, since everyone has different job values.</li>
<li>Way to provide feedback of application process to reduce anxiety and worry.</li>
<li>Way to gain credibility by undergoing an evaluation to showcase one’s skill level.</li>
<li>Way to showcase projects on a profile page, so employers can get a quick glance of one’s work.</li>
</ul>
<h3>Design</h3>
<h4>Features Matrix</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/916/1*CMufHPG3Y2wfp2DtGgk8Nw.png">
Must Haves:
<ul>
<li>Job fit values during account creation process to determine what each candidate is looking for in a new position.</li>
<li>Book an evaluation during the account creation process or later, to ensure all candidates are assessed and matched to jobs of their skill level.</li>
<li>A webpage to manage job matches.</li>
<li>Able to import data from Linkedin and resume to complete profile creation faster.</li>
<li>Company profile page explaining the job, company culture and employees to provide candidates with information about the position they are matched to.</li>
</ul>
<blockquote>Using insights from usability tests on my mid-fidelity prototype, i iterated to create high-fidelity wireframes.</blockquote>
<h4>Features</h4>
<ol>
<li>Assuring Onboarding Process</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/920/1*5pP484NiDlXTob74FKJK0A.png">
This live progress bar provides feedback on where users are in the sign-up process. This is designed to provide an answer to the question “when will i be done this sign-up process?”
Grey icons and words indicate completion or future steps. Blue icons and words indicate the current step. Checkmarks were added to provide reassurance that the step has been completed without issues.
I designed a “job values” filter system where the user chooses what they value in a company. These values will be matched with company values to ensure the right culture fit.
2. Clear and informative job matches page
<img alt="" src="https://cdn-images-1.medium.com/max/922/1*CtzoHvQ27V3XHYi5h6qasA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vqbYv56zjKiaV7Y49I5Heg@2x.png">Before vs after of job matches page
The job matches page is separated into four categories: Matches, Favourites, In Progress and Completed. This categorization of jobs to allows the user to organize their job matches.
The “Learn More” option links to another page for more information on the job match, including: company profile, job overview and company culture.
“Save For Later” option saves the job as a favourite, sending it to the “Favourites” tab.
User can change his preferred job values by clicking on “Change Job Values”.
Features such as notifications are managed under “My Profile Settings”.
3. Active Job Card
<img alt="" src="https://cdn-images-1.medium.com/max/854/1*OxpWwLRPn0ZPk-jMx7zdRw.png"><img alt="" src="https://cdn-images-1.medium.com/max/878/1*mHgZ7s6oymJ_gKAuFSEn7g.png">Before vs after of active job cards
The status update bar moves along from left to right as the job proceeds through the application process.
The “Book Call” CTA is used to encourage users to complete the action as soon as possible.
I redesigned the “updates card” to a “updates bar” to convey information in a more visual way.
4. Inactive Job Card
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*phc29_dOOGD-IqrrLUWF1g.png"><img alt="" src="https://cdn-images-1.medium.com/max/918/1*pQf-iUCh8QCXFUgQ2BH1lA.png">Before vs after of inactive job card
Light coloured steps indicate completion and future steps to take.
If an application gets rejected, a error circle will show on the line, indicating where the rejection occurred. This allows the user to understand where their application was declined, so they can find out why on their own.
5. Comprehensive Profile Page
<img alt="" src="https://cdn-images-1.medium.com/max/1000/1*QpTITEO88e2sTU48bBqtAQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KorqgZnNzmENWbgH3tNdlg@2x.png">Before vs after of profile page
I designed this page to showcase the following profile information:
<ul>
<li>All important information beside profile picture for efficient reading</li>
<li>Showcase of past work for employers to view</li>
<li>Clear breakdown of user’s skills for employers to see.</li>
</ul>
<h3>Prototype</h3>
Check out my prototype <a href="https://invis.io/FYDMQUVHE">here</a>!
<h3>Key Learnings</h3>
We designed a MVP from an idea in just three weeks, this was a quite a feat for us. We all learned and improved so much during these past three weeks.
The following sums up what i personally learned during this product design experience:
<ul>
<li>Research and usability testing are key to creating an effective, useable and appealing product.</li>
<li>A good Product Manager is crucial in ensuring the team doesn’t experience delays.</li>
<li>Ideas need to be managed in order to prevent Feature Creep.</li>
<li>Enforcing deadlines of project tasks is a must if the design process is to proceed according to plan.</li>
</ul>
Next Steps:
&#8211; Development and incorporation of the technical expert wireframes
&#8211; Design and incorporation of the employer wireframes
&#8211; Develop analytics system for employers, technical experts and job seekers to view their personal data.
<blockquote>“Never stop learning, because life never stops teaching.”</blockquote>
Thanks for reading! If you want to talk about UX design, product design, or have an work opportunity, hit me up at xkevinhyx@gmail.com or connect via <a href="http://linkedin.com/in/kevin-xu-89448b8a">Linkedin</a>.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=df38e761812" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/streamlining-the-job-search-process-df38e761812">Streamlining the job search process</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Streamlining the job search process

Branding, UX/UI design, web design.

The Problem:

Top Stories