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

Pathways

Goals

Create a holistic and intuitive system that offers a device agnostic approach for students to navigate more than 130 programs, degrees and certificates. Increase ease of use and effectiveness of the pathways builder system, resulting in accurate data, more frequently updated course curriculum, and increased consistency.

Role: Design lead, wireframing, user interface, user experience, prototyping

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 coded 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

Outcomes

Phase one (North and South) has been deployed to the production environment. Early feedback has been stellar. We just received official kudos from college leadership: As a League for Innovation college, we have to provide a “Project Highlight” as a district and Program Pathways was chosen.