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 

45F0925D-0D38-4337-B1BD-B95FAE0278AE_1_2

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.

  1. RESEARCH -Market Research, Competitive Analysis, User Interviews, Persona 

  2. INFORMATION ARCHITECTURE - Site Map, Feature Road Map, Task Flows, User Flows,

  3. BRANDING - Logo, Style Tile

  4. UI DESIGN - Responsive Designs

  5. USABILITY TESTING - Prototype, User Testing

  6. 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.

Asbury Park Logo.png
NYC Lib Logo.png
AACO Logo.png
Mt Leb Logo.png
Princeton logo.png

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.

Brielle Library Persona_Adult.png
Brielle Library Persona_Child.png

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.

Brielle Library Site Map .jpg

feature road map.

9D9CE0E5-FF04-49FC-B594-4C7F1FA56C1C.jpe
 

Branding

logo & style tile.

Brielle Library Style Tile.png

UI Design

 

responsive design.

The Latest Mock-up.png
Homepage Mock-up Black.png

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

CLIENT LIMITATIONS

Recognizing that the Library had a mostly volunteer staff, a streamlined design that considered the limitations of a lean, non-tech savvy staff was critical to the success of this website redesign. I accomplished this by adding a calendar feature that was easy to update and didn't require content to be added on multiple pages. I was also mindful or creating pages that need little to no maintenance. 

DESIGNING FOR KIDS & SENIORS

With two very distinct demographics to consider in the redesign it was imperative that the new design was accessible and would appeal to both sets of patrons. I addressed this through creating new brand guidelines and the UI Design.

 

GOOSEBUMP MOMENT: The Library's new branding features a color palette that is scholarly and classic, yet playful and modern. I chose typography that was clean, readable and leaned toward a bit large font size. The use of photography and white space also helps the eye easily navigate the content heavy site. The clients and their patrons are delighted with the aesthetic and usability of the new design and feel it hits all the right notes for their patrons. 

reflections.

Brielle Library's website redesign was originally initiated by their desire to re-engage patrons during the pandemic shut-down. In the end, the design moved beyond simply solving for the immediate need.

 

By collaborating closely with the client I was able to design a website for them that their patrons will find engaging and easy to navigate, and that will grow with them as they continue to evolve into a greater role within the community.