Out With the Old Nav and In With the New Nav: Redesigning the Robert H. Jackson Center Site
Project Overview
The Robert H. Jackson Center advances the legacy of Justice Robert H. Jackson through education. My team of four UX designers undertook the task of redesigning their website, with a focus on enhancing visual appeal, increasing visibility of media resources, and promoting donations. The project timeline spanned four months, during which we conducted extensive research, ideation, and prototyping to develop an updated site that is optimized for both mobile and desktop viewing.
Client: Robert H. Jackson Center
Duration: 4 Months
Team Members: Abbey Hurst, Katie Im, John Kellejian
Software: Figma, Miro, Typeform, OptimalSort
My Role:
For this project, I helped to conduct research as well redesign various pages and nav, primarily on mobile. I also performed the following:
Collaborating with teammates to create our testing materials
Conducting User Interviews and Card Sorts with participants
Analyzing data and recordings from participants
Synthesizing data to form recommendations and to create mock ups
Creating slide deck report
Presenting slide deck report to key stakeholders
The Challenge: Maintaining Original Site Content and Feel While Redesigning
For this client, the tone, message, and feeling were especially important since Robert H. Jackson was so influential in realm of law, education, and civil rights. The original site design did give a very serious and educational tone but appeared out dated. My group took this in consideration throughout the entire research and redesigning process. Another important aspect of the Jackson site is that as is, it was not mobile friendly. The navigation was particularly hard to use via mobile and the content did not scale down well. This was pertinent to me as I focused primarily on the mobile version of the site when we started working on implementing our proposed redesign.
User Research: Students and Law History Enthusiasts
For the purpose of redesigning the Robert H. Jackson Center website, we consulted two distinct user groups that were identified as key stakeholders to the Center’s online and physical presence. The first user group, whom we believe could make up an even larger portion of the Center’s traffic, is students, primarily those connected to history and law. The Center is a place that preserves a multitude of knowledge and history and acts as a great tool and resource for Academia. Our second user group can be identified as people who are curious about topics surrounding Jackson’s life, primarily the Nuremberg Trials, WWII, and the Holocaust. This particular user group is motivated by a strong desire to learn about the virtual and physical artifacts the Center houses.
Methodology
The two methodologies used for data collection included an online questionnaire and semi-
structured, one-on-one interviews. Using the online survey platform Typeform, we were able
to gather 51 responses about individual research habits and preferences, as well as basic
demographic information such as student status. We conducted 8 interviews with current
and former students from various backgrounds. These semi-structured interviews focused
on the individual’s research process and initial reactions to the current Robert H. Jackson
website.
Key Findings
Users prefer that information on a website’s landing page is concise and to the point.
Users primarily go to museum’s websites for information about the museum itself rather than educational content.
Users thought the Robert H. Jackson Center website had a generic feel and was confusing to navigate.
From our research we were able to produce the following user persona and journey:
User Persona
User Journey
Structuring Content: Redesigned Sitemap + Competitive Audit
For the purpose of redesigning the Information Architecture (IA) of the Robert H. Jackson Center website, we employed two different methodologies to create our redesign: card sorting and tree testing. Most of these users were students in higher education or relatively new graduates. This research brief will further discuss our methods and key findings.
Methodology + Analysis
Our group interviewed 8 participants for our Hybrid card sorting evaluation. This allowed participants to place the designated cards under our five categories: “Visit”,”Learn”, “Events”, ”Get Involved”, and “About” but also had the ability to create their own categories if they chose to do so. In total, the participants had to organize 20 items within Optimal Sort. Based on our results, our participants did not create any new categories which leads us to believe our original five items were clear to the users for navigation. In addition we realized participants needed more context for some of the wording chosen for our cards. This led us to change the language of our cards and provide more insight for our users who were unfamiliar with the website and it’s offerings. Our placement of the “Donate” button was decided in the final Site Map after looking at similar competitors’ websites. Our Tree Sorting exercise involved five tasks and one optional follow up question asking about their preferred museum or educational websites. The results from our 10 participants show that they were all able to effectively navigate through the tree sorting and complete the tasks given.
Key Findings
Users were confused with vague category phrasing. Adding context to our categories helps to decrease uncertainty. For example, 50% of participants incorrectly placed “Collections” under “Visit” because they assumed these were current collections being shown at the center instead of it being a digital collection on the site itself. After we labeled the category to “Collections and Archives”, users were all able to successfully complete their tasks during the tree sorting.
Participants had difficulty sorting the “Rentals” category. Only 50% of participants placed “Rentals” under the correct “Visit” tab. Our group thought that by adding context and calling it “Facility Rentals” would help with user navigation. However, during our Tree test 40% of our users failed in completing the task involving renting a room at the center, and only 10% of our users were able to complete the task through direct navigation.
All participants placed the “Donate” card under the “Get Involved” category. We designed our card sort to be hybrid with the expectation that users would utilize this ability and create their own categories. The users did not create the “Donate” card as its own exclusive category like we intended and instead placed it under “Get Involved.” However, after competitive analysis of other museum and educational websites, we believe the “Donate” button deserves it’s own place on the Homepage for better accessibility and visibility.
From our research we were able to produce the following site map and competitive audit:
Site map
Competitive Audit
Competitive Audit
Designs: Wireframes & Prototypes
After our early research phases of this project as background, we then started designing keeping in mind what we learned. We had a iterative design process that included paper prototypes, Low Fidelity Wireframes, Final High Fidelity Digital Prototype
Design Goals
Improve overall usability and visuals of the website.
Encourage visitors to RHJ events and to experience online exclusive content (specifically their podcast and Youtube channel) .
Encourage donations to the center.
Step 1: Paper Prototype
My group created a paper prototype for mobile and desktop of the Robert H. Jackson site with the intention of completing the following 3 tasks:
Find the Center’s hour of operations
Find a list of all the virtual events going on the week of October 24th
Make a donation of $25 to the Center
Next, we scanned the paper prototype into Figma to create a lo-fi interactive prototype for our user tasks. This was to ensure the consistency of design for our group members and ease of testing for our virtual users.
User Task Walkthrough
The left (first) video shows our mobile walkthrough and the right (second) shows desktop
Analysis
| Area of Focus | Recommendations |
|---|---|
| Confusion when a task has been successfully completed. Our users were unsure if they did the Donate task successfully. | Creating an identifiable signifier when a task is completed; e.g. a pop up overlay saying “Thank You for your Donation!” once you submit a payment on the page. |
| Searching for the event in the calendar was confusing, and users were not sure when to use the apply button. | We would fix this issue by making an affordance for the calendar dates. Constraining the order of how an event is searched so that you have to select the day and then event type after will clear up confusion on how to find an event. Having a separate apply button at the end of the search process will make it so that all the changes can be made at once. |
| The desktop version did not utilize the events type option properly leading to confusion when completing the second task. | A redesign of the information structure of the “Events” page; Our group wants to flip the “featured events” and “search” section to prioritize the filters that will look up events. In addition we want to include a Search bar to utilize keyword lookups. |
| The mobile version lacked the option to filter by event type. | We would add a feature to search events by type, so that the process of finding events is more consistent across mobile and desktop. |
Step 2: Low Fidelity Wireframe
From our feedback and research from the paper prototypes we created the following digital wireframes on figma:
Step 3: Final High Fidelity Digital Prototype
For the visuals, our team wanted to create a contemporary and engaging update to the website but maintain a connection to the original version with the color and some of the styling. The “Give Today” on the original site was transformed into a more prominent “Donate” button in our updated version. We also replaced the generic stock photo with more relevant pictures of Robert H. Jackson.
Original site homepage
Redesigned site homepage
Walkthrough
Our prototype was built within Figma and we had three specific tasks we wanted our users to be able to accomplish:
Find the hours of the center.
Look up the next in-person event happening at the center.
Give a donation to Robert H. Jackson.
Client Feedback: “Well put together presentation and wireframe”
Our client was rather pleased with the work my team and I put together. They thought we did a good job maintaining the tone and mission of the Robert H. Jackson Center and the eponymous historical figure himself. Our main feedback was questions concerning the implementation of our design and how our research led to our final output. Upon reflecting I think this was a really cool project to be a part of. It definitely taught me a lot.