Northeastern University
Reimagining CAMD: A UX and Visual Refresh
Private University
At a Glance
Through four design sprints, we turned a fragmented CAMD website into a storytelling-centered, cohesive experience, using a classic research → design → iterate approach to improve clarity, navigation, and user engagement.
4
Design Sprints
~35
Pages Developed
13
Reusable Components
Who is Northeastern University?
Northeastern University College of Art, Media, and Design(CAMD) an interdisciplinary college focused on leveraging data and emerging technologies to advance human potential through the arts and design.
The college needed a comprehensive visual and UX redesign of its mobile-responsive website to improve information access, reflect its prestige, and clearly communicate the breadth of its offerings. The existing site felt outdated, with a fragmented user experience that failed to support the university’s brand and goals.
My Role
Interaction Design Intern; Addi Hou, Senior Interaction Designer
Platform
Mobile responsive website
UX Methods
Affinity Mapping, Competitive Audit, Wireframing, Prototyping, Writing Annotations, Design Systems
Tools
Figma, Confluence/Jira, Microsoft Suite, Airtable
Duration
Sept 2023 - Mar 2024
THE CHALLENGE
Rebuilding Trust, Clarity, and Storytelling
The Problem
Prospective students and visitors encountered a fragmented, outdated website that made it difficult to discover programs, understand CAMD’s interdisciplinary offerings, and navigate key information. Users struggled to form a clear, confident understanding of CAMD and its value.
My goal as an Interaction Design Intern was to create designs that improved storytelling and build a cohesive navigational structure, lead discussions with developers, and troubleshoot usability issues.
What we started with:
The above is a site audit of the original website performed a site audit as part of our research phase. The team placed stickies to identify usability issues and visual inconsistencies. Many of the pages lacked engaging graphics and had misalignments of text across their site. Furthermore, the transitioning between pages was clunky and made the user feel as though they were leaving CAMD since it opened in a new tab.
THE SOLUTION
A Cohesive, Story-Driven Website That’s Easy to Navigate
Cohesive Home Page and Landing Pages
User Need: Users need to identify CAMD's unique value and offerings to decide to enroll in their programs.
Pain Points: Users struggled to quickly understand what CAMD represented, leading to missed opportunities for further exploration.
Solution: We re-imagined CAMD's homepage and landing pages to highlight key value upfront, adding interactive content and varied layouts to tell the CAMD story.
Structured, Easy-to Follow Navigation
User Need: Users needed to easily explore programs without confusion.
Pain Points: Information was scattered across multiple mini-sites that looked different which disoriented users from general browsing.
Solution: We consolidated content from multiple mini-sites into a single, cohesive structure with consistent navigation and design, making it easier for users to explore and understand CAMD’s full offerings.
Scalable Components, Consistent Experiences
User Need: Users needed a cohesive and visually consistent interface that helps them to recognize they’re within the same CAMD experience, no matter program they’re exploring.
Pain Points: Components like accordions and text fields were structured differently, leading to friction and inconsistency in the user experience.
Solution: We created re-usable components and templates that applied visual consistency across one main CAMD interface.
THE PROCESS
The End-to-end Design Process
My team followed a structured approach broken up into these three areas below from understanding the users and competitors through research, defining and ideating, then iterating and deploying the pages.
Research & Discovery
-
Analyzed behavioral data from online research of Gen Z students
-
Researched competing art and design schools to identify best practices of information architecture and storytelling
Researched competing art and design schools to identify best practices of information architecture and \and \and \and \ information architecture and \and
Define & Ideate
-
Created personas and journey maps to show pain points
-
Identified different zones/sections for low-fidelity wires and what their intentions served
-
Redesigned sitemap to simplify user pathways and improve discoverability.
-
Introduced dynamic imagery placement and interactions that created storytelling
Deploy & Iterate
-
Refined design, ensuring interface consistency
-
Designed reusable components for optimal development
-
Optimized visibility of breadth and depth of CAMD's offerings through integrated navigation
-
Annotated components for developers and troubleshot usability issue
USER RESEARCH
Understanding the Analyst
Primary Research Goals
-
What information do prospective students look for when evaluating a program?
-
How do Gen Z users engage with digital content when exploring educational programs?
-
What types of storytelling, visuals, or interactive content feel engaging and relatable to them?
Joining the project during the user research phase, I gathered user artifacts and observed that prospective students wanted a clear understanding of programs across multiple dimensions, including faculty, career opportunities, and curriculum offerings.
Additionally, as the primary users are Gen Z, their digital habits favor engaging, relatable storytelling that connects on a personal level. These insights informed our wireframe and content design, and laid the foundation for creating user personas and journey maps that captured key needs, pain points, and opportunities across the prospective student experience.
Persona and Journey Map for User 1: Current Student
Persona and Journey Map for User 2: Prospective Grad Student
UNDERSTANDING THE INDUSTRY
Competitive Audit Revealed the Power of Storytelling and Clear Wayfinding
I conducted competitive audits of peer institutions to understand how similar colleges approached engagement and navigation. These sites consistently used more human-centered visuals and storytelling to create a sense of connection, making content feel more approachable and engaging. Their information architecture was also clearer and more cohesive, enabling users to find information quickly and with less cognitive effort.
DESIGN
Designing with Intention
Designing with the user in mind meant giving each page a clear purpose. To achieve this, we created zone diagrams to map page regions and define their roles. This exercise prepared us to design a meaningful and engaging website experience.
The zone diagrams became these wireframes below.
TECHNICAL CONSTRAINTS
Technical Constraints & Tradeoffs
Throughout the project, we partnered closely with developers to ensure designs were technically feasible within timeline constraints. To meet our launch deadline, we made intentional tradeoffs—simplifying certain pages and deprioritizing lower-impact functionality in favor of core user needs.
For example, the Events page was initially designed with a dynamic calendar that updated displayed content in real time. Due to competing feature priorities and development capacity, this interaction was scoped out of the initial release and scheduled for a later iteration. While this adjustment contributed to a slight release shift, it allowed the team to fully deliver all critical features and maintain overall product quality. The dynamic calendar was later completed as planned.
BRIDGING DESIGN AND DEVELOPMENT
Writing Detailed Annotations for Developers
A key part of my role was writing detailed annotations in Figma and Confluence to guide developers with precision and clarity. These annotations were documented in Confluence alongside Jira tickets. I led conversations to pass off annotations and served as the main contact to troubleshoot developer questions
Below are screenshots of annotations I wrote in Figma. Here’s a PDF example of an annotation.
Below are samples of annotations co-wrote in Confluence. These are the PDFs for example 1 and example 2 from below.
Retrospective
This was an incredibly rewarding opportunity as it was one of my early UX experiences designing for a large enterprise. Here are a few things I learned and will apply to next projects:
-
Communicate with clients earlier: It's easy as designers to think of a variety of designs. However, it helps to communicate with clients earlier to narrow and get ideas for designs so there aren't delays.
-
Ask questions ahead and together: This project involved close collaboration across a large internal 30+ product team. Having group chats allowed me to fail fast and get answers quickly
Special thanks to my seniors who guided me to success! Addi Hou, Catherine Gellatly, and Chloe Lombardi!
