Degree of Excellence for Northeastern’s CAMD Site
A full-scale redesign of the website for Northeastern University, a prominent institution in the United States, particularly their College of Arts, Media and Design, (CAMD) which demanded a substantial visual and UX overhaul.
SUMMARYLead UX Designer
• User Research
• Wireframing
• Prototyping
• Annotations
MY ROLE
TASK AT HANDNortheastern University’s College of Arts, Media, and Design (CAMD) enlisted us for a comprehensive website redesign, prioritizing substantial UX enhancements and a full visual identity transformation. Our goal was to design a dynamic, user-friendly site with a distinct identity from its parent site, highlighting the college’s strengths and unique offerings while ensuring effortless navigation to valuable content for undergraduate and graduate students, as well as faculty. By closely collaborating with stakeholders, we thoroughly understood their needs and objectives, ensuring our design exceeded expectations and significantly enhanced the overall user experience.
What We Started With
Snapshot of previous design
Core Challenges + Solution Overview
Stakeholder interviews, workshops, and a thorough assessment of their existing site revealed key issues that guided our redesign strategy.
Below is a quick snapshot of the key solutions implemented in this project. Each solution is detailed more extensively in the subsequent sections of the case study, where you’ll find in-depth explanations, process insights, and visual representations. This overview offers a glimpse into the strategies and design decisions that transformed the final various elements of the new CAMD site.
🚨
Essential content and tools buried within an unstructured navigation.
✅
To address CAMD’s buried content, we restructured the site map and introduced a mega global navigation menu with organized sub-tiers, quick links, and a featured recirculation link.
🚨
CAMD’s value props and storytelling opportunities were not clearly stated.
✅
We restructured the homepage and landing page templates to create a vibrant, user-centric experience that highlights CAMD’s unique strengths. Dynamic content modules have intention, showcasing the Co-Op program, research areas, faculty, and student projects, ensuring a personalized and engaging first impression centered around CAMD’s differentiators.
🚨
Finding information on faculty, alumni, and other students was difficult.
✅
CAMD directories often yielded irrelevant results. By closely collaborating with the client, we improved the backend structure and developed an intuitive side rail filter, enabling more dynamic and useful search results with tags and imagery.
🚨
The site lacked representation of the personal stories and achievements of students and faculty, making it hard to connect with or find relevant information about them.
✅
We built dynamic modules linking to student and faculty bios, blending personal stories with functional details like contact info. These templates, using Rich Text Editor components, showcase key insights into achievements and portfolios.
🚨
The visual design leaned too heavily on the parent site’s limited identity, rather than establishing its own distinct presence.
✅
We revamped CAMD’s entire visual identity, unearthing and developing a distinctive color palette from the brand guide, that transcends the parent site’s limitations and reflects the college’s creative essence.
🚨
The client complained that the site felt stagnant and lacked dynamism.
✅
We explored, prototyped, and incorporated subtle motion effects to infuse the site with energy and create a more engaging user experience.
Experience the Relaunched CAMD Site
Phases in Focus
Starting with competitor audits and user research, I played a key role in shaping our understanding of the landscape and user needs. During the Define Phase, I developed low-fidelity wireframes that met the criteria set by the CRD. In the Design Phase, I created medium-fidelity wireframes, collaborated closely with visual designers, and developed prototypes for micro-interactions and animations. We conducted four design sprints in total, with the end of each sprint dedicated to crafting detailed annotations for dev. Below are the phases in reverse order.
Design Phase
Throughout four design sprints, I refined the wireframes from the Define Phase, focusing on creating intuitive interactive tools like the Global Navigation, Search Tool, Directories, and Network Module. We collaborated closely with Visual and Motion Design to seamlessly incorporate subtle, engaging animations. After each sprint, I carefully annotated each module and template in Confluence, providing detailed guidance to the CAMD development team for successful site implementation.
Templates
Page templates are crafted to balance unique priorities with predefined guidelines, ensuring each page meets its strategic goals. For each of the 21 CAMD page templates, we visualized the fixed, flexible, and optional areas to achieve this balance.
Homepage
The homepage is the gateway to CAMD, creating the first impression for visitors and setting the tone for the school. We restructured the template with a relevant and useful content hierarchy. Our redesign focuses on creating a vibrant, engaging, and user-centric experience that showcases the college’s unique strengths and human stories.
Dynamic content modules highlight CAMD’s renowned Co-Op program and research areas, showcase the faculty, and provide pathways to student projects, bios, and areas of interest. Our approach ensures a personalized and impactful experience for prospective students.
Modules
The module library provides the digital building blocks from which page templates can be created. We built 40+ modules for the CAMD design system. In addition we created 16 cards to be used for specific modules.
Global Nav
With our redesign, we aim to make exploration seamless and meaningful. The mega global navigation menu features well-organized sub-tiers of content, ensuring intuitive access across all responsive devices. Additionally, it includes space for quick links and a prominently featured recirculation link. Meticulous annotations assured successful development and launch.
VISUAL DESIGNWIREFRAMESPeople and Program Directories
Previously challenging to use, CAMD directories often yielded irrelevant results. Collaborating closely with the client, we meticulously mapped out directory content, enhancing the backend structure. This allowed us to develop an intuitive side rail filter that delivers more dynamic and useful search results, incorporating tags and imagery where appropriate.
WIREFRAMES + VISUAL DESIGN“The new CAMD site has been received incredibly well! Very much appreciate your thoughtful work on it.”
Keith McCluskey
Director of Marketing and Communications - CAMD
Annotations
The annotation phase at the end of each design sprint was immensely fun to work on. I meticulously redlined each element of every component in Figma, ensuring we could cross-reference usage and functionality with precision in Confluence. Working with our internal dev lead, we detailed everything from descriptions to population methods, interactions, CMS considerations, variations, breakpoints, and animations. This thorough approach ensured clarity and consistency for the CAMD development team, enabling a seamless transition from design to implementation.
Discovery Phase
Starting with a comprehensive audit of CAMD’s existing site, we identified key areas for enhancement. We then conducted a competitive analysis, examining numerous university and non-university sites to highlight best practices and avoid potential pitfalls. This exercise provided the client with top-tier examples and opened up new experiential possibilities.
Define Phase
Findings from site audits, user and stakeholder interviews contribute to understanding our customer journeys. Our strategy team developed a Content Requirements Document (CRD), which informed our low-fidelity template and module designs. This secured client sign-off before advancing to the Design Phase.
USER JOURNEY MAPSDEFINE WIREFRAMESTHE APPROACHStrategy Snapshot
Drawing on extensive research, competitive audits, and stakeholder insights, we iterated on content strategy, wireframes, and visual designs. We redesigned the CAMD website to engage prospective students through immersive content, firsthand accounts, and interactive experiences. By emphasizing unique aspects like the Co-Op program and research opportunities, we addressed previously underemphasized differentiators. Enhanced navigation and a refined program/department finder improved content discovery.
We focused on refining the information architecture, clarifying navigation, and improving content hierarchy and interactive tools. Our redesign aimed to create a visually vibrant, dynamic site that better reflects CAMD’s unique capabilities and better supports prospective students in their decision-making process.
-
User research with students and faculty revealed key insights, such as the absence of the renowned Co-Op program from the homepage, highlighting important differentiators for CAMD.
-
Analyzing other university and non-university websites helped identify strengths and weaknesses, guiding us to incorporate UX best practices and unique features into our digital experience.
-
The unique value proposition of CAMD was made clearer by distinguishing it from Northeastern University and emphasizing differences between programs, majors, and concentrations.
-
A coherent navigation hierarchy was established with primary landing pages for each section, addressing issues of disorientation caused by disjointed site experiences.
-
Robust storytelling techniques were employed to connect prospective students with current students’ experiences, featuring testimonials, projects, and a modular system for presenting CAMD stories.
-
Interactive tools such as the Faculty and Student Locator and News & Events pages were refined to enhance usability and effectiveness, ensuring they provide valuable results.
-
Standardizing UI patterns and addressing design inconsistencies improved the site’s adherence to UX best practices, with pathing and content modeling enhancing content visibility and connections across CAMD’s offerings.
Key Takeaways
This project stands out as one of the most rewarding I've had the opportunity to work on, thanks to my active involvement from the initial Discovery Phase through to the final Design Phase. Working closely with Producers, Strategy, Visual Design, and key CAMD stakeholders, we created a collaborative and productive workflow that facilitated informed decisions and timely sign-offs. Given that our engagement concluded before development, detailed annotations became crucial, allowing us to refine these skills meticulously.
I particularly enjoyed working on a B2E site. The idea that the CAMD site could serve as a gateway for future students, guiding them in making one of the most significant decisions of their lives, was truly exciting. Hearing from the client post-launch about the smooth and successful implementation was immensely gratifying.
Credits
DESIGNAddi Hou
Jin Yoon
TEAMJessica Voladarsky
Chloe Lombard
Mike Radvak
TOOLSFigma
Confluence
Airtable
Explore similar projects
B2C | LEAD UX DESIGNERDigital Innovation Meets Trusted Coverage for Berkley Insurance
Starting with the foundation, our team revamped the digital experience and visual identity for Berkley, a Fortune 500 insurance company.
B2B | LEAD UX DESIGNERAn Innovative New Avenue for Real Estate
A comprehensive initiative to transform the outdated digital experience of AvenueOne, a leading platform for real estate investment and management.
B2C | LEAD UX DESIGNERHigh Marks for a New ETS Online
A complete overhaul of the outdated digital experience for Educational Testing Service (ETS), the world’s largest private nonprofit for educational testing & assessment.