Berkeley Public Library

Background

In order to expedite the process of getting a new library card, the Berkeley Public Library has an online registration form. The online registration form, however, is difficult to find and complete.

As part of a 4-week individual assignment for my Product Design studio course at UC Berkeley, I redesigned the library card registration process with the primary goal of creating a seamless experience that would increase the number of successful completions.

Assumptions

• User: English-speaking adult

• Device: Mobile

Research

To gain insight into the user flow and identify user needs, I employed the following research plan:

1. Guerrilla UX testing, wherein I observed users navigating the website on their mobile phones and asked them questions along the way to uncover barriers and define the typical user flow.

2. Semi-structured interviews with staff at the Berkeley Public Library to understand how they utilize the online forms, what information is most important, and what the common form errors are.

3. Heuristic evaluation, to identify prominent usability issues with the current design.

User Flow Diagram

Research Insights

Below are highlights from my guerrilla UX testing and heuristic evaluation.

Ideation

For each problem space identified in the research, I sketched several solutions to explore a variety of possible solutions.

Below are sketches of my landing screen exploration, which aimed to decrease noise and increase visibility of the library card benefits and the registration link.

Iterations

First attempt: Make the text fields larger

Based on the research, I learned that users had difficulty navigating the form because of the small text size and fields; some of the fields were too small to fit a person’s phone number, for example, and required the user to scroll left and right to confirm it was inputted correctly. As a result, my first instinct was to make the text fields bigger, which resulted in a form that required vertical scrolling. To make the text fields larger, I moved the side navigation into a hamburger menu on the top right corner.

What I learned from talking to users:

• Having an icon accompany the under or over 14 selection was unnecessary; it provided minimal aesthetic value and almost no functional value (users referred more to the text rather than a visual when selecting age group). Users assumed that if the age group selection was displayed as simple buttons, it would eliminate the need to scroll down to see the full form.

• Most users did not notice the hamburger menu on the top right. Those who did notice the menu indicated they would be likely to explore the contents of the menu rather than focus on the form.

• Some users mentioned the color scheme was a little too dark, making it hard to read some of the text.

Final Design Recommendations & Rationale

• Only include mandatory fields. Through research I learned that the library staff primarily need the user's name, birthday, and address in order to issue cards. Therefore I removed the superfluous fields to create reduce user effort, and eliminated the need to designate certain fields as required or optional. 

• Present fields in a single column layout. The current form presents fields in multiple columns, which interrupts vertical momentum and requires users to visually reorient themselves. Instead, I chose to list all the fields in one column to create a smoother process. 

• Match field size to input size. One of the biggest challenges with the current form is that the text fields are too small for the text input, requiring users to scroll through the field to confirm their answer. I ensured the field sizes match input sizes so that users can see their responses at-a-glance.

• Explain input or formatting requirements. Specifically for the birthdate, I included placeholder text to inform the user how to format their response. This placeholder text color is lighter than the response to ensure users do not assume it is a default value. 

• Include label above text field. Because of the size of mobile screens, including labels to the left of the field can result in a need to scroll side-to-side to read the label and the input, straining users' short-term memory. To facilitate the process of filling out fields and checking responses, I included the labels above the text field.

• Eliminate the menu. Help users focus on completing the form by eliminating the distraction of a menu.

• Disable the “Next” button. Ensure all fields are correctly filled to ensure the form is complete when submitting.

• Autofocus. Highlighting a field gives the users a visual indication and starting point to quickly begin filling out the form.

• Provide appropriate keyboard (numeric) for input

• Employ in-line validation when the user finishes inputting their response (can be triggered via 'ENTER' key or by trying to go to the next cell) to immediately informs users if they incorrectly filled out a field, enabling them to fix it immediately rather than having to wait until they press 'Submit'

• Provide a clear statement in the context of action (near the field that caused the error) that specifies the error and how it can be resolved so that users can quickly fix it

• Additionally, this in-line validation (seeing the green check marks) motivates users to continue filling out the form by providing a sense of progress and completion

• Provide an explicit confirmation that the application has been received, and send a copy to the user to remind them to pick up their library card with the necessary materials

• Clarify uncertain terms upfront. Many users expressed confusion as to what qualifies as a valid photo ID, so I provided the information directly on the page for immediate clarification rather than tucking it away in a help icon.

• Provide a link to library locations & hours so that users can find a location nearest to them, and to encourage them to pick up their card.

Reflection

Moments after I received my first library card in kindergarten, my arms were full with books. That card was my key to a haven that encouraged sharing — of materials and ideas — as well as serendipitous discovery. I still utilize the library to find specific books and to discover new ones, so I jumped up at the opportunity encourage more people to sign up for a library card.

I feel that my outcome successfully facilitated the online library card registration process, while igniting a sense of childlike curiosity and excitement. However, to instill a stronger confidence in my final design, I would have liked to complete more rounds of user testing and iteration. Given my background in user research, I spent a significant amount of time upfront to determine user needs and identify opportunity spaces for design rather than relying on my initial assumptions, which left a little time for several rounds of iteration and testing. Also, while I accounted for common foreseeable errors such as empty fields or incorrect input type (e.g., numbers instead of letters), I did not account for edge cases such as long names, addresses, etc. Next time I am to determine a project schedule upfront to ensure I have sufficient time to ( 1 ) articulate user needs, ( 2 ) get user feedback earlier in the design process, and ( 3 ) complete more rounds of user testing.

© MEENA KAUSHIK 2018