Laptop showing the VPAL website's home page

Visual and Digital Accessibility Design for the Harvard VPAL Website

Project Overview


I redesigned the VPAL websited, focusing on the Home and What We Do pages. I also conducted a manual and automated accessibility audit, and consulted on accessibile alternatives for a visual asset.

Team & Timeline

1.5 months start to finish, with a 4-person team working remotely.



  • CSS
  • OpenScholar
  • Figma
  • Adobe Illustrator
  • JavaScript


A new visual identify for the VPAL website that better match the university's core brand, and included a "What We Do" page that better communicated the department's role and value.

Problem and Context

In 2021, the Harvard Office of the Vice Provost for Advances in Learning (VPAL) rebranded their print material to lean more into the traditional Harvard crimson palette. In this project, I applied their new visual identity to their existing website.

What I did

Experience and Visual Design

I used low fidelity wireframes to establish the layout of new content, and took inspiration from print guidelines for the new visual identity.

I primarily focused on the redesign of two pages: the home page and a new "What We Do" page. The Home page involved very few content changes, so I went directly into high fidelity wireframing. Here, I mainly iterated over the representation of the Harvard shield on the department's logo, and the student testimonials.

I used the already established guidelines print guidelines and inspiration, to maintain visual consistency. The wireframes also used the acronym HAL for Harvard Advances in Learning, a rebranding that the department momentarily considered.

Four high fidelity wireframes showing different versions of the VPAL website. The final design at the top and larger than the others.

"What We Do" involved entirely new content, including a flywheel diagram that represented the five core objectives of the department. Thus I began by establishing the layout of this new content with low fidelity wireframes, before moving into the visual design.

A low fidelity and a high fidelity wirefame for the What We Do page

For secondary pages, I focused on creating reusable patterns.

Other pages of the website did not require new content nor major changes. Therefore I only created one additional wireframe to establish the remaining reusable design patterns.

A wireframe for a secondary page of the VPAL website, a page titled Innovation in Learning.

Design Engineering

Next I edited the CSS of the website.

VPAL had an existing website built on a content management system (CMS) called OpenScholar. The project team added any new content required, and I used CSS and JavaScript to modify the look of the website.

The CSS of the VPAL page.

Digital Accessibility Design

Part of the process involved identifying accessible alternatives.

The VPAL team wanted a clickable flywheel image that represented their 5 core capabilities. This flywheel image only existed as a PNG asset, which was not clickable nor easily accessible for screen readers. I used Illustrator and a text editor to create a clickable SVG version of the image. I'd done something similar in the past, and wrote a blog post where I described the process of making and testing an accessible SVG.

A screenshot of the What We Do flywheel Adobe Illustrator File and text file code.

I also conducted accessibility audits using the Wave and Site Improve Chrome Extensions to assure the site met with AA guidelines.

While I fixed the errors I could, some errors were platform issues that I could not solve. The OpenScholar platform has various accessibility issues, including empty buttons. At the time of this project, I was part of a team that was working on finding solutions for this problems, including finding a content management alternative for departmental websites, and working with Open Scholar to make changes to their platform.

A screenshot of the Wave chrome extension showing empty 3 button errors for the What We Do page.


The new VPAL website launched in March 2022 after a few sets of successful departmental approvals. The project manager for the website redesign, and I both heard back from VPAL shortly after launch. They thanked us for the website "seamless updates" and said the website looked amazing.

A screenshot of an email we received from the VPAL team thanking us.