UI/UX DESIGNER & RESEARCHER
HarvardSites Design System
This case study explores the user research and design efforts conducted on the Publications Component for the HarvardSites Design System, detailing insights and recommendations gathered from site builders and end-users to enhance the presentation, functionality, and design of academic content on Harvard's web publishing platforms.
Lead UX Researcher & Designer
Role
Timeline
Dec 2023 - Jan 2024
Toolkit
Figma
Miro
Zoom
Summary
From December 2023 to January 2024, I lead a an evaluative user research study with Harvard Web Publishing (HWP) involving eight remote interviews. This study aimed to gather crucial insights to guide the functionality and design of the publications components within the future HarvardSites Design System—a framework that supports all of Harvard's web publishing platforms.​
Project Overview
Following the development of wireframes for the design system's publications related components, we conducted a series of user interviews to collect feedback on the wireframes and inform key design and functionality decisions. Participants provided feedback on the wireframes in addition to sharing their needs, preferences, and challenges in interacting with publications. Interview participants were shown five prototypes of a publication listing page and one prototype of an individual publication's details page.
This research identified the foundational role of publications components in shaping the presentation, design, and functionality of various academic content formats, such as journal articles, books, and data, hosted across Harvard's websites. The findings and recommendations derived from this study significantly influenced the development of the HarvardSites Design System's publications content type and its associated components.
Project Goals
-
Provide research to assist engineers in identifying parity+ features for publications functionality. Parity+ features refers to additional functionalities that are implemented beyond basic parity with Harvard’s pre-existing web publishing platforms, such as OpenScholar and WordPress.
-
Learn how end users interact with publications.
-
Identify what publications related functionalities front-end users and site builders prefer. (e.g. citation previews, download citation list functionality)
-
Identify site builder and end-user preferences, needs, and pain points related to the publications related content.
-
Gather feedback on prototypes developed by FFW to influence final publications component prototypes.
Wireframes
User Groups
-
Stakeholders
-
End Users
-
Site Builders
Research Methods
We conducted eight 45-minute remote Zoom interviews with:
-
4 Site Builders: Harvard affiliates who create and/or maintain websites using Harvard web publishing platforms.
-
4 End-Users: End-users who interact with Harvard websites to search for publications content.
Findings
Publication Listings
-
Both end users and site builders preferred prototypes that provided comprehensive bibliographic information such as author names, publication titles, publication descriptions, and publication dates.
-
A horizontal citation list view was preferred due to concerns regarding scrolling fatigue should citation listing pages feature a vertical card grid format.
-
There was a demand for user-friendly navigation, including clear sorting and pagination.
-
Site builders desire more features that support publications management.
Publication Details
-
End users appreciated optional publication sharing features via social media.
-
Both end users and site builders appreciated the option to include a publication's copyright status.
-
The inclusion of both end notes and references was confusing for some end users and site builders.
-
Site builders appreciated end users having multiple avenues to access publications (e.g. embedded text, download links, external publisher site links).
Recommendations
The following recommendations were made based on the findings from the study:
Publication Listings
-
Offer site builders the choice between horizontal citation list or card grid formats with optional thumbnail images.
-
Improve the sort and filter functionality for clarity by displaying applied filters and the number of publications shown.
-
Introduce an optional abstract expand/collapse feature for each publication, empowering site builders to enable users to access detailed publication information directly from the listing page, streamlining navigation.
-
Include a "download publication" link feature for each publication as an option for site builders to limit navigation between publication listing and publication detail pages for end users.
Publication Details
-
Incorporate functionality that supports the ability for end users to share publications on social media platforms and in email format.
-
Provide versatile options for site builders to share publications with end-users, allowing site builders to utilize a ‘Download Full Text’ button for end-users, text embedding, and external site linking.
-
Remove the citations and footnotes sections.
-
Enable site builders to incorporate hyperlinked endnotes and/or in-text citations within text embedded publications to enhance user navigation.
Prototypes
From our recommendations, we created designs that we shared with the team that includes the functionality and design changes we identified as necessary to improve the site builder and end user experience.
Publication Listing Prototype
For the publication listing design, we developed prototypes for three distinct views: a card grid view, a horizontal card view, and a citation list view. These designs incorporated recommendations to enhance both the site builder and end-user experiences. A key feature across all views is publication download functionality, allowing users to download publications directly from the listing page. This streamlines the user journey by reducing unnecessary navigation.
To further enhance usability, we introduced a toggle feature that lets end users switch between list and grid views, empowering them to choose their preferred way of viewing information. Responding to feedback, we also expanded sort and filter options, including the ability to sort by publication year, format, and author, while providing clear indications of active sort and filter selections. Additionally, the prototypes included a display showing the total number of publications on the listing page, offering greater clarity and control to users.
Publication Details Prototype
The publication details prototype was designed with enhanced functionality to improve usability and engagement. Key features include social media sharing options, improved support for embedded publication text, a refined end notes and references field, and in-text citation capabilities. These additions aim to provide a seamless experience for users interacting with individual publication details.
The full prototype board can be viewed on Figma.
Outcome
​The findings and prototypes from this case study were presented to the Harvard Web Publishing (HWP) team. This collaborative presentation played a pivotal role in shaping the final design of the publications component and content type on the HarvardSites platforms. The feedback and insights gathered during the user interviews not only informed key design decisions but also led to the implementation of several recommended features. These enhancements included options for horizontal citation list views, enriched bibliographic information, and improved user navigation functionalities. As a result, the improved publications component now offers a more intuitive and user-friendly experience, addressing the needs of both site builders and end-users across the Harvard community. This successful integration highlights the importance of user-centered design in developing effective and efficient digital solutions.