The MSU Museum’s mission is to serve the Michigan State University community by facilitating and creating experiences at the nexus of art, science, culture, and technology. At the MSU Museum, there are multiple online databases that allow users to investigate the cultural and natural science artifacts in the museum’s collections. Argus and Specify are the primary sources for learning about the artifacts within the MSU Museum collections; they act as a research tool for academic and independent projects alike. Students and instructors are the primary stakeholders and are encouraged to explore the databases for homework assignments, projects, and as enhancements in lesson plans.

In partnership with the Michigan State University Museum team, we will be reimagining the digitized collections portal utilized by the MSU community. Following a redesign system leading with UX research, surveys providing us with patterns, interviews providing us with motivations, and heuristic evaluations providing us with the usability guidelines of the portal, our team moved to the design phase of the project.

Upon completion of a research and analytics phase, three key UX design requirements were identified for the MSU Museum collections hub.

Design Requirement #1: Supplementary Documentation

Priority: Must Have

Purpose: New users, users with minimal background knowledge of portal functions, need supplementary documentation to aid their experience. With documentation, users can better understand how to use the databases effectively, thus encouraging them to utilize the portal for research or to further fulfill their curiosities.

What This Looks Like: Supplementary documentation, such as a guide, live chat tool, or video tutorial from MSU Museum, works to inform the users about essential knowledge for using the natural science databases, for example which institution code to use (MSU vs MSUM) as well as which portals require the taxonomic name. For Argus users specifically, the documentation can show what key words will best guide a search, for example the documentation will tell users conducting a search on World War II that artifacts are listed under “World War 2”. Additional instruction helps users understand the navigation within the portal, thus creating a feasible solution for the inherent lack of intuitive design.

Design Requirement #2: Clear Entry Point to the Natural Science Portals

Priority: Should Have

Purpose: Because it has been identified that the entry point to the natural science portals assumes that both familiar and unfamiliar users can identify which portal is best aligned to fit their user need, it is clear that a design requirement ensures that the user feels knowledgeable enough to make that decision by inclusion of portal labeling would be advantageous.

What This Looks Like: To achieve that level of knowledge, an interface must be designed that informs the user of the different functionalities and range of each natural science portal, thus they know which is best to utilize in their search process.

Design Requirement #3: Consistency In Interface Design and Information Architecture

Priority: Must Have

Purpose: Although certain interfaces within MSUM collections carries the same or similar branding which the Museum has self identified with throughout the web application, other interfaces, namely the landing pages on portals, are presented with varying designs, points of entry/exploration, and different signals to the user on how they can get started, or have finished, with their search. To better create consistency throughout all interfaces, inclusive of the varying landing pages, search engines, and rendered returns offered by MSUM and the collections databases, there must be some resolution of the straying interface design and information architecture on name interfaces.

What This Looks Like: Creating a standard UI and navigational architecture frontend landing medium for varying landing, search, results interfaces, etc., that is consistent with MSUM to the degree a user can tell each interface has a certain level of steady communication with their user, which would aid in rectifying the varying aesthetics behind different databases. This lack of deviation and change within interface design will encourage the user on their current handle of the platform and help them flow within each database setting far more naturally and efficiently, likely taking similar first steps in different data platforms. This will further merge the database experience.

After Undergoing Usability test of the prototypes and wireframes designed around these requirements, we share our final design rationale.

Condensed Help Section

Design Requirement Met: Requirement #1

Rationale: Based on our user testing, we implemented more additional aid features and strived to condense the help content that can guide the user to supplementary documentation and more niche information regarding each portal and their varying content. Additionally, we ensured to intelligently place hyperlinks within the interface for elements, components, and features that are a higher hotspot for comprehension on the interface. Although we intentionally created data backed designs to allow for a more seamless understanding of the resources within the Collections Page, if a user finds themselves stumped, there exists Contact Support, AI Generated Chat Box Support, as well as Visual and Audible Portal Documentation.

Column Design

Design Requirement Met: Requirement #2

Rationale: To best present the databases to the user, we implemented a column structure that allows for all portal information to be seen. In our first design iteration, the database information was hidden from the user as they had to click through tabs to see the portal options. With the column design, users can view all museum resources upon landing on the Collections page of the museum site.

Grouping Cultural and Archaeological Categories

Design Requirement Met: Requirement #3

Rationale: Unlike the Natural Science collections, all Cultural and Archaeological collections are hosted on a singular platform, Argus. On the current site, Archaeology and Cultural collections are distinctly separated and each boast a link to the Argus database. During our research phase, we noted that users can be confused by two individual links that lead to the same database. By grouping the two themes, yet still noting the distinct information about cultural and archeology collections, the design removes any questions as to which link is correct and ensures that the user receives the documentation they need for a positive search experience on Argus.

Comparison Chart

Design Requirement Met: Requirement #2

Rationale: Our final design featured a comparison chart to clearly indicate the capabilities of each portal. By utilizing a comparison chart within the column structure of the sire, we have decreased the cognitive load of the user as they do not have to click through and remember which database maintains which functions. Instead, users look at the chart and see exactly which portal suits their needs. From the high-fidelity prototype to the final design, the comparison chart’s look has changed based on feedback from usability testing. Rather than the current look, we changed the color of the section to ensure that the feature’s visibility is enhanced which aids the user in identifying and utilizing the chart.

Glossary

Design Requirement Met: Requirement #3

Rationale: During the research phase of our project, we discovered that users who do not use the portals in their everyday functions did not understand some of the language utilized by the portals. To ensure that the users are knowledgeable about the portal and that the museum can maintain consistency of language across their resources, we incorporated the digitized glossary. By hovering over more complex vocabulary on the site, a popup with a definition appears creating a more accessible and consistent experience. While the glossary is specific to portal language rather than database information, this feature was further influenced by the user testing as testing revealed that a popup providing additional information would be beneficial to a user’s comprehension thus improving the experience.

For our evaluative research, we will conduct A/B testing in order to compare our design prototype to the current Collections page on the MSU Museum website. This method of testing allows us to assess whether users can accomplish their goals more efficiently with our prototype compared to the existing website. We will also implement qualitative elements in our evaluation by asking users to speak their thought process out loud while walking through the completion of tasks in order to uncover the differences in the experiences between the two websites.

We will focus on investigating the changes we made to the way the portals are presented and the addition of instructional documentation, as these were the most innovative features of our design. We will also test the changes we made to the general navigation of the page.

The adjustments to our final design were influenced by information discovered throughout our user testing and evaluation phase. With the informed data of usability test, A/B Testing as well as peer review and critique from fellow designers and project managers we have implemented the following recommendations to ensure our interface takes full advantage of the resources MSUM offers as well as the users natural cognitive attentive abilities.

Relocating the drop down comparison chart to be above the Natural Science Bento Boxes so as to give users the ability to visually compare between portals before they see the varying options by way of bento box, rather than after. This also ensures it will be more accessible for use.

Condense Additional Help features into one interface while providing hyperlinks to the Main Page, while having some hyper important elements remain on both. For example, Contact MSUM and FAQs are available on both interfaces with slightly altered/additional information included in the Additional Help Interface.

Color coding elements of the page that serve polarized functionality. Obviously, some elements of the page serve as information to educate on the range of the databases, others simply direct a user to accessing them. These educational elements will be highlighted in green while the access elements remain white.

These changes not only add to the aesthetic unity of the interface, increasing user ease whilst improving UI design, branding, and architecture. It also serves to dually improve the functionality of the page allowing for a bridging of any dissonances, rectifying confusion with the multi database information sources.