White Label Design System and Multi-site Drupal Platform Build

/ CLIENT

Harvard

/ PROJECT TYPE

Design + Migration

/ DURATION

1 year

/ DELIVERABLES

Project Discovery

Content Modeling

Wireframes

Design System Annotations

CMS Wireframing

Product Consulting

/ BACKGROUND

IHarvard University hosts all websites on a Drupal 7 insulation called ‘OpenScholar’. Currently OpenScholar is the home for over 11,000 websites and is facing three “end of life” events:

• The OpenScholar organization no longer offers managed hosting

• The OpenScholar open source project is no longer maintained

• Drupal 7 will not receive bug and security updates after 2023 (extended support from Acquia available until 2025)

Migrating to a new platform provides an important opportunity for modernizing both the visual appearance and site building experience for websites on the platform and improving governance.

/ OVERVIEW

In 2022 FFW kicked off an engagement with Harvard to design a new platform with a white label design system and migration. OpenScholar was built to make it easy to share work and ideas on the web with targeted features and customizations to meet the needs of many stakeholder audiences that are served across the University.

Challenges with the existing experience:

• Outdated & restrictive templates that don’t feature modern designs  

• Site experiences fall outside of Harvard’s accessibility standards

• Difficulty understanding when a site has been abandoned

• Authors with several websites aren’t able to easily manage multiple websites

• No ability to scale and upgrade to new experiences and modern day tools

Our work was collaborative with many outstanding contributions from every team member.

/ APPROACH

Our discovery activities over the first couple months focused on two goals:

1. Understand current state. “No content left behind” was a guiding principle for the migration of the OpenScholar sites. To do this successfully, we first cataloged technical, design, and content experiences across a representative sample of sites.

2. Imagine future state. What got us here won’t get us there. Together we explored ways to empower users, create operational efficiencies, and create consistency across a system.

Over the course of Discovery patterns began to emerge.

• Generate excitement and interest among stakeholders by demonstrating tangible improvements within the new platform through the Demo Site and initial Pilot Sites.

• Improve governance. Greater collaboration with School & Unit Partners. Shift away from the paradigm of self-service site creation towards provisioned websites with an on-brand look and feel.  

• Improve accessibility for both the end user and the site builder. Accessibility is not a feature, it is the foundation of this platform.  

• Create an adaptable platform that provides flexibility for site builders and continues to evolve and grow as needs and users grow.  

Enabling Modern Design Practices

OpenScholar had outdated and restrictive templates leading to custom code and layouts that were difficult to manage and scale. 

A design system built with flexible widgets, accessible layout variations, and role-based configuration options will make one-off customization nearly obsolete. The system will be a living organism that focuses on:

• Style Guide

• UI Patterns

• Governance

A Scalable Content Experience

Our design system is only one piece of the puzzle. When we break down content into smaller, structured units, we can create more consistent and repeatable designs. By providing a consistent structure and vocabulary across similar types of content within the system, we create a unified and cohesive content experience for users, while future-proofing the platform.

Current State: Unstructured WYSIYW blobs

Much of the current experience across OpenScholar is composed of unstructured content written into a single HTML container.

Issues with Unstructured Content:

• Difficult to maintain, replicate, or migrate

• Doesn’t adapt to new devices or experiences

Future State: Structured content types with configurable yet structured components

Structured content is an essential foundation of any design system and ensures the new platform will be able to scale to meet the organization’s needs.

Benefits of Structured Content:

• Easier to read by both humans and computers

• Accessible, adaptable, and scalable

Inclusive Web Design

An accessible platform provides out of the box tools and resources to make accessible experiences the standard; accessibility is not a feature, it is the foundation of this platform. 

Site visitors should be able to easily navigate and consume the content for all websites on the platform. Platform code will be reviewed against accessibility guidelines to ensure that all front-end experiences are accessible. 

Accessibility compliance also depends on the content site owners produce. Automated accessibility checkers will be implemented to assist content creators with producing accessible content, even if they are unfamiliar with web accessibility best practices.

The authoring experience must also be accessible for all users. This includes considerations such as ensuring that content editing forms and the layout builder can easily be navigated and used by keyboard-only users. 

/ PHASE 1 SCOPE

Themes & Layouts

Rather than providing users with a set of rigid themes and layouts, this platform will provide configurations to form a visual identity. Themes will be accessible and modern with the ability to introduce new configurations. Layouts will be flexible and responsive enabling users to add structured content to any area of the site.

• Visual Style: Site builders will select from a list of predefined styles, Harvard Web Publishing teams will have access to a CSS code injector

• Font Pairings: Site builders will select from 3 predefined pairings, Harvard Web Publishing teams may choose from an extended library

• Color Palettes: Site builders will select from 3 predefined palettes, Harvard Web Publishing teams may define their own color palette

• Icon Library: Users will select between 2 predefined styles 

• Button Styles: Users will customize buttons with various configurations

• Navigation and Footer: Site builders will select between 2 predefined styles, Harvard Web Publishing teams will have access to a CSS code injector 

• Announcement Banner and Floating Action Button: User can enable and customize new global widgets

Content Types

A Content Type is a pre-defined collection of data types (Fields). They are the containers where specific types of content live. Together they make up the “pages” of a website. 

• Page: An unstructured content type that provides unique landing pages - e.g., a homepage, or marketing event landing page. This content type is customized by placing widgets using a layout builder.

• News: A structured content type used for creating various types of articles.

• Person: A structured content type used for creating various types of people.

• Resource: A structured content type used for creating various types of resources.

• FAQ: A structured content type used for creating FAQ question pairs and pages.

Widgets

Widgets are reusable patterns that are inserted into content types via layout builder. Widgets can either be bespoke or reusable. The content in a reusable widget is linked to every instance of that widget and will update globally across the system.

• 50/50 Card: Enables user to add 50/50 Card via layout builder.

• Accordion: Enables user to add accordion via layout builder.

• Button Block: Enables user to add buttons via layout builder.

• Embed: Enables user to add embed via layout builder. Recommend restrictions or permissions to this widget.

• File Uploader: Enables user to add files via layout builder.

• Hero: Enables user to add hero banner via layout builder.

• Horizontal Rule: Enables user to add a horizontal rule via layout builder.

• Icon Card: Enables user to add accordion via layout builder.

• Image Block: Enables user to add Image with heading and caption via layout builder.

• Quote Card: Enables user to add quote block via layout builder.

• Stats Card: Enables user to add stats block via layout builder.

• Table: Enables user to add responsive tabular data via layout builder.

• Tabs: Enables user to add tabs via layout builder.

• Text Block: Enables user to add WISIWIG via layout builder. Recommend restrictions and strict governance for this widget.

• Vertical Cards: Enables user to add card via layout builder.

/ ARTIFACTS + DELIVERABLES

Design System Inventory

Content Inventory

Wireframes

CMS Wireframes

Content Model

Design System Annotations

/ OUTCOMES

Coming soon