Client

An urban academic library, serving 45,000+ students.

Problem Statement

A student who spends most of her time conducting research needs a fun reading option so that she can explore her interests outside of school.

Outcomes

The new portal pages fix the issues I discovered in the existing designs, and offer a usable way for users to easily browse and explore content.

Inviting office desk with a laptop screen showing the landing page
"What We're Reading" (formerly "Curated Books") landing page.

My Role

I managed this project from the beginning to the end following a user-centered design process. I carried out activities such as user research, prototyping, visual design, development, project communications, delegation of tasks to a student employee, and deployment of components and landing page.

Project Background

Existing design of the library website portal with reading lists curated by the library staff had issues that prevented users from understanding and enjoying the features. After an interview with student users I found that they had difficulty:

  • Understanding what the pages were about
  • Did not know the difference between several product offerings
  • Misunderstood existing user interface elements

This led to a round of improvements and re-designs of the landing page, listing and detail pages.

Screenshot of pausing with poetry Curated Books page
Library Staff offer a service curating reading lists every month.

Interactive Prototype and User Testing

Screenshot of the early interactive prototype used for user testing with students
The interactive prototype was unpolished, but helped to generate insights and discover issues.

I created an interactive prototype and conducted remote moderated and unmoderated user testing sessions of the portal landing page. Although the prototype was unpolished, it helped me discover issues and choose a direction for next steps. For example, I gaged user interest in this type of content, tested new language options for the page title, and discovered that users have difficulty finding this feature from the homepage.

Wireframes and Concept Proofing

Before jumping into design solutions I spent time brainstorming UI element ideas through rough wireframes and learning about development constraints through concept proofing in out Content Management System (CMS). I also looked at how other libraries display their curated reading lists.

List display idea sketch with images in one row
List display idea sketch with stacked images
List display idea sketch with images as playing cards
List display idea sketch with fanned out images

Sketching ideas for displaying lists.

Re-designing the Listing Page

I worked with a group of stakeholders to gain their feedback and approval of a re-design of the listing page linked from the landing page. I renamed the page to something users can easily understand, re-designed the list display, and connected lists to curator names.

Before Screenshot of a Featured Resources page
Before re-design screenshot.
After screenshot of a Curated Books page
After re-design screenshot.

Landing Page Mockups for Stakeholders

I worked on low- and high-fidelity mockups in Sketch to create a landing page layout for a new and improved Staff Picks. The main motivation was to offer users an easy and organized way to browse and explore content without being overloaded with choices and long lists.

Rough brainstorming sketch of the landing page
Sketch of the landing page.
Low-fidelity wireframe of the landing page using Sketch
Low-fidelity wireframe of the landing page using Sketch.
High-fidelity mockup of the landing page using Sketch
High-fidelity mockup of the landing page using Sketch.

Portal BETA Launch and Survey

After I ran the wireframes and mockups by my stakeholders, they had some questions. So, I conducted a BETA Launch and Survey of the portal for a period of three weeks to gather a final set of feedback from our users. As a result, I was able to confidently make a decision on launching the portal, finalise the title for the landing page, and fix technical issues for production.

Test drive our beta page ad for the library website
News article ad for the Portal BETA and Survey.

Final Design

What We're Reading landing page final layout screenshot

Lessons Learned: Testing Early and Setting Up Metrics

I learned about the power of conducting user research as early as possible to gain insights on early prototypes. It saved me from getting invested into the development too early. Second, I learned about the necessity to put measurments in place to make sure I have achieved success. I installed click tracking, search tracking, and email opt-ins on the landing page and will have those metrics to help me know I have succeeded.