JobFit is the first anonymous job-referral network for diversity and fit

Rethinking User Journey

Since the beginning, JobFit had a number of designers including myself work on various features. I had since been helping them as a design advisor to establish a design language. As they found product market fit, it was time to review the user journey and look into all the features that has been built out over the year, and rethink the user flow altogether, at the same time designing reusable design components to make sure consistent styling is used across the platform.

Reorganizing Menu Bar for Better User Journey

One of the first steps before starting the redesign was to look into the organization of the menu items. I reorganized the tabs to represent the user flow, and rearranged the contents from one tab to another to simplify the experience. and each tab would only focus on one goal to better guide the users.


Following the sign up page redesign, I added a form to capture the important user information that was hidden under the settings tab in the previous design.

I then added an onboarding guide which was previously a modal that showed the overall product summary and value prop. Since the new sign up page and the website already go over the high level product information, it was more important to provide the onboarding guide in the context of user interface, by giving a quick walkthrough of the product.


Dashboard needs to display the most valuable information in an easy to parse manner. I moved the layout to a horizontal grid to maximize the use of screen real estate, and added a section with KPIs to the top of the page, and encourage users to take more actions. I made the call to actions more clear, by simplifying the content on the screen to give more focus on the primary buttons. The new design focuses on the clarity of the actions that we want to engage users to take, and better guide them through the user journey. The flattened UI also helps create balance, without bringing too much attention on a graph or other particular section of the page.

Table View (Job referrer UI)

By removing items that don't add values to the users and providing a better filtering options, I was able to simplify the tables.

Profile View (Job referrer UI)

Previously, the profile will slide in from the right, but by giving it's own page for the profile, it has more flexibility to add different action items and navigate to other pages seamlessly other than navigating from a side panel to new pages.

Messenger (Job referrer UI)

Each conversation will always be around a job seeker, the messages list is categorized by first the job seeker names, then the types of messages around the job seeker (ie.private or group conversations). I also added a dismissible side panel with the view of the candidate profile so that referrers (sponsors) can screen the profile and make decisions on referrals right within the conversation. This was designed to effectively urge the referrers to act on the referrals before the candidate profiles expire.

Job Campaign Creator Wizard (Job seeker UI)

Job seeker must answer up to 26 questions tailored to each company they are campaining for. The wizard steps were previously a list of long strings of questions and input fields displayed vertically, but in the new design I wanted to create a way for job seekers to be able to see all the steps, allowing them to jump from one step to the other. The new design provides users the visibility of all the categories prenseted in the wizard. It also solves problems where users get stuck in one answer and is either distracted or discouraged advance.

The Complete Flow

By arranging and stitching the previously designed features, I was able to visualize the flow and fill in the missing gaps. In the final steps I was able make sure all the design elements are consistent throughout, and establish a reusable design language and rules that can be used in the future features as well.