NORTHEASTERN UNIVERSITY CAMD
Improving information access for students
BACKGROUND
In 2023, Northeastern University approached my company, Code and Theory, to do a visual refresh for the College of Art, Media, and Design (CAMD). The existing site felt outdated and provide a fragmented user experience made it difficult to seek information. I got brought in as an Interaction Design Intern to design to join a two-person interaction design team to figure out how might we improve the storytelling of CAMD?
​
MY ROLE
As an Interaction Design Intern, my goal was to differentiate CAMD with designs that catered to their users, lead discussions with developers on annotations, and troubleshoot usability issues in the implementation. Due to my three years of experience prior working in digital transformation, I was well-verse in problem-solving and wireframing, so I got the opportunity from my senior to perform junior/mid-level design tasks where I got to lead.
​
I contributed to a cross-functional team of about 30 professionals, collaborating with product managers, visual designers, UX strategists, developers, and copywriters.
Project Type
Mobile Responsive Website
Role
Interaction Design Intern; Addi Hou, Senior Interaction Designer
Methods
Affinity Mapping
Competitive Audits
Wireframing
Prototyping
Writing Annotations
Tools
Figma
Confluence/Jira
Airtable
Microsoft Suite
Duration
2023-2024
THE VERY BEGINNING
WHAT WE STARTED WITH
My team performed a site audit as part of our research phase, where they threw stickies to identify usability issues and visual inconsistencies. As can be seen above, many of the pages lacked engaging graphics and had misalignments of text across their site. A goal of my team was to identify where to incorporate interactions that kept users engaged while not overwhelming them.​
APPROACH
THE END-TO-END DESIGN PROCESS
I participated in the end-to-end design of pages within the CAMD site, by following a structured approach from understanding the users and competitors from 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 practice of information architecture and storytelling
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 website 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 issues
ARRIVING AT A SOLUTION
CHALLENGES AND SOLUTION
My team analyzed research and identified three common main areas that called for a more interactive and integrated experience.
Challenge: Users need to identify CAMD's unique value and offerings to decide to enroll in their programs
Issue: 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
Challenge: Users needed to easily explore programs without confusion.
Issue: 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.
Challenge: 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.
Issue: 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.
USER RESEARCH & COMPETITIVE AUDIT
THE RESEARCH THAT GOT US TO THE FINAL CAMD
As I rolled onto this project during the user research phase, I gathered user artifacts and noted that users were interested in understanding their programs of interest in various areas from faculty, career, to what the program offered. Additionally, given that the major users are of the Gen Z generation, they live in a digital world that favors engaging storytelling that feels relatable. These were things to keep in mind for the wireframe designs.
Persona and Journey Map for User 1: Current Student
Persona and Journey Map for User 2: Prospective Grad Student
Competitive Audit Showed Engagement Storytelling and Easy Wayfinding from Competitors
I helped perform competitive audits by identifying similar schools to CAMD, noting what they did well. We noted that competitor sites use more graphics with human connection that feel more engaging and relatable to users. Additionally the information architecture felt more cohesive and organized.
DESIGN
DESIGNING WITH INTENTION
To design with the user in mind means designing with an intent that it'll be helpful to the user. This meant that we needed to organize the pages with a purpose. To do this, we created zone diagrams, mapping out the different regions of the page and identifying the purpose each served. Because of this exercise, we were prepared to design a website that was meaningful and engaging.
The zone diagrams became these wireframes. There was some overlap between the zone diagrams that some became one wireframe.
Navigation
News and Events Page
Home Page
Minisite Landing Page
Directory Page
Bio Page
Listing Page
Program Page
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.
LOOKING BACK AND MOVING FORWARD
This was an incredibly rewarding opportunity as it was one of my early UX experiences designing for a large enterprise. Here's a few things I'll 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!
