Collectiviz is a career data collection and visualization website to help ease prospective and current students' concerns about the CTD(Creative Technology and Design) program and its career prospects.
Discovery
The Problem
Not many people, especially high school students, know about degrees and careers in the design field. Also, tracking student and alumni career information is time-consuming, disorganized, and hard to present to the public.
Current Solutions
Current methods of career data collection and verification are either costly or have a bad user experience. Therefore, the goal of our solution was to create a product that solved this problem while also providing an intuitive and informative data visualization user experience.
Our Users
Student
Current and prospective students are worried about career opportunities because they are either trying to pick a major or already looking for a job. Therefore, they both need an easier way to learn about the specific jobs alumni have acquired after graduating from the CTD program.
Alumni
Alumni want to inform students about the jobs they have received, but they also don’t have a lot of time to talk with past advisors and fill out surveys. Therefore, they need a single, streamlined method of entering career information that won’t take much time.
Design and Development
The Form
Given these needs, we set out to build a quick and intuitive form using bootstrap. We created a form using questions we thought would be valuable to know based on research. Once we compiled these questions and ordered them, we presented them to our target audience, CTD alumni. Through user testing, we were able to iterate on what questions were important, and which could be left out.
Once we had the form all set, we reached out to our contacts at the ATLAS Institute to send out the form. We had initially assumed our contacts were the people who would send it out. However, instead, we learned more about the process of communicating with alumni. In this process, we also learned that this department had already been sending out a career information form. From here, we decided to pivot and mimic the existing form, building in skip logic, input validation, and database-populated menus, allowing for a streamlined process to send to the database.
The Database
From the beginning, one of our main goals of this project was to find a way to collect CTD career data in one central place without ATLS staff having to manually enter every piece of data returned from their surveys. After some research into different methods of data storage and a long talk with our mentor, we decided to use Firebase. Firebase is a Backend-as-a-Service platform for mobile and web developers. We chose to use Firebase as a means of both hosting our website and storing its data.
The first step in the database development process was to set up a database and figure out how to write data to it. Using the first version of our form, we were able to write corresponding javascript that would pull all data from the form, store it in variables, and then push it all at once to our database once a user clicked the submit button. There were, of course, some errors along the way that had to be handled. Just because data was successfully sent to Firebase, doesn't always mean it was the right data. This meant incorporating a large amount of error-handling code to make sure that whatever alumni entered was what ended up being stored in the firebase.
Once we had a form that connected to our database and sent data properly, it was time to move on to retrieving data. In this stage, writing code to pull data from the database wasn't the hardest part; it was taking the pulled data and formatting it properly which was tedious and time-consuming. All alumni data had to be styled and displayed in a visually appealing way, meaning there could be no errors in any data behind the scenes or it could show up at some point in the visualization.
The Design
First, we tried to determine what the most important career and internship data was. Through research and talking to current students we determined the most important statistics to include were salaries, job titles, company names, locations, and job types. Initially, we planned on using Chartjs to build all of our charts on the website, which gave us our initial prototype.
Next, we did our first round of user testing with a survey and two one-on-one interviews. From these interviews, we determined that users preferred the scrolling layout better and that they wanted the design to be more infographic with a narrative and more interesting stats. As we were in the process of reiterating our designs, we ran into a challenge. We were given new data from the program’s communications team that they wanted us to use for the designs. However, this data was more qualitative and also focused on the program's experience. Therefore, we had to completely change our data visualizations, which led us to create our next prototype while also taking into account feedback from our first round of design testing.
Our last round of user testing was done through interviews with students and design experts to finalize our visualizations, layout, and colors. We settled on keeping the program’s official colors in the hopes that they will use our product in the future. The main feedback we got from the test was to make the website more personal. To do this we decided to reach out to a few alumni and ask them in-depth questions on their experiences in the CTD program and in their careers after. Also, all the alumni agreed to be a source of information if any prospective or current wanted to reach out to them with questions. We put these alumni profiles on the site so users can get a more in-depth look at alumni and their experiences, as well as give them a person to reach out to if they have any questions. On the right is our final prototype and below you can see the progression of our designs.
The Final Product
Collectiviz is a web application made up of two web pages. One web page is a form, built using a bootstrap framework, that collects alumni data in a comprehensive yet quick way. It is sent out by CU’s communications team to gather the alumni career information. It aims to make the process of filling out a form less cumbersome, and automatically stores entered data in a real-time firebase database. The form is streamlined by changing according to user inputs and updating with new inputs. The second web page is a visualization that can be accessed by anyone curious about the CTD career prospect. It works by pulling data from Firebase and formatting it into graphics using two chart-based APIs. The visualization condenses all the information into a graphic that is intuitive and informative for current and prospective CTD students. It shows career information such as employment percentages, job titles, companies, and locations to ease students' concerns about job prospects. It also gives insight into what alumni thought of the CTD program in the form of how likely they are to recommend it, what their favorite part of the program was, and other opinions. Lastly, it gives an in-depth look at a few alumni and their experiences with the program, as well as giving students a person to reach out to with any questions.
