Kemper Library Case Study

A redesign of a school’s library website to encourage educational growth in middle school students.

 

Details

Role

UX Designer, UX Researcher

User

6th Grade middle school students

Skills

User Research and Testing, Visual Design, Wireframing, Prototyping

Tools

Figma, Optimal Sort, Otter.ai, Whimsical

Duration

80 hours

Client

Private Middle School

Context

The Talfourd H. Kemper Library website is a K-12 school library site that allows students to search for books and access a variety of tools and resources. Currently, the library's middle school page is a compilation of over 100 resource links. Middle school students use the library site to conduct research for projects and assignments.

Delving into the Library Shelves

In order to get a full understanding of how and when students interact with the website, I interviewed two subject matter experts (SMEs): the school librarian and the 6th grade history teacher. From these conversations, I learned the librarian carefully curates each page for each grade and that students regularly use the website to learn more about the research process. Additionally, 6th grade students are expected to independently their complete work, but often need the teacher to direct them where to navigate on the website and which sources they should use to complete assessments.

 
They [6th grade students] think it is easier to just ask than to actually take the time to look it up.
— History Teacher
 

Research Plan:

 
 

The history teacher invited me to observe her 6th grade history class as the students were working on completing a research project presentation. From this 49-minute class observation, I created a storyboard to better paint the picture of the environment.

 

Class Observation:

 Storyboard:

 
  • 1/2 the students had trouble finding resources they needed

  • 30% of students faced barriers accessing resources

  • Overall, the class did not have a firm understanding of the site’s resources

I found it interesting that the students use the website regularly, yet they still had trouble knowing which resources to use and finding resources they needed. I wanted to explore this as well as learn about other activities students do in their free time to consider incorporating aspects of apps or sites they use. To gain this understanding, I interviewed 5 students from the class.

 
 

I created an affinity map to further break down the contexts and details of interviewee responses. This helped me clearly see patterns in the data and show the ‘why’ behind students' actions and habits.

Affinity Map Key Points:

 

Since students have trouble finding resources, I wanted to further explore why the librarian chose the page’s layout and categories, so I had her complete a card sort. I then compared this data to the website’s analytics to see if the most used links and the librarian’s card sort hierarchy matched one another. According to the website analytics, there are 105 links on the library’s page, 37 of which have never been used this school year. From the comparison, I learned that there were:

  • Numerous duplicate links on the page

  • Links listed at the top have never been used this school year

  • Only 21 links were accessed 10+ times this school year but were scattered throughout the page 

Website’s Analytics:

Having duplicate links and unused links located at the top of the page only adds to the cognitive load of students as they scan for resources they need. Additionally, since only 21 links were used regularly, these resource links are the ones that should be given priority rather than displaying all 100.

This proved that there needed to be some major information architecture changes that needed to be made in order to be more clear and accessible for students. The current content layout is not benefiting students as efficiently as it could be.

Outlining Stakeholders' Goals

Since I wanted to design this website for students at this specific middle school, I didn’t want to lose sight of the user demographic I was designing for. I constructed this persona based on interviews and conversations I had with the students.

User Persona:

 

Pulling from the data, we can see Alex gets frustrated when the teacher expects her to complete certain library website tasks in class because she often needs to ask for guidance. Alex knows she is supposed to use the Kemper Library website because it’s more credible, but she also wants to complete her assignments as quickly as possible.


Having spoken with stakeholders and users, I understood what goals and expectations that each group independently wanted to achieve, as well as, overlapping goals that related across all 3 groups. I created a Business/User/Tech Goals Diagram in order to visualize this concept. Ultimately, the students want to learn, the business benefits from students learning, and the tech wants to ease the process to enhance student learning.

Exploring Solutions to Easily Locate Useful Resources

I started brainstorming with pen and paper, then moved into a digital format to further develop the wireframes. I created 3 low-fidelity wireframe versions of the library website’s home screen.

Key Low- and Mid-Fidelity Wireframes:

I selected the 3rd wireframe version (below) for my high-fidelity wireframe. It’s the most straightforward since it has labeled filter options with images, access to quick and regularly used resources, and is visually cleaner than the previous wireframes. The flow of this home screen is better geared towards the needs of the users finding the resources they need. I then wanted to test my wireframes with actual users, so I created user flows through Figma to prepare.

Home Screen High Fidelity Wireframe:

 

Evaluating the New Flows’ Efficiency

In order to test if my flow was effective in assisting students in completing assignments, I tested it on 6 students. All the participants successfully completed the tasks I asked, but I did learn there were some challenges with my design:

 

Prototype Test Results:

  • Over 1/2 of the participants did not click “More Options” below the filters

  • Some of the filter imagery was not clear to participants 

  • Unless directed, participants did not scroll to the bottom of the home screen

I made some adjustments to tackle the issues that came about during the prototype testing. I simplified the icons to be more consistent with the website's design, and I changed the “More Options” CTA button to a scroll feature.

Home Screen High Fidelity Wireframe Reiteration:

Upon completing my tests, I learned that students were able to pick up this new design without even needing an initial walkthrough. This shows that this redesign is potentially already establishing independence in the students. I would like to further test this by setting up a history class prototype for students’ research and observe how often they may or may not need teacher support with the new design.

Conclusions

Working with middle school students taught me to think differently when approaching a younger user group. When interviewing, I was aware that some of my questions would usually seem too leading, but this actually encouraged these students to further break down what they were explaining to me.

Also after the testing, I revisited the school librarian to discuss my findings. She enjoyed learning how the students interacted with the prototype. She told me that, in her experience, students interact with the library website differently than other websites. Since it’s an educational resource, students don’t want to “explore” and click through the website very much. Instead, they want to quickly find what they came to the website for. My design of the website did cater to this exact need and placed the most used resources front-and-center. The librarian also mentioned that she plans to keep these findings in mind to inform her future decisions.

Project Outcomes

  • The simplified information architecture of the website instilled independence in students

  • Students successfully navigated the website and found resources without needing to ask for help first

  • Librarian will use this data to inform future decisions

Next Steps

  • Test prototype reiterations to mock a class project setup

  • Encourage stakeholders to promote a regular use of conducting online research through the library site 

  • School may need to consider increasing capacity to achieve desired conclusions​

Learning Outcomes

  • There are different strategies for when working with young users

  • I would be interested in further exploring students interactions with educational resources