Logo Refresh and Website Redesign, August 2021
Harvard College Women’s Center
PROJECT ROLES: Graphic Designer, Project Manager, UX Researcher, Front End Developer
The Harvard College Women’s Center needed an inclusive, inviting, and accessible digital space in order to engage students with their work and connect them to Harvard College and Greater Boston Area resources.
Logo Refresh
Before beginning the website project, the Women’s Center wanted help modernizing their logo to match their new brand colors and typefaces.
I evened out the lines in the graphic, changed the colors to match their new brand palette, and updated the font. I created this version of the logo to use on social media platforms and in publications with minimal space.
I also designed a horizontal version of the logo for the website, presentations, and letterhead.
Discovery and User Research
During the Discovery and User Research phase of the project, we used several different data collection methods to audit the old website. We used the following information to make decisions about the website’s menu structure and content:
Siteimprove score review to check accessibility and quality assurance
Google Analytics review
Content inventory using the OUCH method (We identified pages as Outdated, Unnecessary, Current, and Have to Write.)
Card sort using Optimal Workshop (We recruited 30 Harvard College students from the Harvard Library User Research Center Participant Test Pool to organize and label key website topics.)
Comparative analysis featuring peer college women’s centers.
OUCH is a content audit strategy recommended by the Harvard Web Publishing team.
I created a summary presentation for the Women’s Center to explain the key findings.
Custom CSS
The Women’s Center wanted to create a modern website that reflected their new brand identity.
Open Scholar is the primary Content Management System for Harvard College. To achieve the modern look and feel that Women’s Center wanted I:
Designed custom CSS classes in Open Scholar that featured the Women’s Center’s new brand colors.
Imported Google Fonts including Titillium Web and Montserrat.
Frequently used a contrast checker (Colour Contrast Analyser) and Siteimprove to make sure that we were using accessible color combinations.
Pre-Launch Testing
I led an intensive quality assurance testing process prior to the site launch to confirm that we were meeting our content and accessibility goals.
Screenshot of the Quality Assurance testing process.
Accessibility Testing
We tested each page individually for accessibility using Siteimprove.
Siteimprove checks each web page for compliance with the WCAG 2.0 guidelines which we were striving to meet. For example, it scans pages for insufficient contrast or images without alt text.
Quality Assurance Testing
Grade/Spelling – We wanted the majority of our content to read at a Grade 12 level or lower. We used the Hemingway app to test the grade level and to check for spelling errors.
Voice – Because one of our content goals was to use friendly, welcoming language, we checked pages to make sure they were written in first person.
Links – We used Siteimprove to scan web pages for any outdated or broken links.
Reflections
We need to diversify our user research methods. While we learned a lot from our card sort exercise, we would have had more data to back our decisions if we held a focus group or conducted a Treejack test prior to the launch, for example.
Clear documentation is essential to helping departments maintain their websites. Women’s Center staff members found it helpful to have a staging website with sample widgets that they could log in and refer back to when building new web pages. Creating clear instructions for the Women’s Center staff to refer back to has helped them to maintain the new website on their own.