Career Explorer

Overview

We created a tool for prospective students to explore the connection between degree programs and careers. Much of our user base is returning to school after many years outside academia because they want to improve their career or finish a degree they had to drop. Thus, many are highly motivated to choose a program with a viable ROI, and that they will utilize in their day-to-day life.

A year after the project launch on the website, those who visited the Career Explorer page were six times more likely to fill out an RFI (request for information) form for a program than those who did not. We also collected positive feedback from the Student Support Staff, who said they felt more able to connect with potential students, especially those who need guidance choosing a program.

‍

Planning

The dev team discussed the capabilities of the new API we used to gather BLS data. The backend dev team built a barebones site using Vue to understand the data coming out of the API, and what we could do with it. 

My responsibilities were to: 

1. Determine our user's specific characteristics and goals, and compile what I found into a document for the rest of the team. 
2. Design a lo-fi version of the Career Explorer in Adobe XD to plan the layout.
3. Sort each data category (Job Titles, Salary Breakdown, Typical Degree Level, etc) into most and least important based on student support staff feedback, marketing staff feedback, and Google Analytics data.

‍

Design

After deciding on a layout, I got feedback from the main stakeholders for the project - my supervisor and the student support staff. The next step was leveraging the component library to design a look and feel that fit seamlessly with the rest of the website. 

My responsibilities were:

1. Creating new components for each section and for each type of data visualization.
2. Looking through existing SCSS classes in our codebase to determine which to re-use for the Career Explorer
3. Consulting planning and research documents to determine which data points should have the most weight in the visual hierarchy. 
4. Iterating multiple versions of color, sizes, and specific pixel layouts. 

‍

Development

With the high-fidelity mock-up complete and the backend API connected, it was time to show the project to high-level stakeholders to officially announce our project and get a timeline for deployment to production.

There were a few challenges because it was a Vue component that ran in Drupal (the CMS that the University uses). As such, we had to determine which elements would be styled through in Vue versus which would be part of the University's Drupal theme. 

Some of the tools utilized were: 

1. SCSS 
2. Bootstrap layout systems
3. Chart.js
4. Vue
5. Drupal

‍

‍