Modern Library Website
UX/UI DESIGN SOLUTION
According to the Institute of Museum and Library Services, 40% of Americans attended the 4.0 million programs at public libraries, which indicates that libraries are taking on an even stronger role as a community hub rather than fading in the age of the internet and the digital media. As a result, a modern library needs to adapt itself to the community character under the digital age. This is a story of how I made positive differences to library users by tech in the US.
"A reason why public libraries are seen as such important third-place institutions is that they and their librarians have gradually taken on other functions well beyond lending out books."
My Role
I lead the qualitative research and visualisation part of the project, produced all major deliverables such as user persona, affinity diagrams and wireframes. I also presented tangible deliverables to the stakeholders in turn with two junior UX designers.
Tool Used
Miro.com
Mapping & Forming
Adobe XD
Wireframing & Prototyping
Slack
Communicating internally
Google Drive
Sharing & Collaborating
The Challenge
Addressing Kids, Teens and Parents at the same time:
The nature of a modern public library is to provide everyone in the city with educational, cultural, and leisure experience, which means the user composition is massive and diversified.
The target user groups assigned to our team were threefold: kids from preK-6th grade, teens from 7th -12th grade, and parents. Each group has different needs while they interfere with one another. The challenge was that we must conduct separate researches towards them and come up with solutions tackling specific pain points.
All-round UX solution from scratch in one month:
This project approached us with the requirements of building at least three primary user flows from the ground within one month.
Our main progress metrics including
A. an evaluation of competitors in the domain to inform product strategies and opportunities;
B. qualitative and quantitative research that yields actionable data;
C. at least one round usability testing conducted;
D. high-fidelity prototype consists of three complete task flows that answers problem statement.
Our team was under great pressure to move efficiently and effectively. In order to achieve the combination of fixed deadlines, set interviews, and usability testing, we have to set a right direction and define clear responsibilities in the team.
The timetable I made for the project.
Green chunks are for internal discussion and individual work time, grey ones are lectures and presentations
The Approach
User Centred Design
Our refined UCD process aims to focus on users and their needs in every sprint when designing. Started from synthesising researches, we built prototypes based on user's pain points, frustration, motivation, goal and fear, After that, we went back and forth between prototype and testing for two rounds to iterate our tangible deliverables.
Contextual Inquiries & SME Interviews
We know that what people say they will do is not always what they really do. Therefore, aside from talking to the people in the library about their thoughts, expectations about the website and library, we also observed from afar to learn about their behaviours.
Additionally, we had conversations with a variety of librarians to know more about people's needs and wants.
Here is what we discovered:
Most driving factors to go to the public library are children oriented.
Library interior designed for social accommodation.
Libraries are also a place for people to hang out; encourages discoveries to media, books etc.
Technology is available, but people often do not know how to properly use it.
60%
SMEs indicated that they are lacking staff and funds (including translators)
50%
expressed the positive impact that services* have on the community.
40%
discussed that their library expands beyond book-lending (renting instruments, job postings, memory labs).
The Discovery
Problem Statements
Kids preK – 6th Grade:
Children need an effective and engaging way to stay motivated to learn and socialize at their local library because this will encourage their families to make more visits.
Teens 7th-12th Grade:
Teens need a unique and safe space (physically and digitally) where they can supplement their primary education and to start transitioning into adulthood despite social pressures that they encounter at their age.
Parents need to make their time at the library worthwhile and valuable for all their family members (including themselves) because increased engagement and retention will improve library experience in a dynamic way.
“I came for the (blank), but stayed for the (blank)”
Due to the massive audience we were trying to target, problem statements were varied. However, we still wanted to develop a common pattern for all users to fit their intentions to visit the library. “I came for the (blank), but stayed for the (blank)” is a straightforward and easy sentence for all the stakeholders to understand.
Design Strategy
Neat and easy to use
Because of the very nature of public library, the site should no doubt be self-exploratory and easy to use for non tech-savvy users. As a result, we intended to use clear grids, light background colour and dark serif fonts.
Different navigations due to varied user habits
Two designs of navigation bar will be implemented for kids & teens and adults with the consideration of consistency. For kids and teens, the menu bar will be chunky, easy to spot and click, while for adults the navigation would be elegant and modern.
The Solutions
Affinity Diagram
Due to the fact that our team was distributed in different cities, we used Miro.com to recorded our insights and discoveries when brainstormed.
After we answered the questions gathered from interviews and analysed the goals and obstacles for targeted users to develop the potential features they would like to see on the website. We found out strengthening engagement and retention is the most important thing to do.
In order to reinforce the engagement and interaction online and offline, a rewards system introduces a level of interest
to attract more traffic
entice existing visitors
By completing certain activity, such as reviewing a book, or finishing an online learning session, digital points would be added to their account, and can be accumulated til enough to redeem gifts they want.
In the second round of ideating, we defined the priorities for next steps:
A. education and mental health for teens;
B. learning interaction and engagement for kids;
C. parents' trust when their children are using the website.
The idea of adding a family account was then come to life. By using family account, children would have the control of an account without signing up a separate one, whereas parents would be able to trace the activities of their kids', thus knowing they are prevented from harmful information.
Sitemap & Task Flows
We then conducted a round of card sorting. The results from the card sorting validated sitemap.
Assuming that the home page duals as the primary adult section and log-in section. The key screens will contain header links to the Kid Page, Teen Page, Events Calendar, Online Resources, Services, About Us and Blog. Both kids and teens will have “Book Club” and “Homework Help” with identities cater to different needs.
The functional sections would be Log-in, My Account and Language Preferences will appear on the top of all key screens and landing pages for easy access. A footer will also be placed with a familiar layout as the key screens.
The highlighted parts are those we foresee focusing a feature on. For example, quarterly competitions and game nights will incorporate a reward systems, spelling bees and drawing competitions for calendars.
Due to the limited time we had, the final task flows are:
A. signing up for an account;
B. access to all major landing pages;
C. leaving a review on a specific book;
Medium Fidelity Wireframe
At this stage, we began to visualise our vision into something tangible. A higher level of the design language, interactions and philosophy began to merge together.
In this part, I come up with stacks of ideas about the arrangement of UI, and sketched most of the screens on Adobe XD.
Several things worth mentioning:
1. As mentioned before, two designs of navigation bar were implemented for adults and user under 18.
2. In order to increase the efficiency & flexibility, users can use the website as a guest or member for more exclusive features.
3. Landing pages of Event Calendar and Services sectors were also included to fit the pattern of a public library although they are not the focus of this solution.
The Outcomes
Prototyping with XD
The following gallery shows the final responsive website in high fidelity.
Make what's important loud and clear
The registration flow has been designed for both visitors and members. The design of the icons makes it easy to spot, the colour scheme implies the sense of calm, and the layout was chosen to provide a way for the design to scale for future releases.
Minimal but informative
The following flow walks through all the landing pages. The layout follows a classic pattern as it suits the image of a public library. We aim to bring high-level comfort for universial users.
More fun, more engagement
Only member would be able to leave a review for books. After leaving the review, they would be rewarded with certain points. The concept is proven to be especially attractive for kids and teens for they can get their favoured objects by the gift card they received from the library.
Usability Test
The usability testing was conducted on the high-fidelity prototype to ensure the instant recovery and iteration. We were able to find several usability issues related to user affordances, layout and CTAs.
100%
found at least one major pain point
found the point system to be an enjoyable experience and concept
found the book review feature helpful
found the family account a useful feature
would recommend the site to others
60%
were able to complete all tasks
found it distracting to scroll through each page
30%
mentioned the point system was good but not the reason to use the site
Softening the rewarding system
From the feedback we gathered regarding the idea of reward system, we learned that adults and children have very different thoughts on this feature, the former revealed this would not be the reason they visit the website while the latter shows great interests. Therefore, the future of reward system should be inclined to children's sector to aid engagement and interaction from them.
Perfecting the CTAs to make website self-explanatory
Because the prototype was not fully clickable and responsive to all actions, some first time users find it confusing to finish the tasks the without guidance. Also, more call-to-action buttons can be added to help understanding in the future for next round testing.
Another round of testing session
It would have been better if we had more time to conduct another round of testing after we refine the prototype. Because only through constant iteration could a project be improved.