Willoughby City Library
Website Redesign
Willoughby City Library
Website Redesign
Willoughby City Library
Website Redesign
UX Design
UX Design
UX Design
UX Designer
UX Designer
UX Designer
June 2024 ~ Jul 2024
June 2024 ~ Jul 2024
June 2024 ~ Jul 2024
Figma, Figjam, Google Form, Google Trends
Figma, Figjam, Google Form, Google Trends
Figma, Figjam, Google Form, Google Trends
Background
Background
Public libraries have always been special places for me, both at home and when I travel. They feel like a true reflection of a city's spirit. More than just books, libraries offer reliable information, connect people in the community, and provide learning opportunities for everyone – no matter who you are. They're all about inclusivity and that's what makes them so alive!
Public libraries have always been special places for me, both at home and when I travel. They feel like a true reflection of a city's spirit. More than just books, libraries offer reliable information, connect people in the community, and provide learning opportunities for everyone – no matter who you are. They're all about inclusivity and that's what makes them so alive!
Problem & Impact
Problem & Impact
The current Willoughby City Library's website has great features like online booking, catalogs, and eBooks, but navigating them can be confusing and lacks accessibility, making it not inclusive. By redesigning the library's website, we can bring several key benefits:
Broader
Influence
Broader
Influence
Can inspire other libraries to make similar improvements, benefiting users on a larger scale.
Better
Accessibility
Better
Accessibility
Improved design ensures digital resources are accessible to a wider audience, including everyone in the community.
Increased Engagement
Increased Engagement
A better online experience reflects the library's inclusive and welcoming spirit, strengthening community ties.
Research
Research
I conducted detailed research to understand the pain points and needs of library users. I also observed how they interact with the library and its website to make the redesign more user-friendly.
I conducted detailed research to understand the pain points and needs of library users. I also observed how they interact with the library and its website to make the redesign more user-friendly.
Breakdown of the current website
Breakdown of the current website
To understand the structure of the current website, I measured the dimensions of each section to see what is highlighted. Then, I created a sitemap to show the current layout of information.
To understand the structure of the current website, I measured the dimensions of each section to see what is highlighted. Then, I created a sitemap to show the current layout of information.
User Flow
User Flow
Through my research, I discovered three common ways people use the public library's website. After looking at how these are currently handled on the site, I found two major issues that are causing user frustration.
Complicated structure : The website contains most of the necessary information, but its structure requires users to take many steps to reach their goals.
Booking systems on a different website : Users are redirected to another website(Willoughby e-booking) to book meeting rooms. It would be more convenient to book directly on the current site, but there may be technical limitations.
Through my research, I discovered three common ways people use the public library's website. After looking at how these are currently handled on the site, I found two major issues that are causing user frustration.
Complicated structure : The website contains most of the necessary information, but its structure requires users to take many steps to reach their goals.
Booking systems on a different website : Users are redirected to another website(Willoughby e-booking) to book meeting rooms. It would be more convenient to book directly on the current site, but there may be technical limitations.
Improving website structure
Improving website structure
Some pages were listed under two different categories, so I reorganized them into a single category.
I regrouped pages under major categories such as 'Books,' 'Learning,' and 'Facilities and Services' based on user needs identified during my research.
I created 'Get Involved' and 'Get Help' categories to enhance user engagement.
Some pages were listed under two different categories, so I reorganized them into a single category.
I regrouped pages under major categories such as 'Books,' 'Learning,' and 'Facilities and Services' based on user needs identified during my research.
I created 'Get Involved' and 'Get Help' categories to enhance user engagement.
Lo-fi Design
Hi-fi Design
Main Page
Main Page
Branch Page
Branch Page
Test
Test
I conducted a user test to determine if the proposed user flow meets the needs of users. Two participants, who had never used the library website before, were given two tasks corresponding to flow 1 and flow 2. I timed how long it took each participant to complete each task.
The results showed that my design significantly reduced the number of steps and the time required for users to obtain their desired information on the website.
I conducted a user test to determine if the proposed user flow meets the needs of users. Two participants, who had never used the library website before, were given two tasks corresponding to flow 1 and flow 2. I timed how long it took each participant to complete each task.
The results showed that my design significantly reduced the number of steps and the time required for users to obtain their desired information on the website.
Task 1. Check opening hours and facilities
Task 1. Check opening hours and facilities
Average Improvement
Average Improvement
+79.04%
+79.04%
+79.04%
Task 2. Reserve a meeting room
Task 2. Reserve a meeting room
Average Improvement
Average Improvement
+91.42%
+91.42%
+91.42%
Iteration
Iteration
Problem1: Potential branch overflow on the main page
Problem1: Potential branch overflow on the main page
Branch information and shortcuts are integrated into the global navigation for streamlined access, preventing overflow on the main menu.
Branch information and shortcuts are integrated into the global navigation for streamlined access, preventing overflow on the main menu.
Problem2: Navigation is not smooth as users must scroll back to the top to access other pages
Problem2: Navigation is not smooth as users must scroll back to the top to access other pages
Redesigned to a fat footer for easier navigation without scrolling back up.
Redesigned to a fat footer for easier navigation without scrolling back up.
Problem3: Users expect clear information on resource access, yet the initial step includes unnecessary details.
Problem3: Users expect clear information on resource access, yet the initial step includes unnecessary details.
Users can intuitively view availability for each branch and online without needing to click 'view availability,' saving time and effort.
Users can intuitively view availability for each branch and online without needing to click 'view availability,' saving time and effort.
Final Design
Final Design
Takeaways
Takeaways
Understanding User Needs
Given the diverse and multicultural user base of a public library, it was essential to understand user needs through research and surveys. Analysing this research was crucial to designing a website that truly meets users' expectations.
Given the diverse and multicultural user base of a public library, it was essential to understand user needs through research and surveys. Analysing this research was crucial to designing a website that truly meets users' expectations.
Improved Information Architecture
Improved Information Architecture
Research revealed that many users struggled with the website's structure, finding it difficult to locate intended information due to the abundance of content. I dedicated significant time to restructuring the information architecture, resulting in clearer navigation.
Content Management
In addition to improving the information architecture, I focused on designing an effective layout for content management. This was necessary to ensure the library website could be regularly updated with news and new materials.
@Hayoon Jung 2024