UPSIDER
Intelligently finding the best talent.
PROJECT TIMELINE
8 Weeks
MY ROLE
- Conducted research through user interviews, usability testing, contextual inquiry.
- Performed competitive market analysis.
- Introduced design thinking method to the rest of the teammates.
- Partnered with other UX/UI designers and developers to create user-friendly customer experiences.
- Conducted Usability Testing
METHOD
User Interviews
Affinity Mapping
Design Studio
Prototype Design
Usability Testing
Photoshop/Illustrator
Sketch
Invision
OVERVIEW
My team and I were asked to develop a responsive website that’s under the topic of health. After going through many topics within the health categories such as fitness, nutrition, addiction and mental health. We have decided to focus on exploring health for the human mind because we believe many people are feeling stressed now days and this is a problem area we can explore and can help a lot of people to solve their issues.
OVERVIEW
Upsider is a web app that flips this model on its head by adding intelligence and automation throughout the candidate sourcing process, leveraging AI at the core. The AI allows recruiters to identify the true total addressable market of candidates for any role in any geographic area, provide forecasts that predict the likelihood of filling the role, recommendations to adjust hiring criteria, and automation tools to manage thee mail outreach to those candidates.
THE PROBLEM
Upsider offers a free trial of the web application to all prospective clients after each pitch sales meeting. Because the web application is not intuitive enough for users to navigate through without going through a one on one training, the conversion rate from prospective to paying clients was low.
USER GOAL
Make the application more intuitive.
Create a dashboard.
Restructure the site’s information architecture to make the site more useful and usable.
BUSINESS GOAL
Enhance the intuitiveness of the web application while emphasizing the value that Upsider brings to recruiters.
Primary User:
Convert First time users into paying customers.
Secondary User:
Allow existing users to utilize the full functionality of the application.
RESEARCH
USER INTERVIEW
We conducted interviews with 6 users. 3 existing users. 3 new users. We held interviews with both groups to understand recruiters' behaviors and pain points. We also conducted usability tests with 3 "first-time users".
Positive feedbacks from the interviews:
“I like that Upsider lets you save searches to pick up where you left off.”
(User 6, User Interviews)
“Upsider finds relevant candidates...”
(User 4, User Interviews)
Existing issues found in usability testings:
Homepage does not allow users to take actions quickly
When users first signed in to the application, the homepage was mostly empty. Users were confused where to start taking the search actions.
Create a New Search page has too many jargon language
When users tried to put in the initial search criteria to start a search they were unclear what to fill out in each category because too many jargons are used in the labeling.
The Search Result page is not self explanatory
Recruiters were confused by the listing hierarchy and color-codes on this page. Also users did not like the card view option that's currently offered on this page.
SYNTHESIS
We used affinity map to synthesis the data from user interviews on existing users and usability testing on new users to identify the main persona and define problem statement.
PERSONA
JOURNEY MAP
PROBLEM STATEMENT
There are many options out there for recruiters to find candidates for jobs. Upsider is one option that utilizes AI to source the best candidates.
Upsider offers a free trial period that is not intuitive for users.
How might we help Upsider turn these trial customers into paying clients by creating a more efficient user flow?
DESIGN
DESIGN STUDIO
We conducted a few rounds of design studio focusing on developing three key areas that can improve the user flow of this application. We also met up with our stakeholder and developers to explain our thinking process to receive feedbacks before we went into creating the mid fidelity prototype.
USER FLOW
Create a search and mark top candidates in the folder.
MID-FI WIREFRAME
We transformed the whiteboard sketch into mid-fi sketches. We decide to focus on three key areas to improve the web app because from our usability testing and users interview we found out these are the areas preventing users to complete their tasks smoothly. The key areas are Homepage, Create a New Search and Filter Search Result.
Three key areas we focused on improving
(Based on research results)
HOMEPAGE
Based on our user research and usability testing, we determined these 4 actions are the most important actions for recruiters when they use this application to look for candidates. We implemented icons for these actions to help users to identify each actions easily and quickly.
CREATE NEW SEARCH
Based on user interviews and card sorting we identified above categories are the most crucial criteria for recruiters to initiate the candidate search. This is why we included these categories on the Create a New Search Page. We also designed a cleaner layout with easier language to avoid confusion of jargons.
VIEW SEARCH RESULTS
After users enter the basic information on create a new search page, the application will take them to a search result page with a list of relevant candidates. The most relevant match will be listed on the top. We implemented a list view for search result instead of card view to help users to glance the results quickly.
USABILITY TESTING
MID-FI PROTOTYPE TESTING RESULT
We tested 4 recruiters on this mid-fi prototype for our usability testing.
Successfully completed all 5 tasks.
4/4 Users
Think setting up an account is very self explanatory.
4/4 Users
Think create a search section is very easy.
4/4 Users
Here are some quotes from the users:
“It gives you an easy access to collect a lot of candidates with limited amount of time."
(User 3, Usability Testing)
“I find this useful...easier and simpler to navigate through.”
(User 1, Usability Testing)
FINAL DESIGN
In our final hi-fi wireframes besides focusing on perfecting the three areas we emphasized during the design studio, we also created a dashboard for users to have a quick glance of their working progress and more intuitive filters to be able to filter the right candidates quickly .
Homepage
When user clicks on the input field, the suggestive text (“Job Title” )
disappears and user can begin to type in the title of the role they are searching for. After the user types the first 3 letters, a drop-down menu will appear with auto-complete suggestions.
Animated prototype
Create a Search
When user clicks into any of the indicated input fields, the suggestive text disappears and a cursor appears. After the user types the first 3 letters, a dropdown menu will appear with auto-complete suggestions.
Animated prototype
Search Results
When user clicks on “ALL” all of the search results are selected and a check mark appears in the selection box. Simultaneously, the “bulk action icons” all turn dark gray, indicating click-ability. When the user clicks “NONE” any selected items become unselected and the “bulk action icons” become light gray and unclickable.
Animated prototype
DESIGN
BEFORE & AFTER COMPARISON
We combined the usability feedbacks and further research to improve the mid-fi wireframe to a final hi-fi prototype. Here are some before and after comparisons of our new design to the original application.
HOMEPAGE
BEFORE
Before when users first sign in, the homepage screen is mostly empty until they click on the " + Add Role" button. Also many users had confusion about the meaning of labeling and icons on the left hand side.
AFTER
We improved the homepage for the users that can quickly start a search and has a pop-up reminder to show users how to create an account when they first sign in to the application. Also eliminated the navigation on the left hand side from the homepage.
CREATE A SEARCH
BEFORE
Before users did not understand what "search name" means and they had frustration about not able to narrow down the search by entering years of experience.
AFTER
We improved the create a new search page to a simple clean layout. Users can start their search by entering the job roles, years of experience, location and seniority. We used card sorting to identify users preferences for what search criteria to include on this page.
SEARCH RESULTS
BEFORE
Before users did not like the card view of the search results and was confused about the red color of the cards as warning or inactive. Users also did not understand he listing hierarchy.
AFTER
In order for users be able to refine their search we created a new filter bar to help users to identify desired candidates. Each filter search criteria was determined by the result of card sorting. Layout design was inspired by fashion shopping websites.
NEXT STEP
Improving the Engage Feature: Our user research shows many existing users are not currently using the engagement feature Upsider offers because this function is not meeting users expectation. We would like to do more research and improve the functionality of this feature.
Building Similar Roles: As a search feature: Stakeholders believe "Similar Roles" is a feature that separates Upsider from their competitors. We would like to make this application more intuitive so the users can use this feature without specific training.
Improving dashboard feature: The user research shows a dashboard is essential feature for our users. We would like to build a dashboard that can maximize the efficiency of their work flow.
LEARNING
Working with an unfamiliar topic: When I first started this project I had concerns about me being not familiar with recruitment. I learned by trusting the research process I can solve users pain points.
Working with engineer: During this project I was able to work side by side with our development lead. Understanding the back end development of the product helped me to make better designs.
Working with stakeholder: While working towards achieving our users needs, I also made sure to achieve stakeholders business goals. Maintaining a transparency thorough out the communication process helped the stakeholder and us to be on the same page.