All work
EnterpriseEducationDesign system

National University student portals and the Pinnacle design system

I'm a Senior Product Designer on National University's Digital Campus team. I work on the student portals, including navigation research and Pinnacle, the design system the portal teams share.

RoleSenior Product Designer
TeamDigital Campus · Student Experience
Year2024-present
ToolsFigma, Userlytics
MyNU student home with the current class, grades, assignments, academic support and quick access to Library, Services, Career and Wellness
22

academic, financial and campus services in one portal

8

task-based navigation areas

1

shared design system (Pinnacle) for the portal teams

TL;DR

Challenge
Students use several separate portals, each with its own navigation and look, and they get lost moving between them.
What I did
Mapped student tasks, reorganized the portal navigation and tested it in Userlytics, explored a weekly class schedule, and designed and documented the Pinnacle design system.
Outcome
Navigation grouped by student tasks and tested in Userlytics, and a design system shared by the portal teams.

Several portals

Students at NU move between several products. Registering for a course, checking a degree audit, requesting a transcript or handling financial aid can take a student through the Anthology Student Portal, MyNU, the Enrollment Portal and other services. Each one had its own patterns. My job was to make those paths clearer and more consistent, and to give the teams one design system to build new features from.

The challenge

  • NU has several separate portals, each with its own navigation, and students got lost moving from one to another.
  • Components needed clear states and specs so engineers could build them as designed.

My role

I worked with product managers, engineers and university stakeholders. I made journey maps, user flows, information architecture, wireframes and high-fidelity screens in Figma, clickable prototypes for stakeholder reviews, Userlytics usability tests, design system components and docs, and handoff guides for developers. I also did design QA on what was built.

1. Portal navigation and student self-service

The Anthology Student Portal covers course registration, class schedules, grades and records, transcripts, degree audits, financial aid, and documents. Students use some of these often and others rarely, and some pages hold a lot of information. All of it is reached from the left navigation.

Decision

Grouping by student task

I mapped the workflows and screens and grouped services into areas based on the tasks students come to do. Then I ran a Userlytics study on the left navigation, including how people found Account Summary. The results fed into our decisions on navigation, deep links, branding and rollout.

2. MyNU home

The MyNU home puts the student's current class at the top, with faculty contact, current grade, completed and pending assignments, and a link to the course. Support is on the right: Academic Support search, Library, Services, Career and Wellness, and the NU Navigator community.

Career survey

NU asks graduates about their careers for Career Services, accreditation and reporting. I designed the survey to open inside MyNU with one question about how confident the student feels about finding a job in their field. Students who continue get the full form. Information already on file is pre-filled, sections collapse if they pick "I am not currently employed," and there's a "Don't show this survey again" option.

Survey pop-up asking how confident the student feels about finding a job after graduationFull career survey with employment status, job details, income and a Don't show this survey again option
The one-question pop-up and the full survey.

3. My Class Schedule

The calendar grid made a single day hard to read, especially on small screens. I explored a redesign that kept NU's sidebar and branded shell and turned the grid into a weekly agenda, with day columns of class cards, clearer course names and times, and day tabs on tablet and mobile.

Design exploration

Weekly agenda

I wanted students to see the week's classes quickly and be able to use the schedule on a phone.

This was a design exploration and is shown here as concept work. It wasn't released to all students.

4. Pinnacle Design System

Several portal projects were running in parallel and needed the same patterns. I designed and documented Pinnacle in Figma, including components with properties and variants, spacing guidance, interaction patterns, CSS/UI standards and design specs.

Decision

Handoff guide

I wrote a designer-to-engineer handoff guide and linked it from the design system, so specs and usage notes were in one place. After engineers built the screens, I compared them with the Figma designs and flagged gaps to fix.

I made the design assets, patterns, specs and documentation. Engineers built the code components.

Design system color tokens: brand blues and aquas, neutrals, surfaces and status colors with hex values
Color tokens: brand, neutrals, surfaces and status colors.
Sign-in components in default, filled and error statesSearch filters modal with personal, school, program and location filters
Sign-in states, including errors, and the search filters modal.

5. Other Digital Campus work

  • Enrollment Portal. Designed and refined enrollment flows so multi-step tasks were less ambiguous and the next step was clearer.
  • MyNU and connected services. Worked on wayfinding, branded transitions and link behavior between separate systems.
  • The Commons. Concept work on community features, including gamification ideas.
  • Design Library (alpha). Information architecture, search and asset discovery for a central library of design assets and documentation.
Next case studyPurePicks

Hiring a senior product designer?

I work best with teams building something new or fixing what isn't working: early-stage startups, e-commerce that doesn't convert, websites that need a redesign and products ready to add AI.

Let's talk