Partnering with the Harvard Library to Transform the Digital User Experience

In our experience, trust is the foundational element for a successful working partnership between client and agency. When it comes to website redesigns, trust is two-fold. First, the client and agency both need to feel safe expressing their ideas and vision to each other. Second, it’s important that the client can count on the agency’s ability to create the desired solution. Here, we’ll delve into how we worked together as a trusted partner to one of the world’s most prestigious entities in the world, the Harvard Library. 

The Harvard Library is the largest academic library system in the country with dozens of individual repositories holding over 18 million volumes and of course access to millions of pages of digital material. Our collaborative partnership was key to the mission of revolutionizing the online library experience and redesigning the Library website to enrich and empower students, faculty, and researchers.

The Client-Agency Partnership

In working partnerships, trust comes down to psychological safety. When both teams feel safe being vulnerable in front of each other, it makes it easier to bring creative ideas to the table as well as offer and accept feedback. This is especially important when clients and agencies work together throughout the process in weekly sprints. Given how successful the process and outcome of an integrated team model was with Mass.gov, we realized that a similar setup would work well with the Harvard Library.

From the get-go, we knew that the only way to deliver a powerful solution was to rely wholeheartedly on the Harvard Library team to help us understand the complexities involved in running one of the largest academic library systems in the world. The Harvard Library team came to the partnership eager to learn from us about designing and developing a user-centric digital solution. With both teams open to learning from each other from day one, we bonded quickly, and fostered a deep level of trust with each other.

To further build on this foundation and get both teams functioning as one, we used the Scrum Agile workflow and layered in a new ritual of sharing how we were feeling during our daily meetings. Sharing our mood was something new for all of us, but something that we learned as part of The Check-In Protocol from the Core Protocols. The Core Protocols are a set of approaches developed by Michelle and Jim McCarthy, former Microsoft employees, to help people work more effectively with each other on teams. We learned how to apply the Core Protocols to our collaboration through a training workshop facilitated by Richard Kasperowski, board member of Agile New England and world-renowned ‘high-performance teams’ consultant. 

At the beginning of each meeting, if we chose to, we were able to share whether we were feeling mad, sad, glad, afraid or a combination thereof.

Knowing that someone was feeling afraid that they would miss a deadline or feeling sad due to personal reasons had a real impact on connecting to team members as people, instead of merely extensions of their job titles or roles.

The Harvard Library team further enabled open communication by setting up a Slack channel so we could message each other, or video call as needed. We all felt empowered to reach out to one another with questions throughout the project, as we felt that we were all on one team. Subsequently, each of us did our best to be available and provide answers in a timely manner to keep the project rolling.

Design & Technical Experience 

The second aspect of a trusted partnership is the client's confidence in the abilities of the agency to deliver on the design and technical aspects of the digital solution. Clients usually base this on an agency’s prior experience delivering similar types of solutions. Having worked on multiple projects using similar technology, including a large-scale, comprehensive solution for the State of Massachusetts with Mass.gov, we were in a position to build off of our knowledge and experience to deliver a well-thought-out, user-centric solution. 

User Testing

Our strategy team did a lot of work testing wireframes and designs with actual users as part of this project. Their research uncovered what functionality was absolutely required and what was simply nice to have. With that knowledge, it was easier for us to prioritize our efforts on building what was required first and then adding in optional elements as time permitted. This helped us not only speed up development and deliver the desired solution in a timely manner but create a solution that provides what users need most.

Improving Quality, & Saving Our Clients Time & Money  

We value being able to build more resilient solutions that have been tried and tested over time. We are also conscientious about saving our clients time and money. As such, re-using components, automating repetitive tasks, and creating systems that empower clients to grow and evolve their websites over time are an important part of our planning and development processes. 

Expanding on Our Pattern Lab Experience 

Pattern Lab (the brainchild of Brad Frost of atomic design) makes it possible to build pattern-driven user interfaces using atomic design principles. Atomic design is a methodology made up of five stages (atoms, molecules, organisms, templates, and pages) that together make it possible to create interface design systems in a hierarchical manner. Since we had used Pattern Lab on numerous projects before, we knew we could leverage our experience and design a robust solution for the Harvard Library.  

Previous Experience Serves as an Accelerator

Atomic design can be challenging to figure out initially. Though atoms are fairly straightforward as a concept, figuring out what constitutes a molecule versus an organism can be more of a challenge. Furthermore, once a pattern is built as a certain type, it’s nearly impossible to change it without causing breaking changes. This is where our prior work with Pattern Lab paid off, enabling us to start the Harvard Library project with a solid foundation from the get-go. 

Re-using Components

Modular design goes hand-in-hand with Atomic Design and makes each pattern easy to re-use. Using our experience from the Mass.gov project helped save time and resources. For the Harvard Library project, we wanted to go one step further with Modular Design and see if we could get all the files (twig, json, md, scss, js, and jsx) needed for each pattern in the same folder (making it easier to find the dependencies to prevent breaking the code), so it could be moved to another project as needed more easily. 

Automating Repetitive Tasks

Our goal to automate repetitive tasks led us to using Gulp.js with Pattern Lab to help workflow. Gulp.js is a streaming build system and JavaScript task runner which means that it allows us to increase productivity by automating tasks. We went through several iterations to get Gulp to build Pattern Lab correctly, but fortunately our efforts paid off and it worked well.

Using Name Spacing to Provide Optimized CSS for Future 3rd Party Integrations

We found that adding the name space to CSS classes had proven to be quite useful on previous projects, especially when we introduced third party code to the site (with forms for example). In such cases, we didn’t have to worry about conflicts between our class names and theirs. By taking these measures again on this project, we worked to reduce the possibility that our client would run into conflicts between different sets of code if they choose to evolve and grow their websites using what we provide.

Documenting Style Guide Patterns

Rarely does anyone like creating documentation, but the benefits of good documentation are priceless. When working with the EOTSS (Executive Office of Technology Services and Security) team at Mass.gov, we had spent some time refining a template for documentation. We ended up with a nice way to describe the variables used, including which variables were optional and which were required, along with linking to the pattern’s variants. The variants also had a trimmed-down documentation template that helped explain how to recreate that variant (i.e. which variables to populate). Documenting this through the style guide allowed us to leave the client with instructions on how to integrate these patterns into new projects and sites. We were able to use our knowledge from the Mass.gov project to create a style guide for the Harvard Library team so they could continue to use the patterns we created on future projects and sites.

Empowering the Harvard Library Team to Continue Growing & Evolving their Website

The new digital solution revolutionizes the user experience and empowers both online and offline use of the entire Harvard Library system. But as with all redesigns, it’s only a matter of time before more pages need to be created and changes need to be made. The beauty of Pattern Lab and our approach is that we were able to redesign the website with long-term goals in mind. By creating a solid foundation, we were able to empower the Harvard Library team to re-use components and grow and evolve their site to meet their ongoing goals. Without their granular input on a weekly basis, we would not have been able to build such a solution. The synergy of our teams working together allowed us to create a more powerful solution than if we had gone off into a vacuum to build a solution. 

Are you looking to leverage Pattern Lab to create an extensible website? Do you have questions about how to create a user-centric website through a close-knit client-agency partnership? We’re happy to share our experiences and answer any questions. Reach out to us at [email protected] or Tweet Us @Velir. We look forward to sharing what we’ve learned and answering any questions you may have.