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.
Timeframe.

8 weeks

Team.

Kalen Abe, Kaliray Arison, Cinthya Jauregui, Martimeano Villa

Skills.

UX Research, UX Design, Information Architecture

Tools.

Figma, Optimal Workshop, Paper & Pen

Problem.
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.
Solution.
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

Macbook with image of redesigned webpage
Redesign of the Santa Clara University Archives and Special Collections website.
Macbook with image of redesigned webpage

Redesigned Santa Clara University A&SC homepage

📎 View PNG

Process
Empathize.
Stakeholder Listening Session
Research.
Heuristic Markup
Content Inventory
Comparative Assessment
Design.
Task Flows
Wireframes
Final Design
Test.
Treejack test
Card Sort test
User Survey Dynomapper
Empathize.
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.
Client Ask
Human Question
#1
We want more people to use A&SC's web services.
Why do people choose to use library web services?
#2
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?
#3
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?
#4
We want the website to be easily configurable.
What kind of website changes are Kelci and Nadia comfortable making?
Research.
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.
Heuristic Markup
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.
Content Inventory
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. 
Screenshot of the Archives and Special Collections content inventory

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.
Landscape Analysis
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.
Screenshot of the Archives and Special Collections comparative analysis. This screenshot includes notes on USF, Stanford, and University of South Carolina

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
Next Steps
Problem Definition
Tangible value
How might we design a university website that guides students and researchers towards finding the resources they need?
Redesign Objectives
Simplicity. Consistency.
Redesign Scope
High-level restructuring of information architecture
‍‍Visual redesign of the home page using SCU Design System
6 weeks

How might we make content relevant, intuitive, and easy to find?
Design
Task Flows
Sitemap
Wireframes
Content Strategy
Prototype
With the initial understanding of the problem, I proposed the following features for a minimum viable product.

Proposed Features
Information Architecture
Improving discoverability 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.
‍Site Map
I then created the user flows for 3 primary tasks in that A&SC users
Task Analysis:
Task Analysis:
Task Analysis:
Key areas of improvement
I then created and proposed user flows for ths3 primary tasks that A&SC users
User flow:
User flow:
User flow:
Redesign Scope
With the features and content in mind, I moved onto coming up with a structure of the website.
Prototype
Hick-Hyman Law 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-pattern

Weber’s Law of Just Noticeable Differences

Test
Treejack test
Card Sort test
Chalkmark test
User Survey
Dynomapper
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.
Plot Twist
Next Steps
Reflection & Learnings
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?
Design.
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

📎 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.
Contact information
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.
Wireframes
My teammate Cynthia and I designed 3 wireframes for the A&SC home page and presented thme to our team and clients for feedback.
Proposed Redesigns
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.
User Testing.
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.
Treejack
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.
User Survey
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.
Beginning tomorrow, Tuesday, March 10th, we will suspend face-to-face meetings of classes and move to a virtual format until Monday, April 13th.  During this time, our campuses will remain open, classes will meet in an online format, and any final exams and papers for the Winter Quarter will be offered in an online format.  Provost Lisa Kloppenberg will send an email to faculty and staff today with more details and information.
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
Case Study

Creating a space for young professional career development on LinkedIn
Reflection.
What I learned
[write something]
What I would do differently
* Updated on June 3rd, 2021
I'
Button Text