Jan - March 2020
Santa Clara University Archives & Special Collections
Revamping Santa Clara University library's web experience to increase navigability, usability, and findability
In early 2020, a team of interns and I took on revamping the Santa Clara University Archives and Special Collections (A&SC) web experience.
The A&SC website is a virtual home for 50,000+ images and documents from Santa Clara University’s most historical collections.
Kalen Abe, Kaliray Arison, Cinthya Jauregui, Martimeano Villa
UX Research, UX Design, Information Architecture
Figma, Optimal Workshop, Paper & Pen
Usability issues with the existing website. New users reported having trouble finding what they needed and existing members reported that it is too difficult to navigate. As a result, many folks resort to a phone call or email. The redirected requests burden 2 A&SC librarians with tasks that the website is meant to satisfy, such as appointment planning, event RSVP, and finding digital resources.
Restructuring the information architecture and redesigning the A&SC home page with a focus on establish visual hierarchy. Recommendations were made based on results from qualitative and quantitative usability tests.
Redesigned Santa Clara University A&SC homepage
📎 View PNG
Redesigned Santa Clara University A&SC homepage
📎 View PNG
Stakeholder Listening Session
Card Sort test
User Survey Dynomapper
Understanding the Problem
The interns, myself, and our Product Manager decided to kick-off discovery with a stakeholder listening session with Kelci and Nadia, the folks that manage the A&SC department of the SCU library. We hoped to uncover our clients' key pain points and constraints, and build consensus about the project objectives by using open-ended questions and practicing active listening. The task of creating a comfortable online experience falls upon Kelci and Nadia, although their primary concerns are to coordinate research services and upkeep the physical archives.
Stakeholder Listening Session
Reframing Our Client Asks as Human Questions
To better understand our client and users, I reframed the client asks from our listening session as human questions. I reframed these questions to help guide my team in uncovering new and previously unseen ways to meet our client and customer needs, and create solutions that generate shared value for both sides.
We want more people to use A&SC's web services.
Why do people choose to use library web services?
We want to reduce clutter and get rid of legacy content, and add new resources.
What type of content is considered clutter by Kelci, Nadia, and users?
We want website visitors to find the resources or information they're looking for easily.
How do people take steps towards finding library and research resources?
We want the website to be easily configurable.
What kind of website changes are Kelci and Nadia comfortable making?
My team and I sat down after that super insightful client session and began to consciously determine next steps. We decided to first gain a deeper understanding of what we had to work with and what the problem space was by conducting preliminary research. Based on our listening session, the main areas of improvement of this project would be user experience and information architecture
. Visual design is not one of our focus areas since it is largely determined by Santa Clara University's style guide
Understanding User Pain Points
Why do visitors have a hard time finding what they need?
Step 1: Identify effective and ineffective organization structures
Tool: Heuristic Markup
Reasoning for Tool: Can help us identify steps that a user takes as well as their feelings, pain points, and moments of delight
To accomplish our first goal of identifying effective and ineffective content and organization structures, our team decided to perform a heuristic markup of all existing pages.
My teammate Kalen and I both happened to be part of the A&SC website's main user group - students visiting the website for a class - so we partnered up to complete a heuristic markup of the current site. Kalen and I each individually walked through common tasks performed the user group we were representing and a looked for usability hiccups along the way. We ended up with a whopping 40+ annotated web pages.
An extremely small bit of the 40+ annotated A&SC pages
🚩 Red Flags: Over 29 pages of of legacy content, visual design with unclear hierarchy, lack of perceivable navigational paths and affordances, too many options, & most-visited pages are buried up to 3 clicks deep.
Understanding Our Starting Point
What type of content is cluttering the website?
Step 1: Determine what types of content exist and what is related by recording current A&SC web content
Tool: Content Inventory
Reasoning for Tool: Creating a single, shared location for all content can be help us create a baseline for the information architecture, define requirements for navigation, and spot irrelevant & outdated content.
We took a full inventory of the A&SC content and created a database with Google Spreadsheet to categorize the 160+ elements into content types such as navigation, buttons, images, headers, and subheaders.
A snippet of the A&SC Content Inventory
📎 Check out the entire content inventory
🚩 Red Flags: Lack of navigation consistency across all the pages with 8 different navigation formats, lack of visuals in 70% of the pages, and excessive, outdated information on 20% of the content.
Understanding Our End Goal
How can we better help users take steps towards finding the resource or assistance they need?
Step 1: Evaluate the content, design, features, functionality, continuity, strengths, and weaknesses of similar websites
Tool: Landscape Analysis
Reasoning for Tool: This insight will help us learn from what has been tried and is currently in use and help us differentiate our solution.
Upon completing the content inventory, we agreed that there was tons of legacy content that needed to be chucked, but that there was also tons of wonderful content that was not garnering attention from users. We want to help users feel confident in taking steps towards finding the resource or assistance they need. To discover how similar websites achieved or failed to achieve this, we conducted a comparative assessment of 5 well-known university library websites. The chosen websites included a mix of sites we deemed as more and less usable than the A&SC website.
A snippet of the A&SC Comparative Assessment
📎 Check out the entire comparative assessment
💡 Insights: some websites included an immediately visible calendar and place call to actions and important information at the top-right, effective sites include Ask a Librarian feature and maps in addition to 2-3 column page structures, bolded headers, and white space to create hierarchy and dominance that guides users, ineffective sites use one column page structures and competing colors
- Remove legacy content and establish clear organizational hierarchy. Limit navigation formats to make wayfinding more intuitive.
- Revise content presentation and establish visual hierarchy. Consider using white space to establish visual hierarchy.
- Determine formatting limitations for redesign. Consider using 2-3 column page structures, bolded headers, in-page map.
How might we design a university website that guides students and researchers towards finding the resources they need?
- Set clear organizational hierarchy
A&SC wants more people to use their web services.
- Reduce cognitive load by revising content presentation and implementing a clear visual hierarchy
We tend to judge experience based on both their most critical and final moments. Simplifying the user’s path to the goal will help alleviate cognitive load.
- EASY TO UPDATE
Kelci and Nadia need the website to be easily configurable since they will continue management of the website after us interns complete the redesign and move on.
High-level restructuring of information architecture
Visual redesign of the home page using SCU Design System
How might we make content relevant, intuitive, and easy to find?
With the initial understanding of the problem, I proposed the following features for a minimum viable product.
- Provide official, updated, and authentic information regarding threats, supplies, and other announcements.
Many researchers and students who would benefit from the A&SC website do not know it exists.
- Provide a method for the user to reconnect with their loved ones. This feature includes two sub-features. First, the user is able to report their status to the system. Second, the user can search for the status of another person and get notified when their status is available in the system.
- CONTENT IS UNDERWHELMING & OVERWHELMING
A&SC has more resources (both physical and digital) to offer than the current website would lead visitors to believe. Sadly, these wonderful resources are hidden under a growing pile of clutter.
and intuitiveness by establishing hierarchy. Map out what is going to be visible to the user, and what actions will need to be available on the back end.
I then created the user flows for 3 primary tasks in that A&SC users
Key areas of improvement
I then created and proposed user flows for ths3 primary tasks that A&SC users
With the features and content in mind, I moved onto coming up with a structure of the website.
tells us that it takes longer to make a decision when there are too many options. Eliminate anything that is not vital to the completion of the primary task. The fewer extra fields, redundant information, validations, and clicks, the better.
Step 1: Analyze your content for redundancies and unnecessary steps. Improve your default options, reducing the need for interactions for the users.
F-patternWeber’s Law of Just Noticeable Differences
Card Sort test
I jumped at the opportunity to the make the chalkmark test, also known as the first-click test. It seemed like a cool chance to observe what users' gut instinct would be when faced with the new A&SC home page.
I jumped the opportunity to the make the chalkmark test, also known as the first-click test. It seemed like a cool chance to observe what users' gut instinct would be when faced with the new A&SC home page.
Why is the chalkmark test important to our goals?
It would give us insight into where visitors click first on a given page given a certain task. We were using A/B testing, so users would be tested on two different interfaces.
Oh no, a cliffhanger.
No need to fear - this page is under construction and you'll be able to see the rest of the story soon.
Would you like to learn more about me or this project ASAP?
Tackling Information Architecture
I took up the task of revamping the A&SC website's organizational hierarchy by creating task flows with draw.io
. After mapping out the current user paths for common use cases, I modeled more intuitive task flows
. My main goal was to decrease the number of clicks required to complete a given task
so that users feel more confident and reach their goals faster. I iterated multiples task flows for each task with our client. I handed the flows off to my teammates Cinthya and Martimeano to receive a last round of feedback from our client and revise the final task flows.
Final Task Flows
Find a digital resource
Make an appointment
Find contact info
📎 View all task flow iterations
Redesigning the Homepage
I did another audit of the designs and new task flows with the intent of identifying key pain points in the user journey. I realized that most user pain occurred on the homepage — users were getting frustrated within the first few seconds. Due to time constraints, we could only create high-fidelity designs only for one page, so I proposed the home page.
A clean visual layout with hand-picked content
A scannable home page with guiding headers and key resources such as A&SC's most popular collections helps users find where the need to go fast.
A Who Are We section
Some users, such as students coming to the website for a class project, are new to the A&SC and don't know what it has to offer. A short blurb about the A&SC near the top of the home page welcomes new users and assures them they're in the right place.
Including contact information such as A&SC's phone number and location on the home page reduces the number of clicks it takes users to complete the Find Contact Info task.
Calendar or Schedule
A&SC is located in the SCU Library building, but it follows a different schedule and holds different events. A&SC hours, bookings, and events are not visible on the library's main page. Including an intuitive display of the A&SC activities helps users find crucial information fast and lessens the number of basic questions asked to Kelci and Nadia.
My teammate Cynthia and I designed 3 wireframes for the A&SC home page and presented thme to our team and clients for feedback.
I created two home page redesigns in Figma based on the feedback received from the V1 and V2 wireframes above and using only elements available in Santa Clara University's style guide
Time to get testing 🔬. We planned out 2 tests for users spanning across SCU students, SCU professors, and external researchers. The tests would are followed by a qualitative survey that asks participants to describe relevant information and their primary reasons for visiting the A&SC website.
We created a Tree Jack test on Optimal Workshop
to evaluate the newly proposed information hierarchy and determine how users navigate the website when looking for certain items.
Chalkmark Test and A/B Testing
We created the chalkmark test, a.k.a. the first-click test, to get insight into where visitors click first on the home page given a certain task. There are 2 proposed redesigns for the A&SC homepage, so we decided to use the chalkmark results as a metric for success when it came time to choose one design.
We created a user survey for users to complete after taking our tests. The questions focus on the reasoning behind the user's visit and background can iterate our solution for users we hadn't considered this round.
I'm sorry, Earth is closed today.
The day before our user testing kicked-off, us interns received and email that sent us home and locked us up. Classes went virtual, and I flew miles away from our client and users. Due to a lack of familiarity with video conferencing tools and looming deadline, our team decided to end the project and spend the remaining time creating a hand-off brief for the next group of interns 😥.
Check out another project.
LinkedIn for Students
Creating a space for young professional career development on LinkedIn
What I learned
What I would do differently
* Updated on June 3rd, 2021