What does my path look like after graduating from UC Berkeley?
March-April 2018 (1 month)
UX Designer/Researcher, Front-End Developer, Data Visualization Engineer
Guerrilla research, wireframing, visual design, heuristic evaluation, data analysis, data visualization, web design and development
Choosing an undergraduate major at UC Berkeley can be a hefty decision and a typical question students ask is: where do students end up after graduating from their respective majors? Although the UC Berkeley Career Center offers employment statistics to help them make better decisions, this data is buried in a series of PDF files on the Career Center website.
The information that is provided in the PDFs is not very visually compelling and displays the data in a way that makes it difficult to make sense of things, compare between different majors and enable students to find out what life might look like for people with their majors. So how can we provide a more insightful experience for students who are looking to choose a major?
We interviewed five undergraduate students from UC Berkeley in order to distill what mattered most to undergraduates when it came to choosing their major as well as showing them the Career Center PDFs to see how they would use that data to gain insight about life after graduation.
The common themes that emerged based on the interviews allowed us to identify key user needs as well as and establish our product goals.
Exploratory Data Analysis
Through our user research, most students felt scared of being pigeonholed and that certain career paths only correlate with certain majors. In order to create an interactive data visualization that can help undergraduates explore paths available to them after graduation, we needed to process and explore trends that can tell a compelling story to set the context for our tool, particularly debunking the notion that there is only one set path in life and allowing students to sort by flexibility.
We transformed all the PDFs into CSV tables so that we could process the data in Tableau and generate important metrics such as flexibility of majors or the diversity of jobs available for different majors.
Based on our exploratory data analysis and user research, we began to sketch out different ideas for how to visualize the data in a way that tells a story based and craft out the components that we wanted to cover in our data visualization tool.
Although we came up with a lot of different ideas for how we wanted the tool to help undergraduates - ranging from skill trees to financial planning - we realized that we needed to scope down and focus on the product goals that we were trying to address so we eventually converged and focused on contextualization (which gives the big picture of trends and tells the story of how there is no one set path in life) and exploration (which lets users compare between different majors and their pathways).
Design & Development
I primarily worked on designing and coding the homepage, which would contain three interactive visualizations created using D3.js, and the about page. Building off of an existing bootstrap template, I also worked on the web design and development for the entire website so that there would be a shared templating system and visual language across the different webpages.
Introducing the problem
I started designing the homepage that introduces the problem that we are trying to address; that UC Berkeley undergraduates currently find themselves asking themselves what types of careers are available to them after majoring in a certain field.
Showing an overview of different pathways
I tried to debunk the myth that only certain majors can lead to certain jobs using a modified chord diagram that shows how one major field can lead to multiple career fields, particular in ways that you might not expect.
Certain jobs take diverse majors
During our EDA, we narrowed down on 5 careers that take in the most diverse majors. To visualize this data, I used a modified cluster diagram which would show career bubbles with major bubbles within it - the size represents the number of people that can be seen on hover whilst zooming in would reveal more information.
Majors that lead to diverse careers
I then tried to show how diversity can work the other way around in that there are certain majors that can have many options following graduation and that there is not always one ‘set path’ as undergraduates often believe. After conducting EDA using Tableau, we narrowed down to the top 5 majors that had the most diverse career outcomes and I visualized this information using a collapsible tree diagram.
The contextualization on the homepage would then lead to the exploration tool. The goal was to provide a way to envision the pathway between a major choice and future outcome, which is why a Sankey was the ideal choice. We also used a "heatmap" navigation to allow for sorting and filtering of majors according to metrics that we found were important to users from research such as the major's average GPA, flexibility of career outcomes post-graduation and salary.
The general feedback from our users was that they found the tool really helpful and many gained interesting insights such as career paths that they did not expect. Users also enjoyed exploring the website as users really wanted to click around and dive deeper into what each visualization was showing.
This project was a non-conventional design project because we had to create an interactive data visualization, which meant I had to design within data constraints but follow conventional design and usability principles to make the data feel human and understandable to non-technical users. It was also my first time using D3.js and doing web design and development at the same time, which was challenging given the short timeframe. Some key takeaways were
Scope down the problem and focus on doing one thing really well: We initially had a lot of different ideas for how we wanted to help students find the right major, from showing skills that each major brings to financial planning based on salaries, but after our user research - we realized that we should just target this fear of being pigeonholed by your major and try to show users insights from the Career Center data that they wouldn't expect. As a result, we were able to successfully show UC Berkeley students pathways that they weren't initially aware of.
Set the story for the users: After our user research, we didn't know how to process the data in a way that could address user needs so we did a lot of exploratory data analysis on whether there might be diverse career outcomes or careers that take in diverse majors. By doing so, we were able to use the data to tell a compelling story about how there is no one set path in life and contextualize the data, giving users insight before letting them further explore on their own.
Split up tasks according to least dependencies: We only had two weeks to design and develop the website, which is why we ended up splitting up tasks according to ones that had the least dependencies. I worked on the homepage and the template whilst my teammates worked on the exploration tool, which allowed us to finish with a functioning end product.