hihihihi

Stanford Lane Medical Library

Redesigning the Digital Research Support Experience

Overview

The Stanford Lane Medical Library is Stanford Medicine's central hub for biomedical research and database support, with 400,000+ journal resources. I joined the Lane Web Services team as an Assistant Product Designer in October 2020 to improve site consistency and usability.

ROLE

Assistant Product Designer

Stanford Medicine

TEAM

Amanda Woodward

DURATION

October 2020 - Present

Ongoing

The Problem

The means of contact and user support are inconsistent throughout the site, and the overall experience for users to request help lacks cohesiveness and usability.

The Project Ask

1. Redesign the Contact Us page to function as a single point of contact for all help services. Instead of linking multiple channels for communication, this page will gather all the ways users can get help library help.
2. Integrate the Ask Us form to be the primary body of the Contact Us page, rather than the current pop-up.
3. Consolidate and streamline contact touchpoints on pages across the entire site.

Product Critique

With the ask in mind, I started by conducting an in-depth analysis of the existing product. I wanted to have a solid understanding of the functionalities and site architecture, as well as existing usability issues before moving forward with research and design. 

CRITIQUE

Contact Us

The Contact Us page serves as the sole hub for all points of contact for Lane Library. In my critique, I found 5 central usability issues with the existing page.

finalstanfordcritique

CRITIQUE

Ask Us Form

The Ask Us form is Lane Library's primary means of contact. Currently, the form exists as a pop-up window. In my critique, I found 3 central usability issues with the existing form.

pls

CRITIQUE

Contact Touchpoints

Throughout the site, pages have contact touchpoints in which users are redirected to means of staff contact. In my critique, I found 2 major usability issues with the current touchpoints.

1
3
2
4

Research

Now that I had a grasp of the usability issues in the existing design, I wanted to conduct further user research to better understand both page users and staff members experiences. This way, I can see if there are any other pain points or usability issues to address in design.

Existing Pages

yale
jhu
uw
h

User Surveys

Screen-Shot-2021-02-12-at-9.04-1
Screen-Shot-2021-02-12-at-9.02-1
Screen-Shot-2021-02-12-at-9.01-3
Screen-Shot-2021-02-12-at-9.01-2

Informal Interviews

Screen-Shot-2021-02-13-at-12.29-1
IMG_1832-1

User Personas

Defining Key Redesign Goals

1. Improve Information Hierarchy

2. Integrate Functionality

3. Standardize Visual Design

4. Standardize Content

5. Promote User Independence

Use visual hierarchy to promote use of most prominent features.

Simplify user flow by increasing functionality instead of redirection.

Implement consistent formatting and styling across page.

Ensure contact content is consistent across the entire site.

Help users help themselves and simplify backend form processes.

Ideation

Before designing, I came up with a game plan of redesign features and layout. My goal was to address both existing usability issues and both user and staff pain points found in research. 

Page Requirements

Screen-Shot-2021-02-12-at-11.03-1
Screen-Shot-2021-02-12-at-11.03-2

Information Architecture

stanfordia

Design Process

With the contents of the page laid out, I conducted the design work from low fidelity wireframing to the creation of the MVP and developer handoff. The process included consistent iteration, feedback loops, and usability tests to ensure the best final design.

Low Fidelity Wireframing

To start things off, I laid out all of my ideas in low fidelity wireframes in order to work through the details and technicalities of the product, as well as see if there were any unforseen usability issues. 

lofi

Branding & Design System

Currently, Lane Library does not have an official design system (its creation is my next project!). For purposes of immediate implementation, I created a design system based on the current site by web scraping. However, because the current components (buttons, iconography, and content containers) did not follow any formatting throughout the site, I created components guidelines to be implemented in the page. The next project will be to implement these same guidelines throughout the entire site.

Style-Guide-Specifications

Working Iterations

I created 5 different working iterations before the final design. Between each iteration, I had design reviews with my manager, feedback loops with the Web Services team, and insights from other designers. 

Screen-Shot-2021-02-16-at-3.28.17-AM

Usability Tests

Using Working Iteration 5, I conducted 6 usability tests with volunteers from various departments of Stanford Medicine, from Psychiatry and Student Affairs. Participants were given 4 tasks that covered different use cases, and I followed their activity and thought process through Zoom screen sharing. 

Screen-Shot-2021-02-13-at-4.07-1final
Screen-Shot-2021-02-13-at-4.08-2final
Screen-Shot-2021-02-13-at-4.12-1

Design

After many, many iterations, the final product was here and ready to be developed! In the redesign, I aaddressed all 5 of the key redesign goals I had derived from the existing product critique and user research, as well as usability issues I discovered in each new iteration. 

DESIGN

Contact Us

The Contact Us page serves as the sole hub for all points of contact for Lane Library. I consolidated the information into three content containers, with distinct information hierarchy. I standardized the formatting and styling of the page, from text and paragraph spacing to container padding, and simplified user flow by making information functional on site. 

DESIGN

Ask Us Form

The Ask Us form is Lane Library's primary means of contact. I integrated the form into the Contact Us page, rather than its previous state as a pop-up. I standardized the format and styling of the form, and reordered items to correspond with user mental models. I also integrated routing questions to promote user independence and ease the staff back-end retrieval process.

DESIGN

Other States

I made sure to design non-conventional states of the site as well, including what would happen if the user didn't fill out a required field or what would appear outside of Live Chat hours.

Missing-Field@2x-1
Chat-Offline@2x-1

DESIGN

Contact Touchpoints

I created a single contact touchpoint to be implemented as a Content 2 container throughout the site. I also consolidated the three secondary CTAs on the top right into a singular CTA. Now that the Contact Us page is a single point of contact for Lane Library, I was able to conjoin the CTA without making the user flow more convoluted. 

hello

Takeaways

The page is currently being developed by the Lane Development Team, and I'm super excited to see it in action and continue analyzing its metrics and areas for improvement once it's active on the site. Special thank you to my manager Amanda Woodward for her support throughout this project and the Web Services Team for their time, feedback, and input.