- Interface Design
- Ongoing Support
Empowering Web Content Teams With Flexible Page Composition Tools That Adhere To Overarching Brand Guidelines.
Northeastern University is a globally recognized academic institution and private research university with campuses across the United States, Canada, and the United Kingdom. Its cooperative education program for experiential learning integrates classroom study with professional experience, and includes more than 3,100 partners on all seven continents.
When Northeastern Alumni Relations needed a new website to better tell alumni success stories, help alumni remain connected to the University, and encourage greater engagement among alumni cohorts, they turned to the University Marketing and Communications team. University Marketing and Communications, in turn, reached out to longstanding digital partner 10up to bring their bold magazine-style design concepts to life through a modern, flexible editorial experience.
“10up is one of the best vendors [NU] has ever worked with.”
— Afshan Khoja (Senior Associate Director, Brand Management, Alumni Relations)
The Alumni Relations website was designed to showcase the next evolution of the Northeastern University visual brand and demonstrate the university’s new design system.
During discovery, 10up collaborated with stakeholders from University Marketing and Communications and Alumni Relations to evaluate the website design, document the site’s requirements, and draft an implementation plan aligned with Northeastern’s budget and timeline goals.
10up’s initial design inventory identified 40 unique design patterns and layout variations. To accelerate the build time and maximize budget, 10up helped simplify and streamline the website design while maintaining the University’s brand guidelines. The final design would require a combination of enhanced built in WordPress blocks and 17 custom built content blocks.
The implementation plan split the project into two phases:
- Phase one focused on launching a beautiful website with a flexible, modern editing experience that supports creative and visual storytelling.
- Phase two involved design iterations, further feature enhancements, and rebuilding the Communities landing page.
Flexibility And Accessibility
The structure of 10up’s engineering engagements are tailored to client needs. For the Alumni Relations website project, the University’s Marketing and Communications developers built the front-end while 10up owned the back-end engineering and supported Northeastern’s front-end engineers with code reviews, consulting, and WordPress support.
As a leading contributor to the global, open source WordPress project, 10up leveraged its extensive understanding of the platform’s block (“Gutenberg”) editor to engineer a content creation experience that extends WordPress core blocks with additional layout options and integrates new design patterns through flexible custom content blocks. 10up also guided the University design team through design revisions to ensure that all content blocks follow accessible design best practices.
Designed with content creators in mind, each content block’s back-end content editing interface replicates the block’s look and feel on the front-end, creating visual parity that removes ambiguity in the editorial process. The WordPress block editor provides a modern drag-and-drop editing experience and empowers site editors and content managers to easily build accessible, creative web page layouts by adding and rearranging different blocks and design patterns.
Site highlights include:
- A custom events search feature that enables visitors to filter results by location and event type.
- A custom content type for featured alumni profiles that is searchable by keyword, sortable by media type — blog post, podcast episode, or profile feature – and filterable by industry.
- An eye-catching social media content block that integrates with Juicer to highlight recent posts on Alumni Relations’ Instagram, Twitter, and Facebook accounts, while adhering to the University’s brand guidelines.
- A new Alumni Network landing page that provides details and contact information for each Alumni Network, including a fast and flexible search experience, with profiles sorted by colleges and schools, interests, and locations.
10up is honored to be one of Northeastern University’s few preferred digital partners–an acknowledgement of our success partnering with departments across the University, including Alumni Relations, D’Amore McKim School Of Business, the Northeastern College of Professional Studies, Bouvé College, and the Office of Student Affairs. This cross-department experience empowers 10up to ensure that best practices, experiences, and even code are shared effectively across and between groups, adding value to individual departments while helping to strengthen Northeastern University as a whole.