Menu

Fondren Library Website Redesign

Fondren Library Website Redesign

library.rice.edu

Fondren Library

Research & Discover

Search books, articles, journals & more

OneSearch

Quick Links

Students

Staff

Faculty

Alumni

Borrow Materials

Study Rooms

Databases

Borrow Equipment

Course Reserves

Research Guides

Role

UX Researcher and Designer

Timeline

April 2023 - Dec 2023

Services

Research, Prototyping, Visual Design, Product Design, Systems Thinking

Challenge

During my internship with Rice University's UX Office, I was challenged to redesign the institution's library website homepage. I had to find a balance between addressing user needs and working with administration's priorities.

Jump to final designs here.

Revolutionized how Rice students filter through thousands of resources on the homepage.

70%

anticipated enhancement in the new user experience due to improved functionality and accessibility.

100%

approval from stakeholders after interactive workshop presentation.

CONTEXT

Legacy website was not reflecting its institution's rank

Rice University is a renowned university for its amazing education, expansive resources, and advanced initiatives. Students, staff, faculty, and community members all have access to these assets through the Fondren Library website, yet, the current website does not represent nor facilitate this advanced access. An entire redesign is not exactly feasible over a summer break, so my main focus was the landing page.

Insert Your Design Here

Macbook Air

RESEARCH METHODOLOGIES

Users felt that the landing page was crowded and outdated.

My first step was to address what the current experiences with the website were like. I conduced 8 user interviews and 5 usability studies on the current website to understand pain points and opportunity areas.

User Interviews and Usability Studies

User Interviews and Usability Studies

User Interviews and Usability Studies

➡️

➡️

➡️

User Interviews and Usability Study Insights

🚨 Pain Point:

Users felt that the navigation menu is too crowded. (A)

Users felt that the navigation menu is too crowded. (A)

Users felt that the navigation menu is too crowded. (A)

🛠️ Next Step:

Conduct testing to understand how this affects usability; conduct A/B testing with prototypes.

🚨 Pain Point:

Users did not understand the resources on the home page. (B)

Users did not understand the resources on the home page. (B)

Users did not understand the resources on the home page. (B)

🛠️ Next Step:

Increase information transparency.

🚨 Pain Point:

Users do not care to engage with material below the fold. (C)

Users do not care to engage with material below the fold. (C)

Users do not care to engage with material below the fold. (C)

🛠️ Next Step:

Incorporate calls to action below the fold OR limit information to viewpoint.

Were competing institutions ahead of the game?

I performed a competitor analysis with the goal of discovering the strengths, weaknesses, and opportunities of 11 competing university library websites, like University of Michigan, NYU, and Yale.

Strengths

💪 Intuitive icons

💪 Modern visual aesthetic

Opportunity Areas

🛠️ Widget-like content areas

🛠️ Accessibility functionalities

Weaknesses

😢 Visual Clutter

😢 Lack of information hierarchy

😢 Wordiness

Were competing institutions ahead of the game?

I performed a competitor analysis with the goal of discovering the strengths, weaknesses, and opportunities of 11 competing university library websites, like University of Michigan, NYU, and Yale.

Strengths

💪 Intuitive icons

💪 Modern visual aesthetic

Opportunity Areas

🛠️ Widget-like content areas

🛠️ Accessibility functionalities

Weaknesses

😢 Visual Clutter

😢 Lack of information hierarchy

😢 Wordiness

MORE RESEARCH & UNDERSTANDING THE PROBLEM

Identifying priority issues: Intuitiveness and Navigation

In order to get a better understanding of specific issues and priority failures, I conducted more usability studies and interviews. The Fondren Library Website was not doing a good job of giving users a sense of intuitiveness and navigation.

➡️

Priority Issues

Intuitiveness

Page titles are misleading and frustrate users who navigate to them.

Navigation/Duplication

Users are unsure of which items to choose from in the navigation menu due to duplication.

Users can't perform simple tasks on the website

Once I began to understand the problem, I outlined the User's Journey. This would help me encapsulate what users are like and what users may be currently experiencing with our website.

PROBLEM BREAKDOWN

Reprioritization of features from stakeholders

After meeting with some key stakeholders, my scope became even smaller.

Redirect Focus

The navigation menu is locked by admin ➡️ focus on more flexible aspects of landing page.

Collab with Admin

A complete redesign would be less likely to be approved by administration and may overwhelm users.

Create a Product Roadmap

Creating a ghost/demo website can help users get familiar with the design and leave feedback - rather than a full launch.

I answered some problem questions and created statements to clarify my goals and project expectations.

Who is impacted?

Students, staff, anyone who wants to use library resources.

What do we want to achieve?

We want an accessible, intuitive, and organized experience.

What do we already know?

There are issues with organization and information transparency.

Why is it a problem?

Valuable library resources are going unused.

How can it be solved?

We can refine the organization and display of the website information.

I also had some Pre-Design insights I wanted to lay out given my new limits; this helped clarify the project going forward.

Users want a decluttered and organized website.

Users would use more library resources if their functions were more transparent.

Users want a more modern aesthetic.

PROTOTYPING

Embracing the iterative design process

I then went for a maximalist approach to the re-design. I started with 8 different layouts and made different aesthetic variations of each. Each design had the same 3 design priorities that address the user pain points and pre-design insights.

➡️

Design Changes for the User

A

Softened background, refined color palette, and branded type for modern visuals within brand identity.

Softened background, refined color palette, and branded type for modern visuals within brand identity.

Softened background, refined color palette, and branded type for modern visuals within brand identity.

B

Information hover boxes to increase information transparency and encourage use.

Information hover boxes to increase information transparency and encourage use.

C

Reduced menu options to minimize clutter and avoid choice paralysis.

Reduced menu options to minimize clutter and avoid choice paralysis.

DESIGN CHANGE

A Design 180 with stakeholders: Innovation on the spot

I met with stakeholders to get a vote on which of the 6 final designs they prefer. However, the stakeholders expressed that they believed the layout could "be more tailored to all of our users." This led me to the Pocket Design. This idea is designed to address the concerns of all users, help users understand which resources may be for them, and contribute to the modern look.

SOLUTION

The Next Fondren Library Website: The Pocket Design

The Pocket Design separates information and icons according to user. The pocket aspect of this design supports intuitiveness and navigation of the website. Students (and all users) no longer have to guess where their resources might be because it's right there in front of them!

A

B

C

Pocket Design Functions

A

'Pockets' of info for each user to let them know which resources may help them achieve their goals.

B

Information appears when hovering over the resource icons, letting users know the function of each.

C

Softened background, refined color palette, and branded typeface for modern visuals within brand identity.

library.rice.edu

Fondren Library

Research & Discover

Search books, articles, journals & more

OneSearch

Quick Links

Students

Staff

Faculty

Alumni

Borrow Materials

Study Rooms

Databases

Borrow Equipment

Course Reserves

Research Guides

RESULTS

Stakeholder Presentation Workshop ➡️ 100% approval!

I met with the entire Fondren Library Web Team (6 key stakeholders) to present my project. I utilized The Kano Model, product development framework, to provide a medium of specific feedback tailored to the design. The results were that we would move forward with the Pocket Design for the Fondren Library demo site!

[According to our product roadmap, the Pocket Design will be placed in a "ghost" demo link on the current website. This will help familiarize users with the upcoming design and they can leave feedback for us!]

OVERVIEW

TLDR: Embracing iteration while collaborating with Stakeholders

Overall, this project was an amazing experience that challenged my adaptability and reiterated the importance of designer-stakeholder relationships.

Revolutionized how Rice students filter through thousands of resources on the homepage.

70%

anticipated enhancement in the new user experience due to improved functionality and accessibility.

100%

approval from stakeholders after interactive workshop presentation.

REFLECTION

I learned… a lot!

  • Learning to conduct UX Research has made me a better designer. I am more comfortable with interacting with users, receiving design feedback, and justifying my designs to stakeholders.

  • Public speaking and presentation skills are key to getting your designs seen and heard.

  • Designing is only half of it. True interest and investment in the project really push my creativity past its limits and remind me why design is my passion.

contact me at miamapuladesign@gmail.com

Mia Mapula