Reshaping the MSU Museum Website to align with brand standards and increase accessibility
Background
The MSU Museum developed a new 5 year strategic plan features an increased focus on the MSU community in Lansing
The MSU Museum staff struggled to classify and write content because of the many individuals updating their website
The museum needed a stronger user experience that aligned with its new offerings and focus as defined by their 5 year rebranding plan and met the diverse needs of students and staff
Timeline
Sep. 2022 - April 2023
Role
Primary Researcher and designer
Project Manager
Skills
Contextual Inquiry
Data Analysis
Usability Testing
Tools
Google Analytics
Figma
Qualtrics
Project Process
Problem Space Research
To better understand the problem space I spend a couple of weeks researching the current state of the website. This research included conducting a competitive analysis, a heuristic evaluation, as well as speaking with key stakeholders at the MSU Museum to understand what their creative vision and current use of the website was. This research allowed my team to further understand the problem space and create a refined problem statement.
Problem Statement
The MSU Museum needs a unified experience on its website that represents and advances goals as outlined in its five-year plan.
Survey
Rationale
This survey featured demographic identification questions, but also questions about individuals' interaction with the MSU Museum website in an attempt to gather a wide variety of data about website usability as well as identifying users for further interview.
This survey was sent out in a recruitment email to a listserv consisting of approximately 9,000 individuals
Though we gathered respondents who were stakeholders of the Museum in this survey, hundreds of the survey responses that we received were fraudulent which we would not learn until later in the interview phase.
Challenges
Though we gathered respondents who were stakeholders of the Museum in this survey, hundreds of the survey responses that we received were fraudulent which we would not learn until later in the interview phase. This required careful sorting of the data
Survey Introduction and questions from the MSU Museum screener survey
Interviews
Rationale
To understand more deeply how individual users from our stakeholder groups (students, faculty, and staff) used and conceptualized the website and expand on findings found through the survey process.
Challenges
Recruiting participants from each stakeholder group
Scheduling the interviews within the tight reserach timeline
Analyzing data from interviews of multiple different disparate stakeholder groups.
Affinity Diagram from the interview process
Users view the website as a means to an end, a resource they go to find specific museum information and after finding that information leaving.
Many interview participants shifted their opinion after my team as interviewers reiterated that we were not associated with the MSU Museum and did not create the website
Key Insights
A Persona Informed by Interview Data
Analytics
In order to bolster the data we collected from our interviews (including the usability tests that we conducted within our interviews) we examined Google Analytics data for the MSU Museum Website for a three month period from November 1, 2022 to January 31, 2023. The goal for google analytics website use analysis was to determine- who was using the website and how are were using it.
Who is using the Website?
In this three month period the MSU Museum Website received 22,485 users which amounted to 28,153 sessions.
Of the total number of users 12.5% were returning visitors, while 87.5% of users were new visitors.
About 33% of users were 18 - 24 and about 20% of visitors were 25 - 34.
The large percentage of 18 - 24 year-old users could be an indication that students at MSU may be the website’s most popular users reaffirming the choice to refocus website content and design to them.
Age Range of Visitors to the MSU Museum Website (Nov. 2022- Jan. 2023)
How are they using the Website?
The average length of a session on the site was 1 minute and 12 seconds, the number of pages visited per session on average is 1.89 pages, and the bounce rate, or the percentage of users leaving the site after visiting a single page and without interacting with the page in any way is about 72%.
At first glance this bounce rate was concerning, however, reviewing the analytics data in tandem with interview in survey data, we recognized that the primary purpose of many website visitors is simple to find information about how to visit the website in person
Overall, because of this primary purpose of website visitors to find information to users about visiting the Museum in-person, the relatively high bounce rate and low session duration isn’t necessarily a concern and could be more of an indication that users are in fact able to find the information that they need (or that they leverage another source, such as Google search results to provide them this information).
Research Challenges
A tragedy on MSU’s campus
During the research phase of our project there was a tragic shooting on MSU’s campus. This shooting occurred while we were interacting with students and other members of the MSU community, making it extremely important that we practiced ethical engagement within the community. We delayed our research process and offered all participants the opportunity to cancel or reschedule.
Getting scammed
In our recruitment from our screener survey, we also realized that our team had been scammed. When recruiting we used the incentive of a $15 giftcard, and posted graphics advertising this on LinkedIn, Facebook, Instagram, and Museum mailing lists About 250 people with email addresses associated with foreign countries took the survey, and some of them were recruited for further interviews. We realized after a few confusing interviews and email exchanges that many individuals were pretending to be stakeholders in the MSU community simply to get the giftcard. This was very frustrating as we had to sort through the already analyzed survey data to revalidate the results, and also restart all interview recruitment. After filtering our survey results for email addresses with “@msu.edu” email addresses, the survey data was reanalyzed and more interview participants were recruited.
Clarification of Information Architecture
The MSU Museum combined with CoLab Studio and other programs in 2021, after that merger, the navigation elements and content for those offerings were added onto the navigation bar and website in a frankensteined manner. In usability tests the cluttered information architecture confused users and researchers who were looking for specific information on the site. A major requirement for the new site was to clarify and declutter overall information architecture in order to improve user experience.
Based on client feedback and findings from our research, as a team we developed 3 key design requirements to inform all further prototype and design development
Design Requirements
Homepage is a tool to guide user experience
The home landing page is, for many people, their first experience and impression of the MSU Museum. The impression of the homepage makes it integral to the rest of a user’s experience on the MSU Museum website. Because of the major importance of the homepage, my team decided to focus most of our efforts there: revamping the navigation bar and the home page experience.
Accessibility Compliance
After conducting an accessibility audit of the website, a few key issues were noticed, including link presentation and color contrast issues (both issues that make sites inaccessible to individuals who use screen readers and individuals who have color vision deficiencies). A key priority in the design was to ensure that updated designs would be accessible to all audiences.
Design Process
Low-Fidelity Work
With a better understanding of which pages on the site we wanted to focus our redesign on, we began the low-fidelity prototyping phase.
In order to foster a range of designs, we decided to each draft our own wireframes of the top-priority pages on the client’s website.
We then reconvened to discuss what worked well and didn’t work well in each of our designs, and then started to combine the best elements of each wireframe into a singular set of refined wireframes
Mid-Fidelity Work
We started the mid-fidelity prototyping phase by reviewing the feedback we identified on our low-fidelity prototypes from our clients and groups of our peers.
The diverse range of created low-fidelity designs allowed us to experiment with different versions of the homepage and explore important considerations:
Material that’s important and engaged with vs. material that is important, but not engaged with
What most accurately conveys the mission of the Museum
At this stage, most of the work involved creating a more structurally sound information architecture for the website so that we could continue with development of designs past the homepage
Before our team delved into the high-fidelity design we had to take into consideration the technical capabilities of the team implementing our designs and Wordpress, the platform they used to host their website.
Taking this into consideration we planned to create easy-to-implement designs, an improved information architecture, and templates for further website growth
High-Fidelity Work
After receiving further clarification from our clients on our proposed prototype and architecture, we expanded the scope of our prototype and revised many pages.
The main transition to high-fidelity includes introducing color to the prototype based on the official Michigan State University color palette and standardizing text and font choices.
There were significant changes in the page structure:
We further refined the homepage to highlight the main portions of Museum programming and informed by our user testing
We put basic Museum information front and center on the homepage (i.e. hours, location, etc.).
After completing high-fidelity work, our team created detailed product spec. documents to ensure that the team at the MSU Museum would be able to implement the designs as prototyped.
Low Fidelity Wireframes of updated homepage and events page of the MSU Museum
2 Versions of a Mid-fidelity homepage
Restructured Information Architecture
An example of high fidelity prototypes of the website
One of many pages of the design spec documents
Tree Testing
One of the primary design requirements for this project was to improve information architecture.
As a team we mapped out the current architecture of the website, and leveraged interviews with SMEs working in the Museum space, as well as editors of the current website to understand the purpose behind the different sections of the website.
This work was particularly important because of the technical nature of some of the content on the website- including very specific catalog data on insects and animals.
After understanding the current architecture of the website we sought to remove duplication and simplify the nesting of particular sections, namely the collections section, without losing specificity needed by research professionals to successfully use the website.
We tested our proposed architecture using tree testing to affirm that the architecture we created matched with the mental models of our stakeholders.
Tree Testing results showed that the redeisgned architecture and experience led users to the places on the website they wanted to go more often and was a better match with user mental models of the website architecture.
Evaluation
Original Information Architecture of Website
Example Tree Testing Questions
Tree Testing Results affirming that changed to architecture improved user experience
Usability Testing
According to participants of earlier rounds of research and our own design reviews, there were several tasks on the existing MSU Museum website difficult to complete. Some of these tasks included finding information about a loan request, finding information about a specific collection, and finding what events are happening currently. For example, a task participants testing the website had difficulty with was finding how to request a loan from the museum. This task was difficult because it wasn’t immediately clear where in the navigation bar one should go to find loan information
In order to test the new prototyped design of the website we leveraged UserTesting.com in tandem with the tree testing. These tests took users through a variety of tasks that addressed changes my team made to solve identified pain points with the current website experience.
Our updated designs came out of the result of many user flow and informational architecture adjustments. These findings - that users find information on the updated website designs - validate these changes.
In Reflection
In retrospect there are many things that I would change about the process of this project.
To avoid getting scammed by participants simply seeking the interview participation incentive, I would have used internal MSU channels to recruit stakeholders within the MSU community, and more narrow channels of recruitment for other community stakeholders (i.e. not ones broadly on social media). This would have saved significant amounts of time in data analysis, interview recruitment, and created more reliable data. A major limitation of our project was the limited time we had to conduct further research after we realized that our data was corrupted.
Though there we conducted multiple rounds of usability tests, one on the original website, and a round on the proposed information architecture and high-fidelity wireframed designs, if there was more time on this project I would like to conduct more robust usability testing on the redesigned page interactions and high-fidelity designs to create further iterations and improvements on the design. Alternatively, with more time, it may have been helpful to deploy the changes to key pages (the homepage, and collections page) and monitor analytics data and make changes accordingly.
A major change that I would make to the process would be to involve our client, our contacts at the MSU Museum more throughout the process of designing.Our team thought that low-and mid-fidelity designs were too early in the process to share with our clients, however, this was a mistake. While our client was happy with the overall product, there were some changes that they would have made, since they were MSU Museum SMEs, this feedback would have been incredibly helpful. In the future I would make sure to leverage client feedback and SME resources available to make sure that everyone is in alignment on deliverables and expectations.
My team with our clients (top)
My team with our presentation board