OnBoard - UI/UX Case Study

Project Background

OnBoard is board management software that reduces complexity so boards and leadership teams can work smarter, move faster, and achieve more.

Define The Problem 

Board administrators are currently working to diversify their boards to better represent the community they serve, but they find that they're only recruiting within their circles which limits their candidate diversity. 

Design Challenge

Developing a diverse, efficient Board connection

The high-level goal:

The new connection between the Board administrator and Candidate, to achieve diversity and efficiency in the candidate recruitment process to break the limitation of a social circle and hire the matching person for Board.

My Role

I led the design of the pickup experience and collaborate with two other designers on the Hi-Fi prototype, Information architecture. In addition, I play as a facilitator to collaborate with the design mentor to finish the mockup detail for the final deliverable.

Due to the time limitation of the project, our team stop working on the project after we finish the first round Hi-Fi prototype, we deliver design documentation including user testing data, research process, etc

The new feature of connections expect launched globally on the 2nd session, 2023

Main Brochure

PICKING UP THE PIECES

At the beginning of the project, we were confused about the design goals proposed by the Onboard design leader, and we had no prior knowledge of Onboard as software. So our goal during the initial meeting with the onboard designer leader was to understand the problem space and how the software works because it cannot be provided for the individual user.

EARLY INSIGHTS FROM THE  FIELD

We invited seven users with extensive board software experience to participate in our interviews, which focused on their experiences joining boards

1. How they recruit board members (including their selection criteria and membership composition)

2. Gain insight into the relationship between the board members and directors/admin ​​​​​​​

Takeaways: We used the Affinity diagram to categorize the interviews and we found that boards seek new members when they realize they have a need/role to fill, boards focus a lot on diversity in the team, individual passions, and interests in the recruitment process, and they don't come back to you with great expertise.

THE DISCOVERY

Journey map

The journey we developed took us through five broad stages in the process of recruiting. It mainly includes helping the board of directors to develop evaluation criteria for new recruits. This process will show the current board composition, recruitment channels, recruitment tools, and recruitment process, as well as detailed recruitment objectives and criteria

SKETCHING & IDEATION

Propose: This step would help develop the system's overall journey and merge features from our individual sketches.Content: These wireframes were divided into three parts of the imagined journey: creating a project, searching and filtering, and connecting with candidates. Takeaways: These mockups were iteratively improved upon by the team’s own critiques until creating a low-fidelity interactive prototype for users to evaluate in usability testing.

Creating a Project

One recurring idea throughout the sketches was organizing a search into a project. This would allow board administrators to keep track of all recruiting projects in which they can save filters and candidates specific to a position.

Searching & Filtering

Much of our research focused on the information boards look for in candidates, therefore it was very important to design how a candidate’s profile is viewed well. Skills and experience were two criteria we found boards look at. Additionally, there are quick actions on these profiles for administrators’ convenience.

Connecting with Candidates

One main feature of the system is the ability to save candidates within a project. This view allows the administrator to see all their saved profiles and leave notes about their choices.

Messaging

The last step the team ideated on was connecting with candidates before finally adding them to the board. Our sketches have many ideas for this step of the process, but based on some interview insights, it is kept simple with a messaging feature as boards usually keep communication simple and casual. 

Scenario Testing Evaluations

Goal:  To evaluate whether the newly designed Navigation meets the expectations of actual use. Find out what you want to preserve for filtering options. Test design concepts for new features. What is the next step for design improvement. Look for features that users want to add.

Approach: We reached out to 5 OnBoard employees to conduct virtual user testing with the Figma mock-ups. Using System Usability Scale (SUS): Providing a “quick and dirty”, reliable tool for measuring usability.

Task 1: Create and set up a new recruiting project 
Task 2: Search through the candidate list and pick someone to set up an interview with.
Task 3: Add your notes about Drew Tag to the project Observation + Interview + Survey

Takeaways: It can be difficult for new users to use for the first time, which is reflected in the details of some of the sub-features, so there should be tooltips to help familiarize users with these features and systems quickly.

FINAL DESIGN

Revised Journey Map for Recruitment ProcessFor final design, we created wireframes to help Board Administrators find qualified people to fill board position openings through a system we called, “OnBoard Connect”. The concept revolves around the new journey map we created below.

OVERVIEW OF THE PROJECT

When first clicking on OnBoard Connect, users will be taken to a page that depicts an overview of Ongoing projects. Users can view ongoing projects and see the current state of the recruiting process they are in, whether or not a public job posting has been made, how many candidates they have in review, and the date the project was started. They can also click the three dots to archive, edit, or share the progress. By simply clicking on one of the projects, they can access the information within each.

Setting Up: Filter

Upon clicking the “New Recruiting Project,'' button, the user will be taken to a page where they can set up filters by adding specific information about the potential candidate they are looking to hire. 

The user can toggle between filling in “Position Information” and creating a “Public Posting” for the position on the project. When beginning a search for potential new candidates, it may be important for the Board Administrator to make a job posting, which is what the purpose of toggling to “Public Posting” is for.

Setting up: Create a Public Job Posting

There is also an option to “Auto-Fill from Upload” in which the job posting information can be populated from a pre-made document such as a PDF. Originally, the Public Posting appeared in a pop-up once users clicked “Begin Search,” but was later changed from the finding from usability testing that this often led to people making a post without putting much thought into it.

Once users click the orange “Post” button, they will see this pop-up. This serves as a warning that the board position will be posted and visible to potential board members using OnBoard Connect. This also states that users will be able to share this position application with outside people through a link.

Searching and Organizing: Populate and Filter Recommendations

After the user makes a posting, they will be taken to a list of potential candidates that can be a good fit for the posted position. The candidate recommendations can be filtered by language proficiency, nationality, industry background, age range, and location. The user can also create saved filters so they do not need to select the same ones with every search. The user can also save profiles if they might be interested in that candidate and these saved profiles will be displayed in a column on the right-hand side. The “edit project” button will let the users make changes to the project they created on the previous page.

This box will pop up when the user clicks on the “Invite Collaborators,” button where they can share the project with other people involved in recruiting on the board. The user can select between editing and viewing rights for each of the invited collaborators. 

Searching and Organizing: Profile Expanded

After viewing and starring potential candidates, users can click on “Saved Profiles” (seen on the previous wireframe) to access this screen. Here, they can still see each of the compact cards to the left, but when clicking on one they can see more information about their profile, as well as an opportunity to write notes through the “Collaborator Notes” section at the bottom right.

Connecting and Sharing: Save and Communicate with the Candidate

The user will be able to communicate directly with potential candidates through the messaging feature to get to know them more. The chat window will also display a quick overview of the candidate and collaborator notes to keep in mind while messaging the candidate. These two features will only be visible to the user and not the candidate. 

The collaborator notes can be used for keeping notes from interviews that are important to be kept in mind for the collaborators before hiring someone. Each comment will be shown with the name of the collaborator who added that note, and the date and the time stamps. After the main Administrator has initiated the voting process, the button will be changed to “Vote” and allow collaborators to vote for the candidate. It will also contain updates about which user initiated voting, who has voted, and, the time when voting ends.

The screen on the left depicts what it looks like to “Initiate Vote.” The user can select specific Collaborators to be included in the vote and can use a calendar feature to set up the “Voting End Date. Once they have finished this they can click “Send Out” and the vote will be initiated. Once the voting end date passes, all collaborators can see the voting results as displayed on the right. There is an opportunity to “Re Vote” as well which may come in handy when assessing multiple candidates or going through more than one round of interviews.