Pathways pages at North Seattle College Pathways pages at North Seattle College

Pathways

The Goal

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.

User journey meaningful navigation names and navigation hierarchy User journey meaningful navigation names and navigation hierarchy

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.

Wireframe builder pages Wireframe builder pages

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.

Pathways builder visual Pathways builder visual

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.

Figma upclose layers Figma upclose layers

There were many project meetings with lots of stakeholders. I rapidly iterated the prototypes in Figma.

Coursework closeup AOS color coded Coursework closeup AOS color coded

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.

Modal with attributes Modal with attributes

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.

Areas of Study flow to degree page Areas of Study flow to degree page

The Outcome

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.