With three colleges and more than 130 programs, students need a way navigate degrees and certificates with ease. The goal of this project is to supply students with a comprehensive list of program pathways with accurate data. My role was to create the visual design for each portion of the student's journey.
The colleges were in the habit of updating the program data in at least three places. Naturally students got confused because we didn't have an authoritative database it was pulled from. Based on a student usability survey, we sketched out flexible templates for the user journey, wrote meaningful navigation item names, and implemented a menu hierarchy.
The pathways builder backend was built first by the web development team. I assisted by making wireframes. Once we had a coded well functioning barebones UI, we moved to the visual design for the builder.
We color coded the builder UI so that editors could see their campus pathways at a glance. We created an admin UI that would share some styles with front facing pages so we could build visual familiarity.
There were many project meetings with lots of stakeholders. I rapidly iterated the prototypes in Figma.
Once a visual design was approved, three developers would code the application and we would continue with more testing, feedback, and refinement. The coursework modal expand icons and graphs are color coded by the degree's Area of Study. Areas of Study are new to the colleges, so we are building their visual recognition.
Coursework is a complex portion of the code and design so we focused on deploying that first. Course details were housed in a modal with descriptions and attributes.
We are in the early stages of deploying academic program pathways to the production environment. Designing and building flexible templates that connect to a single authoritative curriculum database will be a leap forward for the colleges. Students will be less likely to receive conflicting program information. My role was to guide the front-end design, create wireframes, visual designs, and prototypes for each page of the application.