Robert H. Jackson Center Website Redesign
Role: UX Researcher & Designer, Product Designer
Location: Pratt Institute
Date: Sept 2021 - Nov 2021
Timeline: 3 months
Collaborators: Hayley Greason, Isik Erturk, Eva Chen
Read More ↓
Goals
Meeting with representatives from the Robert H. Jackson Center, we were able to understand what the center stood for and what is the work that they do daily. Working in collaboration with the Robert H. Jackson Center, we aligned to make the focus on the center's website redesign to be focused on the architecture of the website.
Because of the center is a place that holds so much history, we wanted to insure that information could be found easily. We focused on the ability to find information quickly on the website at first glance.
We centered our goals to re-design the Robert H. Jackson Center's website to highlight the work done at the center while also adding a more modern feel.
How can we highlight the work that the Robert H. Jackson Center creates while maintaining their key principles in place?
To answer the question, our team conducted research on our target audience. By using Personas, Interviews, Surveys, and Tree Testing, we can gage how our users access the website as a resource
Before we began the design process, we began our ideation process. Through brainstorming, our team was able to create a site map for the architecture of the website, made paper prototypes of the mobile site and website, and built wireframes.
To achieve these goals, we researched our target audience, drafted ideas, began the design process, and discovered what was possible to with our final prototype.
To conduct the evaluation, the evaluators approached visitors entering the exhibition. Three evaluation methods were used: observations, interviews, and talk-alouds. We approached visitors before they entered Monet to Morisot. A sign was put out letting the audience know research was taking place. Our team also asked for consent before performing any research method. This was done to evaluate the functionality of the exhibition by taking into consideration the thoughts and actions of visitors that engage with the exhibit.
Research
60 visitors who gave verbal consent were observed were tracked, timed and interviewed. 6 selected participants voicing out their thought while accompanied by our team, whom were also observed and interviewed.
Survey
A survey was sent to the target audience
Interviews
After surveys, a few participants were asked about the design
Tree Testing
Tree testing assisted in organizing the content on the website
Survey
Target Audience
To understand who the users are, we focused on getting to know undergraduate and graduate students of all ages. These factors play into who is using the site and for what reason. Some of the factors we use are:
-
Age
-
Country of Origin
-
Level of Education
-
Area of Study
-
-
Desired Area of Profession
We surveyed 47 people. To understand the user's perspective, our team split the survey into 3 different sections: Student Life & Study Habits, the Website Information & Design.
Student Life & Study Habitats
Website Information
From the question list for this portion of the survey, we asked users about the overall feel of the website design. Participants also shared what they would change about the design.
Website Design
This is what the users said about the overall impression of the website and some features they might change.
Interviews
How participants responded to our research questions
What were your initial reactions to the site?
"The blurb in the beginning is just about Robert H. Jackson so it's not clear what they do."
Do you enjoy doing research?
"Yes and no. The learning is fun but the looking stuff up part is hard"
Would you use this site? What for?
"Yes! I one time wrote a paper about restitution law."
How much time do you spend on a website looking for the information you need?
"If I can't find it within 10 minutes I move on."
How do you expect a research site to look? How would you like it to look?
"It should be clean and easy to navigate and basically an online database."
What grabs your attention while browsing?
"Usually pictures or interactive elements on a page."
Tree Testing
The tree sort study was where we learned how to fix our site map to flow. Some of our labels in our navigation were too broad and misled our users, while others were too specific and detailed making the navigation messy and confusing.
01.
Our labeling needs to be more clear as to what information is categorized where. When asking users to find research on WWII legislation, some users went to ‘Teaching Materials’ to find that information, so we changed the label to ‘Resources for Teachers’, which better explains the content on this landing page (syllabi).
02.
When asking users to find the navigation that will send center updates to your email. We expected users to navigate to ‘Get Involved’ then find ‘Newsletters’ to complete this task. Instead, users navigated to ‘Contact Us’ or ‘About Us.’ To fix this problem we moved ‘Contact Us’ and ‘Newsletters’ under ‘About Us’, creating a clearer path for the user based on our findings.
03.
Similarly, we put the center’s address in ‘Contact Us’, but users navigated to ‘Tours’ or ‘Exhibits’ to find this information. To resolve this issue, we move it to a clearer destination in ‘Visit Us’.
Ideation
The evaluators analyzed the observations, interviews, and talk-alouds separately. Once
those were analyzed the data was brought together for comparison. The evaluators
were able to summarize paths, behaviors, and time spent in the exhibition by visitors.
Site Map
Based on our findings during the research phase, our team was able to create a site map outlining the architecture of the website.
Paper Prototypes
Web
A paper prototype was created to create a layout of the website before actually building it. This gave our group a sense of how elements can be placed together.
Mobile
For mobile paper prototypes, we ensured to keep everything focused on a one page scroll. This will prevent horizontal scrolling and focus on vertical scrolling.
Wireframes
The next step to the ideation process is making a wireframe. Here, we were able to apply what we learned from the paper prototypes. We used a grid system to keep items and sections aligned.
Design
Let's get to work! After the research and brainstorming, our team created a web and mobile prototype of the Robert H. Jackson Center Website.
Web Design
Mobile Design
Key Design Features
Highlighting the Center
Adding the center's mission statement at the beginning will let the user know what the website's goals are. Following the statement a highlight of Robert H. Jackson is also included to give the user's critical information of who he was.
Icons
Icons add an interactive feature to the page and serve as a summarizing image and link to the page.
Primary & Secondary Search
Separating the navigations allows user to do an overall search or a specific search inside of an archive page.
Breadcrumbs
Adding breadcrumbs allows for users to know where they are in the navigation process of the page helping with research processes.
Discover
Web Prototype
Watch and explore the prototype for the RHJ Website.
Conclusion
The Robert H. Jackson Center needed a reorganization of content on the website. Meeting with the center's representatives, we were able to understand what the center wanted and what the center needed. We focused on highlighting the center's work and making it easier for user's to find information.
After the research, the design process began to come together. Working step-by-step, we made a design that we thought would work. Testing and working through the ideation process, we find mistakes and fix them throughout the process. Working to edit the design before it's fully made.
What we learned was how to use our User Interface tools to create a successful prototype. We listen to our client and make sure their goals are prioritized. We listen to our user's to ensure the experience on the site for them is seamless.