Project Duration: 3.5 months
Platform: Mobile, Web
Software: Figma, Optimal Workshop, UserTesting.com, Zoom
Contributors: Arthi Sundar, Monicaa GK
Responsibilities: Defining user problems; Conducting user interview and testing; Developing potential design solutions; Creating prototypes of the website
Design Process
Established in 2013, the Madison Public Libraries (MPL) are beloved establishments in Madison, Wisconsin. A haven for children and adults alike, these libraries provides free and equitable access to cultural and educational experiences.
The MPL website serves as a central hub that provides users with necessary information they look for. Even though the libraries have ratings of 4.5/5 ★ on both Google Maps and Yelp based on their in-person experience, their online presence via its website has significant room for improvement in usability.
To utilize the overall user experience of the MPL website, our team has developed redesign solutions through a full design process.
Discover
USER INTERVIEW
Objective: To gather qualitative data about potential users’ needs, goals and pain points when visiting the public library website.
Our team conducted 6 user interviews with potential users. Mostly in their 20s, the interviewees represented a mixture of gender with limited experiences visiting public library websites. The scripts were written individually but the list of interview questions (16 questions in total) were come up with by our team. We each moderated 2 interview sessions via Zoom with the duration of 30 minutes each.
Pain Points:
Users have difficulty finding Information as it is hidden within content on the website.
Some users love to attend library events, but It is hard for them to figure out when the next event will be.
Book rental is one of the major purposes for users to visit public library websites. However, they are frustrated to find the right book in time due to inaccurate search results.
The full report can be found here.
“The information presenting to me all at once is overwhelming… it might be helpful if there are filters. They will speed up the search.”
— H.C., an interview participant
Discover
COMPETITIVE ANALYSIS
Objective: To understand the market need at large by 1) discovering the success and failure in terms of the website usability of MPL’s competitors; 2) determining major features that will provide the greatest benefit to our users.
Our team identified and analyzed 3 direct competitors:
Key takeaways that should be considered in the redesign of the MPL website:
Intuitive and easy reservation process
Color-coded event calendar with reservation abilities
Content organized for different audiences (possibly by age or purpose)
Recommendation lists filterable by genre or content format
Filters to sort through content types
Digestible search results with imagery and iconography to break up text
The full report can be found here.
Define
HOW MIGHT WE
How might we make every piece of information prominent to allow users to find it quickly and precisely?
Develop
MINIMUM VIABLE PRODUCT
Objective: To identify the most basic but essential features needed on the MPL website.
While developing, our team began with using the MoSCoW method to prioritize features that represent users’ needs versus users’ wants. I defined 8 out of 21 features, which were placed into different categories of MoSCoW. Due to the limited time period of the project, we decided to only focus on the features that are highly required – “Must Have” and “Should Have”.
Develop
CARD SORTING
Objective: To develop a usable site navigation that will meet users’ expectations by uncovering how participants naturally browse and conceptualize a set of topics.
Develop
SITE MAP
Objective: To visualize the organization and labeling of the MPL website’s content and functions.
Finding 1: About the Library
Library hours and locations are difficult to find.
We found:
Users may not immediately find the link for “Hours and Locations” on the About the Library landing page, and may not scroll through the copy content at the top.
“Hours and Locations” within the footer are not easy to locate in the footer.
So we:
Add “Hours and Locations” as a Quick Action on the Home page.
List out library hours in the Footer.
Move “Hours and Locations” up in the hierarchy of the About the Library page so that users see it first.
Analysis of the resulting dendrogram, similarity matrices and recorded qualitative data has presented 4 main findings that should be addressed in order to improve the information architecture of the MPL website.
The full report can be found here.
A modified site map has been created to reflect the findings from card sorting. Different types of library resources were re-organized, and some categories were re-named. We believe such changes will help make the organization of information on MPL website more reasonable to users.
The clear version of the site map can be found here.
Deliver
LOW-FIDELITY PAPER PROTOTYPE
Objective: To brainstorm ideas and discover design solutions for MPL website.
Deliver
MEDIUM-FIDELITY WIREFRAME
Objective: To connect the MPL website’s information architecture to its visual design and determine the user flow.
Finding 2: Collections
The resources within sub-categories are hard to predict.
We found:
Users tend to struggle with finding audiobooks. They thought audiobooks might belong to “Digital Rentals” or “Summer Readings”.
Users may not understand what “Book Recommendations” mean.
So we:
Add a short but clear scope note for each sub-category for better understanding.
Rename “Digital Rentals” to avoid confusion (same as “Finding 3 - So We”). The scope notes are also added.
Finding 3: Library Services
Library Services categorization is not intuitive to the users.
We found:
To rent projector and speaker, Users went to “Computer and Tech” first instead of “Digital Rentals”.
User confuse “Digital Rentals” to have digital book copies to be rented.
While renting out digital devices or booking study rooms, it is not clear in which the devices and the rooms are available.
So we:
Rename “Computer and Tech” to “Computer services” and “Digital Rentals” to “Tech Rentals”.
Add “Pick your library” dropdown filter in both ‘Reserve a space’ and ‘Tech Rentals’.
A moderated open card sort with 6 sessions was conducted via Optimal Workshop to uncover the mental model of the potential users and ultimately restructure the information architecture of the MPL website through findings. We each moderated 2 sessions during which each participant was asked to sort 38 cards and complete the pre- and post-test surveys.
Aiming to simulate the actual website for usability testing, each of our team member has created the stack of paper prototypes for major pages of Madison Public Library website. I created 15 prototypes for the mobile version and 3 prototypes for the desktop version.
Only the prototypes for homepage and main landing page are shown below. The full stack of paper wireframes can be found here.
Once the agreement on the final version of the paper prototype was made by our team, we started to build medium-fidelity wireframes on Figma. We made sure that at least one wireframe was created for pages at every level (homepage, landing page, content page, etc.) to serve as the example.
In total, we created wireframes for 24 unique pages with 9 of which being create by me (shown below). The full stack of wireframes can be found here.
Develop
USABILITY TESTING
Objective: To validate the design and gather feedbacks on the prototype redesign from potential users.
Our team conducted an unmoderated remote usability testing among 9 participants on UserTesting.com. We each took charge of 3 sessions by recruiting participants and consolidating their feedbacks.
Participants' performances on each task was manually scored on a scale of 0 to 2 using the predefined evaluation metrics for success. Task completion time and path taken were considered in determining the score of failure, success or partial success.
Based on the user feedbacks, three aspects of the prototype were deemed more important and were given priority for improvement.
The full report can be found here.
Again, all of the changes made above aim to solve the problem:
How might we make every piece of information prominent to allow users to find it quickly and precisely?
Deliver
STYLE GUIDE
Objective: To establishes the standard style requirements for the MPL website.
Deliver
HIGH-FIDELITY WIREFRAME
Objective: To showcase the true representation of the MPL website.
I created a complete style guide for the MPL website with various design elements identified.
Resonating with the mission statement “we celebrate ideas, promote creativity, connect people, and enrich lives”, I set the brand voice to be “Inspiring, Informative, Engaging”. The color swatches chosen also reflect this message – blue being intelligence and inspiration and orange-coral being friendly and collaborative.
The clear version of the style guide can be found here.
Using the design process, we each created high-fidelity wireframes (3 for mobile and 3 for desktop) that incorporated all of the research, analysis, testing, and adjustments over the semester.
The clear version of the high-fidelity prototypes can be found here.
Deliver
NEXT STEP
High-fidelity prototypes for the entire websites, both mobile and desktop versions, need to be completed.
Once having that done, the user testing should be conducted to discover any final potential problems before moving to the developer’s part and the final release.
Lesson Learned
“More options, more problems.”
— Scott Belsky