Phoenix Public Library Website Design
Background
The official website for Phoenix's public library contains information about library locations, hours, events, programs, accounts, and materials. The website is run by the City of Phoenix.
The Problem: The current website is cluttered and disorganized, with redundant and repetitive information, creating an overwhelming experience for users.
Research
I conducted a heuristics evaluation, user survey, card sort, and usability test to identify issues, determine user groups and formulate personas, establish expectations, and discover pain points and task flow problems.
Heuristic Weaknesses
-
Poor visual consistency, with an abundance of type fonts and colors
-
Lack of efficient use, with a disorganized information architecture
-
​Lacks aesthetic and minimalistic design, with an overload of information on the home page
User Survey Insights
-
Average age of users was 38.2 years old, and included both men and women
-
40% of users had a maximum education level of a GED, 40% had a bachelor's degree, and 20% had a master's degree
-
Most users were comfortable with technology and primarily used phones and laptops for Internet access
-
Primarily used library websites to check book availability or find library resources
User Personas
I created two user personas to represent the user groups presented in the survey research.
Card Sort
Common categories that emerged from the card sort were Explore, Getting Started, Programs, Events, and FAQs. I took these expectations into account when proposing a new site architecture.
I interviewed users for user testing and utilized pre- and post-test questionnaires, verbal walkthroughs, and three scenarios with task flows based off the primary functions.
Pain Points
-
​Too much information
-
Chaotic design
-
Inefficient information architecture
Design Process
After looking at the existing home and catalog pages and reviewing the research results, I narrowed down the aim of my redesign.
Redesign Goals
-
Condense color palette into 4-6 colors with 2 signature colors to establish consistency
-
Reduce font type variety to eliminate visual distractions
-
Add featured actions and materials to catalog page to prompt user engagement
-
Group redundant information by theme or purpose to reduce information clutter
The design process started by using the insights from the research to design a new site architecture and navigation bar.
I sketched some low fidelity wireframes to get an idea of the layouts, then used those as a launching point to make high fidelity wireframes in Figma.
Redesigned Home Page
Redesigned Catalog Page
Redesigned Catalog Page
Main Design System
A colorful but simple color palette with a readable and consistent font. Two main colors for the header and primary buttons, one color for text that is not white, and limited accent colors to keep the vibrant feel of the original design.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
​
a b c d e f g h i j k l m n o p q r s t u v w x y z
Future Steps
Next steps would be to do a full overhaul of the whole website's information architecture, since I just tackled the main pages such as the home and catalog. Applying the redesign to the rest of the website, especially the calendar and programs pages, will help the whole site feel more modern and assist in streamlining common task flows.