top of page

Northeastern University


As a User Experience Design Lead, I led a team of designers for the client Northeastern University for the student portal and admission UX needs.

Note: Some of the content is intentionally redacted.


As a lead UX designer managing a team of 3 designers, my role was crucial in ensuring a cohesive and successful design process for the student and admission portal at Northeastern University. I set strategies and processes for the team and the project that fostered collaboration by open and effective communication and delegation of tasks to each team member based on their skills.

The problem

Northeastern University was looking for updating their student portal where prospective and current students can apply for admissions and/or check for progress and manage changes to their applications. 


How might we facilitate and encourage students to apply and enroll?

How might we improve the user experience of the admin staff so they can efficiently process application?

The Workshop Approach

Screenshot 2023-06-10 at 1.56.37 PM.png

Student Journey

Validate and understand the current and future experience, focus on users, their needs, context, tasks, behavior and motivations, journey maps. After personas validation interviews we began our journey mapping

Screenshot 2023-06-10 at 2.00.50 PM.png

Student Goal: is to attend a campus visit tour

Student Goal: complete and submit application

Screenshot 2023-06-10 at 2.00.59 PM.png
Screenshot 2023-06-10 at 2.01.09 PM.png

Student Goal: is accepted and decide where to enroll

Student Goal: prepare to attend Northeastern University

Screenshot 2023-06-10 at 2.01.15 PM.png

Admin Journey

Admin journey that captures overall journey and other staff processes

Screenshot 2023-06-10 at 2.04.03 PM.png

SErvice Blueprint

In the case of the admission process, the blueprint would outline the steps, interactions, and support systems required for a student to successfully complete the admission process

Screenshot 2023-06-10 at 2.03.47 PM.png

User Story Map

The user journeys, together with access to a ‘test’ account allowed us to begin mapping the current state requirements for the application status check portal.

Screenshot 2023-06-10 at 2.02.13 PM.png

Future Feature Requirement

We created a ‘features and requirements’ spreadsheet. By adding context, this helped us view the various integration points and map NU’s  ‘Future State Requirements’ to each stage of the user journey

Screenshot 2023-06-10 at 2.39.40 PM.png

Technology Workshop

UX design team worked closely with the technology team. Collaborated to map the services and requirements identified in the previous workshops to a high-level architecture and specific technologies.

UX design team worked closely with the technology team. Collaborated to map the services and requirements identified in the previous workshops to a high-level architecture and specific technologies.

Product Roadmapping

We did a roadmapping exercise and helped create a high-level feature roadmap

Design deliverable

The next steps were to create a new revised sitemap for both student and application process. Followed by wireframes, high fidelity mocks, copy doc, and user testing followed by annotated design-engineering handoff document and finally visual QA report. Lets take a look at the sitemap process, wires, mocks and example of the copy doc.

What is the IA?

Card Sorting exercise helped in creating an effective information architecture for the student and admin portal at Northeastern University. Example of admin portal card sort exercise. The deliverable here was a revised sitemap

Screenshot 2023-06-10 at 3.13.41 PM.png
Screenshot 2023-06-10 at 3.13.56 PM.png


During our initial research phase we realized their prospect student persona primary device was mobile web. Here is the example of responsive web designs.

Screenshot 2023-06-10 at 3.28.38 PM.png
Screenshot 2023-06-10 at 3.28.08 PM.png

Why Mobile-First Wireframes?

Mobile-first design emphasizes simplicity, minimalism, and usability. Designing for smaller screens forces you to prioritize content, eliminate clutter, and focus on core functionality. This results in a clean and intuitive user interface that enhances the overall user experience.

Even though its a mobile web not an app, we wanted to give users the bottom navigation for easy access based on thumb zone research (2020)


Bottom Nav Process 

Card sort –> Sitemap –> Validation –> Research & Trends –> Wires –> Client Demo

Screenshot 2023-06-10 at 3.44.23 PM.png

High Fidelity Mocks

Once our wires were approved we moved into visual designs, we prepared variations of visual concepts for the clients to approve once that was done we designed the high-fidelity mocks based on the approved wireframes. Here is an example of one of the screens:

Screenshot 2023-06-10 at 3.30.09 PM.png
Screenshot 2023-06-10 at 3.30.34 PM.png

Example of the Copy Doc

During our initial research we wanted the voice and tone of the application to be actionable but empathetic.

Screenshot 2023-06-10 at 4.07.39 PM.png
bottom of page