Harvard University

Harvard.edu

School/University / Nominee

Harvard University

School/University

Nominee

"Through workshops, user testing and design reviews, each phase felt like a collaborative work product, versus a set of deliverables that we needed to submit for stakeholder approval." Harvard University

Q: Can you describe your project and the concept behind it?

A: The redesign of Harvard’s flagship homepage marked a departure from what has become expected from .edus. In Focus, our immersive, topic-driven editorial feature, aims to engage, inform and inspire millions of homepage visitors. With topics ranging from poetry to quantum physics to accessibility to racial inequality, the homepage delivers different themes each week to showcase the depth and breadth of research and activity across Harvard.

Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process?

A: Our concepting process focused on collaborative workshops for vision setting and clickable prototypes for user testing. Collaborating with stakeholders on vision setting creates a short feedback loop, allowing change to happen faster and more organically. Real-feel prototypes allow us to gather real-user feedback to inform necessary changes, without the technical debt of testing out a fully built out solution.

Q: What influenced your chosen technical approach, and how did it go beyond past methods?

A: This project was an opportunity to migrate our CMS to WordPress and find a partner who shared our technical, design and editorial ambitions. Modern Tribe worked with the Harvard team to create a modular design system with a robust set of Wordpress Gutenberg custom blocks. This extensive toolkit was dynamic and intuitive to content editors, allowing them to develop rich, visually-consistent editorial experiences week after week.

When did you experience a breakthrough or an "a-ha" moment during this project?

Our initial concept for the academic program browser organized programs in a way that aligned with how administrative staff categorize things. During user testing, it became clear that prospective students had slightly different expectations of how to browser and filter programs. By adjusting the prototype midway through testing, we were able to validate our decisions with positive feedback from the remaining groups of testers.

Watch

Q: What web technologies, tools, and resources did you use to develop this?

A: Our creative teams leveraged Miro for workshopping, whiteboarding and wireframing. Our high fidelity design and prototyping tool of choice is Figma. The site is developed in WordPress, leveraging the Block editor for content creation and a custom React app for the academic program browser.

Q: How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: We can't stress collaboration enough. While we were freed from most strict legacy brand guidelines, we still needed to craft a look and feel that was representative of the university. To do so, Modern Tribe engaged creative stakeholders in the University who weren't part of the project as a whole, but became collaborators in the research and concepting process. This led to a visual language produced not just for Harvard, but by Harvard as well.

Q: How did the final product meet or exceed your expectations?

A: Exceeding expectations might be an understatement. The editorial and technical product, workflows, and narrative frameworks established through the redesign process have been transformative. Harvard is notoriously decentralized and the editorial calendar for In Focus has allowed collaboration with 250 content creators toward a common goal. One goal was to be a leader in digital accessibility and continuing that work has remained a priority. We can't stress collaboration enough. While we were freed from most strict legacy brand guidelines, we still needed to craft a look and feel that was representative of the university. To do so, Modern Tribe engaged creative stakeholders in the University who weren't part of the project as a whole, but became collaborators in the research and concepting process. This led to a visual language produced not just for Harvard, but by Harvard as well.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: We have a wealth of real-time collaborative tools to work with. Through workshops, user testing and design reviews, each phase felt like a collaborative work product, versus a set of deliverables that we needed to submit for stakeholder approval. WordPress' block editor also allowed us to create a content patterns that could be rearranged as needed, allowing for organic shifts in tone and presentation depending on the subject matter of the page