UX Design
UX Design is the latest skill to join my tool box. While UX Design typically focuses on digital experiences, apps and websites, it also has applications in live and virtual events. Studying UX Design has given me a unique perspective that I employ when designing all experiences. Understanding the user experience through research and iteration is paramount to good UX Design. Just as a thorough understanding of the attendee or customer experience is a crucial element when designing any live experience.
The case study below is from a responsive website I designed for an award-winning public library in New Jersey.
title. Books are just the beginning...
date. 2020
client. Brielle Public Library
task. Responsive Website Design & Branding
role. UX/UI Design & Strategy
Project
background.
The Brielle Library is a public library located in Brielle NJ. The Library has tremendous community support and offers a variety of programs. In addition to fulfilling the community’s traditional library needs, the Library offers a range of programming including a robust Children’s Program. Adult programs include author events, cultural programs and lectures, informational workshops, book discussion groups, and computer classes.
The pandemic has uncovered the need for the Library’s digital presence to be enhanced. The Library’s engagement with the community has declined since Covid 19 guidelines reduced in-person contact between the library and its patrons. The hope is that by updating and enhancing the Library’s digital presence the community will be encouraged to engage with the Library on their online platforms.
goals.
-
Create new brand guidelines. Integrate the current logo into the expanded branding
-
Create a responsive website
challenges.
This project presented two primary challenges.
-
Design a website that was modern and met all the Library's requirements and needs, yet was easy for the limited volunteer staff to maintain.
-
Design a website that is usable and appealing for the Library's two distinct patron groups, kids and senior citizens.
project phases.
-
RESEARCH -Market Research, Competitive Analysis, User Interviews, Persona
-
INFORMATION ARCHITECTURE - Site Map, Feature Road Map, Task Flows, User Flows,
-
BRANDING - Logo, Style Tile
-
UI DESIGN - Responsive Designs
-
USABILITY TESTING - Prototype, User Testing
-
FINAL DESIGN - Solutions, Reflections
Research
research goals.
-
To discern what tasks library patrons currently use the website to complete.
-
To understand the demographics of the Brielle Library’s patron.
-
To understand what tasks and information library patrons would like to be able to access on the website that isn’t currently offered.
-
To understand what features don’t provide a good user experience on the current website.
-
To reveal what barriers exist that would prevent a patron from using the library’s website.
market research.
-
All five libraries I researched serve both a traditional library function (renew and reserve books) as well as serving as a home for community events.
-
The landing pages of all the libraries were heavy on information. Users need to scroll down the landing page.
-
Cards were a common tool used on the landing page to organize information.
-
All the sites were heavy on color and content. And 4/5 had multiple navigation bars on the homepage.
-
Accessibility is a priority.
competitive analysis.
user interviews.
USER 1 - Senior Citizen that is a frequent public library user.
USER 2 - 12-year old that is a frequent library user.
USER 3 - Mother of children who are frequent library users.
USER 4 - Current adult user of the Brielle Library website.
KEY TAKEAWAYS:
1. Its often hard for users to find what they are looking for on library sites.
2. Too much information on the home page and is not organized.
2. Kids need to be able to find what they need in a couple of clicks.
3. The calendar function should be prominent, organized and easy to read.
4. Readability is struggle sometimes with the current site.
5. Books for kids should be categorized by subject, gender and key topics.
6. Keep the navigation bar simple and use only one navigation bar.
persona.
stakeholder interviews.
Interviewed a current board member and the executive director of the Brielle Library.
Both offered similar perspectives and were in agreement on priorities and goals for the website redesign. Neither were involved in the creation of the current website.
KEY TAKEWAYS:
1. The primary use of the site is for their patrons to be able to renew and reserve books.
2. The secondary use is to commuicate programming to the community.
3. Kids are a distinct and important patron and need to have their own page.
4. Senior citizens make up the majority of the library’s patrons. The website needs to be easily navigated and accessible.
5. They would like a calendar events prominently featured on the site.
6. The new design should be modern and easily updated by volunteer staff.
7. Social media should be integrated into the website.
research summary.
KEY FINDINGS
-
Improve navigation
-
Prioritize accessibility
-
Create a calendar function
-
Address hierarchy issues
-
Create a kids page
-
Integrate social media
-
Create a consistency in branding
Information Architecture
site map.
feature road map.
Branding
logo & style tile.
UI Design
responsive design.
Usability Testing
prototype.
The client is using Wix as their platform. All interviews were conducted virtually using the preview mode on Wix as a high fidelity prototype.
testing.
SCENARIO
-
User wants to see what Author Events are happening this month at the Library.
-
User wants to see what time the Library closes on Saturday.
-
User wants to add a new event to the Library’s calendar.
USERS
Two primary stakeholders and one Library patron.
USER 1
3 Adjectives: clean, modern, readable,
-
Add a page for “Must Reads”
-
Change Leadership to Our Team
-
Change Walt Disney quote
-
Add a Donate button
-
Add the ability to accept payments through the website for donations, library fines and events
-
Loved how clean the design looked
-
Loved the size of the type, believes it will work well for their two main patron groups, kids and seniors
USER 2
3 Adjectives: organized, easy, clean
-
Add more options under Find & Renew: Brielle Card Catalog, County Library, & Pay Library Fines
-
Add button to pay Library fines
-
Easy to navigate
-
Add a Donation button
-
Add E-books
-
Likes the enhanced branding and the overall design of the site
USER 3
3 Adjectives: updated, future proof, usable
-
Loved “The Latest” section
-
Excited about being able to edit and add events in one section
-
Likes the functionality of managing events
-
Wants to be able to keep a guest list and close the event when the guest list is full
-
The branding looks awesome. Loves the typography
-
Change Leadership to Our Team
-
Very readable
-
Likes the color palette: traditional and scholarly, but fun
testing summary.
Overall participants were impressed with the branding and the website’s aesthetics. There was also consistency among participants that the website was clean and usable for all demographics of the Library's patrons. The clean design and usability of the new design inspired them to request additional pages and functions be added to “future proof” the site and position them well for any disruptions or new protocols as a result of the pandemic.
revisions.
-
Rework the navigation to include: Pay Fines, E-Books, Brielle Card Catalog
-
Add links for E-Books and Card Catalog
-
Check the old website to be sure all pages and sections are included in the new design
-
Edit Leadership section. Change to Our Team, switch Favorite books for pictures
-
Remove Grounds for Sculpture
-
Change Disney quote
-
Add payment function to events
-
Add payment function to Library Fines
-
Add a Donation button
-
Add Must Read page/section
Final Design
solutions.
FUTURE PROOFING
The client was inspired by the usability and clean design of the new website to add features and pages that fell outside of the initial scope of the project. They started to think in terms of "future proofing" their website as well as adding function to their events calendar that would enhance their users experience and be less burdensome on their staff. I worked with them to set priorities for the addition of new features keeping in mind any limitations. In the end, a numbers of features outside of the original scope were added to the project.
-
A calendar function that addresses guest lists, rsvps and adds an online payment option
-
A "Donate" button
-
The ability to pay library fines online
-
An "Our Team" section
-
A "Must Reads" section
-
A "Benefits" page