Career Navigator

Portfolio—Career Navigator

Home page of Career Navigator

Project Summary

During my initial 4-month contract at Mastercard, my first project involved visualizing their Career Development Framework in a way that could help employees understand the skills needed to change the trajectory of their career.

The user research was performed prior to my arrival and I was tasked with designing & building an experience that would allow employees to browse various roles, search for positions based on keywords, or find new opportunities based on particular skills.

Hand-drawn wireframes of home page and career path

Design Process

I iterated through numerous designs for both the home page and the main experience, gaining a better sense of user needs via the business owner. Three personas were identified: individual contributors, people managers, and HR Business Partners who would use the same version of the tool but for different purposes.

Home page wireframe and production page, side-by-side

"Home" Page

The home page was a simple, tiled format offering opportunities to browse positions by Job Function & Family, search by keyword, and search by skill.

The last tile offers resources such as FAQs and guides.

Hand-drawn wireframe details of career path

Career Paths

Maps, paths, and lists were explored and in the end, a combination of lists & paths was selected. Each job family was depicted as a series of positions along a path, mainly independent contributor positions, branching off to show leadership roles if the end user was interested in pursuing a people leader position.

First-level Browse page side-by-side of wireframe and production page, including Job Function description

Browsing—Navigation

The list-based navigation menu collapsed to maximize real estate for subsequent interactions. Just prior to a position being selected, an overall description of the Job Family was displayed to the user.

Second-level Browse page side-by-side of wireframe and production page, including career path

Browsing—Path

An asymetrical path was selected to highlight the individual contributor path (on the left) vs. the people manager positions (on the right). Once a position was selected, users were presented with details that would be present in a job description as well as the expected skills & proficiency levels required.