.gif?table=block&id=3f48cf41-6adc-4743-bd48-c1f4cb33f75b&cache=v2)
Leading the integration and improving the discovery experience of LOC Stacks, Catalog, and Loc.gov as the Integrated Library System (ILS) for the UMD iConsultancy
Introduction
The Challenge How might we improve users discovery experience while navigating the Library of Congress platforms (Loc.gov, LOC Catalog, and Stacks).
📋 Overview
The Library of Congress (LOC) is embarking on a multi-year project in collaboration with the UMD iConsultancy to replace its integrated library system, which includes the main page (loc.gov), the catalog, and Stacks. LOC would like to better understand the user experience that patrons have with the existing ILS, specifically the discovery layer, and develop design concepts based on this research. To help LOC achieve these objectives, we are performing five design sprints - iterative cycles of research, design, and evaluation - to ideate and generate product concepts and high-level designs, and create a clickable prototype of the redesign.
📋 Goal
The ultimate objective is to enhance users' discovery experience when navigating between loc.gov, the
LOC catalog, and Stacks. This will be achieved by refining the presentation of various functionalities,
guiding the users to the appropriate platform that caters to their specific requirements.
Replace the LOC integrated library system (ILS)
Better understand patron’s user experience with the existing ILS
Develop design concepts based on this research
Dividing our long-term goal into five sprints ensures improving user discovery. Each sprint focuses on developing specific components, ensuring attention to detail and enhancing the user experience. Continuous feedback refinement keeps us on track towards our goal.
⚔️ Competitive Analysis
We did a competitive analysis with 4 direct (JSTOR, NASA, EBSCO, British Library) and 1 indirect (Wikipedia) competitor to understand more about the industry and requirements for the platforms.
This analysis was done for all LOC platforms and is used across all five sprints.
🎨 Style Guide and Component Library
We have established a style guide that outlines specific fonts and colors to ensure consistency across all of our designs. Additionally, we have developed a component library, which allows us to streamline the design process and maintain a high level of consistency throughout all of our projects. By implementing these tools, create designs that not only look professional, but are also efficient and effective in achieving our goals.
The Design Sprint Process
We will be using The Design Sprint to work through our client's needs. The sprint requires a team with specific roles and schedules to go through the problem, research, solutions, prototyping, and testing. The goal of a design sprint is to create and test possible solutions for a problem in a limited period of time. A description of each step in the sprint is listed below, as well as a link to the official design sprint guide.
Stacks
11.07.2022 → 12.09.2022
As the Visual Designer for the Stacks System, my responsibilities included creating and adhering to a comprehensive style and brand guide for the entire ILS system. Working alongside the UX Designer, I facilitated brainstorming sessions to generate innovative ideas and developed visual concepts that aligned with the established guidelines. I also collaborated with researchers to ensure their needs were successfully integrated into the design.
Challenge How might we improve users discovery experience while navigating the Library of Congress platforms?
🤔 Key Questions Mapping
❓ How Might We Mapping
🔄 User Flow & Pain Points Mapping
→ Poor visual design and visualizations, creating little enticement for users
→ No interaction for Stacks at a Glance
→ Lack of queue, resulting in users not being able to easily access currently unavailable resources
⚡ Lightning Demos Sketching
⚔️ Sketches & Stakeholder Ideas Deciding
Based on stakeholder input, we identified the following necessities for our prototype:
→ Stacks: Side titles search needs to be reworked
→ Data Sorting: Figure out optimum data sorting
→ Visualizations: Optimize order for clarity and relationships
📖 Storyboard Prototyping
I was responsible for drawing the storyboard for the Stacks system. I collaborated with my team to
brainstorm ideas and concepts that we wanted to incorporate . Through collaboration, we discussed goals, user experience, and key features. Team suggestions were incorporated into a visually appealing and comprehensive storyboard, serving as a valuable reference for proper platform implementation.
🗒 Low Fidelity Prototype Prototyping
🤔 User Needs Testing
We collected qualitative data via three expert interviews and prototype tests. We created two affinity diagrams and two user journey maps based on our expert prototype testing and contextual interviews.
CRS Researchers want efficiency
- Efficient info retrieval under deadlines
- Speed up search with external resources
- Maintain focus by minimizing system switching unless essential.
Casual Users wants differentiation
- Differentiate between LOC systems
- Direct users to suitable search systems through a clear discovery layer.
- Clear and concise search results.
⚖️ Balancing Aesthetics & Usability Key Takeaways
We overcame limited system access to create a highly functional and visually appealing Stacks platform. The use of data visualization designs enhances user exploration and engagement. Throughout the development process, I learned the importance of intuitive layouts, considering visual aesthetics and usability, and prioritizing accessibility for all users. Developing the Stacks platform was both challenging and rewarding, resulting in a user-friendly, visually appealing, and accessible platform. These valuable lessons shape future projects, emphasizing collaboration, creativity, and attention to detail in digital platform development.
Catalog
09.19.2022 → 10.27.2022 and 01.26.2023 → 02.23.2023
As the Project Manager of the Catalog System, I oversaw the planning, organization, and direction of the project's completion. Working closely with the client, I ensured that our work was delivered within the specified timeframe and met the agreed-upon scope.
Challenge Create a visually organized Catalog homepage that clarifies navigations without endless clicking.
🤔 Key Questions Mapping
Will we have time to distill research insights?
❓ How Might We Mapping
HMW detangle the system based on feedback…
🔄 User Flow & Pain Points Mapping
→ The home page lacks appeal and informative content
→ Inaccurate results necessitated scrolling, lacking clear catalog guidance.
→ Cannot use resources without registration but registration is inaccessible
→ No clear guidance about how to use the catalogs and why
⚡ Lightning Demos Sketching
Google Drive → Expandable menu on umbrella platform
Wikipedia → Homepage with varying extensions
NASA → Visualization showing contents of the database
EBSCO → Option to filter the search eliminates display
British Library → Explanation of people’s expectations
JSTOR → Search categories for narrowed search
⚔️ Solution Sketches Deciding
💡 Stakeholder Ideas Deciding
Based on stakeholder input, we identified the following necessities for our prototype:
→ Search Facets allows for narrowing input/output
→ Screen Reader friendly with an introduction
→ Actively updated resources statistics
→ “I am, I need” search function tailored to users
→ Featured Section updated with statistics
→ Interactive database exploration for users
📖 Storyboard Prototype
I worked closely with the team to develop a visually compelling storyboard that was both engaging and user-friendly. This involved guiding the design process, including overseeing the prototyping and creation of the layout structure. I worked to ensure that all design elements were in line with our overall vision and goals, and that they resonated with our target audience.
In addition to my supervisory role, I also took on the important task of ensuring that our style guide
was followed and that our designs remained consistent across all platforms. This involved careful review and editing of all design elements to ensure that they met our established standards and guidelines.
By maintaining consistency in our designs, we were able to work towards create a cohesive and user- friendly experience for our users, regardless of where users accessed the catalog system.
💬 Concept Suggestions Testing
We completed user testing to get feedback on the prototype and carried out three user Interviews. Using the affinity notes we created with information from the feedback, we created two affinity diagrams as well as a persona. We gained the following insight and suggestions:
Suggestions Contextual Interviews
Mental Models →
Accurate descriptions of resources and search result ranking are essential for ILS usability.
On Loc.Gov →
Enhance navigation, define categories, and provide explanation for ranking for search.
On the Catalog →
Include a welcome section, category link, filter sidebar, and optimize "Quick Search.”
Suggestions Prototype Testing
Accessibility →
Signifiers should have at least two differentiating factors for accessibility.
Consistency →
Use familiar terms and ensure design consistency to meet user expectations.
Guidance →
Clear guidance enhances feature use and the overall user experience.
🧑🏿🤝🧑🏻 User Centered & Intuitive Design Key Takeaways
To enhance the user experience, I referred to extensive research to address common obstacles users face. Misconceptions about system functionality and navigation were identified as a main challenge. To overcome this, a user-centered approach was adopted, aligning with mental models and ensuring an intuitive experience. Emphasizing simplicity and usability, the design approach prioritized user experience. The result is a user-friendly system, accessible to a wider range of users, with a clear path to success. This user-centered approach will guide future design efforts, ensuring confident navigation and system utilization.
Loc.gov
02.27.2023 → 04.03.2023
As Lead UXUI Designer, my role involved storyboarding and implementing a prototype that aligned with the proposed objectives. I ensured the design was user-friendly and single handedly incorporated necessary revisions based on the research team's findings to meet our target audience's needs and preferences.
Challenge Create clear and visually-appealing layouts to show activities/services,
differentiate search systems, and explain available resources to users in a non-intrusive way.
🤔 Key Questions Mapping
How can we create clear navigation to resources without making the page overwhelming?
❓ How Might We Mapping
How might we create a visual layout … without overwhelming the users with the information?
🔄 User Flow & Paint Points Mapping
→ Incorrect mental models of the navigation bar caused users to stop searching or turn to Google, assuming they had seen all search results or that the results included the entire LOC catalog.
→ Users don’t try and bypass LOC's search function and rely on external search engines like Google, Google Scholar, or Amazon Books by adding "LOC" to their keywords in order to find results.
→ Users with the correct mental model struggle with the explore functions due to information overload and images. Searching for collections exposes our platform's limitations.
⚡ Lightning Demos Sketching
The British Library → choose between search in library website or catalog
Westerville Public Library → explicitly state parameters users are searching within
HM Magazine → contextual labeling of search bar w/ interesting quick-links
GE → integrated dashboard with brief descriptions of each service
⚔️ Solution Sketches Decide
Based on stakeholder input, we identified the following necessities for our prototype:
→ "Search in" is very friendly and concise → → Should be more utilitarian
→ Highlight visuals for search results, and balance visuals with the textual data to make comprehensive
→ New homepage should show frequent updates and be made a living page
📖 Storyboard Prototyping
After collaborating with Jocelyn Sun, I took on the task of designing the Loc.gov homepage, incorporating Stacks and Catalog elements for easy recognition and navigation. Creating the Events section was challenging, but I developed an interactive grid and list for enhanced user experience. The intuitive design encourages quick browsing and engagement, making the section dynamic and enticing for users to explore.
We designed an ILS page (storyboard 2) initially but couldn't continue due to time and resource constraints.
🗒 Mid Fidelity Prototype Prototyping
Rounds One and Two Testing
This sprint, we did two rounds of testing to ensure we could receive and incorporate as much feedback as possible into our final prototype. Round one was done with the sketch & low fidelity prototype, and Round Two was done with the mid fidelity.
Round One Testing
🗒 User Interviews + Card sorting
Testing the prototype & contextual inquiries
→ 40% of users expected to find information about the Library’s location and logistics in the
“About” section in the header
→ 80% of users expressed that they wanted the daily hours as well as location of the LOC in the
page footer
→ In the search bar portion with “I need help” , 40% of users expected to find “Ask a Librarian”
→ 40% of our users expected to find information about the LOC history and what is does in the
hero image
After conducting preliminary design testing (Prototype Draft Testing - Tasks), we received positive
feedback on our navigation bar. Testers successfully completed the discovery tasks using it,
indicating that it was effective. Users also expressed and demonstrated that their discovery
experience was improved with the addition of the bottom navigation footer, which acted as a site
map and provided clear navigational information. This allowed us more flexibility in what
information is displayed in the top navigation bar, as we could prioritize the most frequently
accessed and guiding information. Moving forward, we will aim to ensure that the most important
information is given the highest priority, based on user needs and feedback.
In our preliminary design testing (Prototype Draft Testing - Card Sorting), we used MaxDiff Analysis
to gain insight into users' priorities for the content we provided. This analysis helped us better
understand which elements of our design were most important to users and informed our decision-
making moving forward. By leveraging this method, we were able to gather meaningful data that
guided our design choices and helped us create a user-centered product.
📝 Contextual Findings
Visually with screenshots from the prototype
Of Our Users...
→ 80% of the users used the general search bar when asked to search within the library catalog
→ 60% of users expressed they want to see more options in the nav bar (eg.drop down format)
→ 10% of users liked the image usage and felt they seemed authentic
All Users:
→ All users liked the general layout of the current loc.gov homepage
→ All users them scrolled past the Event Section when asked to find events happening in the later
weeks → no title
→ All users expect to see information related to a Library of Congress visit at the top ( eg. hours,
location, booking passes, reading rooms availability)
→ All users preferred that the navigation bar was located above the image carousel
General
→ Overall navigation and discoverability is weak → not friendly to the general public
→ The LOC address and hours were expected to be displayed in the page footer
Round Two Testing
🔍 Search Bar/Header User Feedback
→ the names on the nav bar is confusing (need to consult with UX writer for improvement)
→ inconsistency in menu (4 drop downs, need to edit about to differentiate OR add drop down)
→ difficult for users to differentiate between dropdown and search bar (edit menu color)
💡 Featured & Catalog User Feedback
→ “view all events” button is not salient enough and does not appear clickable (edit color/button to improve make more intuitive)
→ event section is only seen when users scroll (this cannot be remedied, as it is only the 3rd item on
the page)
⬇ Footer User Feedback
→ The LOC address and hours were expected to be displayed in the page footer
→ information can be condensed (bottom 3 options on the 2nd column are related)
→ wants consistency with social media icon colors (not needed, as we use their branding colors)
→ more prominent “subscribe to newsletter” needed (will be emphasized in footer OR moved to
header)
🗒 UX Copy + Information Architecture Key Takeaways
During Catalog and Stacks development, placeholder text was used due to limited time and resources. This allowed for creativity but delayed practical considerations. Working with loc.gov's architecture emphasized the significance of information architecture for user navigation. To ensure alignment with the Library of Congress' brand and guide users effectively, a UX Writer will be involved in shaping the content's tone. This collaboration aims to create a cohesive and user-friendly product for the target audience.
Integration
04.07.2023 → 05.12.2023
As the Project Manager, I assumed responsibility for the seamless integration of three systems. Utilizing Miro and Figma, I meticulously organized and finalized our deliverables, and confidently led the final handoff of these deliverables to the client.
Challenge Final handoff for effectively integrate the three library systems and optimize their navigation to enhance users' discovery experience.
💡 Miro / Research and Design Sprint Process
Over the course of the past seven months, our team has been utilizing Miro, a collaborative online whiteboard platform, to effectively organize and manage our sprints. I was tasked with the responsibility of overseeing the process of streamlining our procedures and ensuring that our client could easily access and retrieve the information they required.
The Breakdown:
- Established an organized, succinct structure to arrange the research findings.
- Supplied an all-inclusive summary of the advancement made and key insights gained.
- Utilized straightforward language and visual aids to communicate intricate ideas.
- Furnished the client with a complete and thorough summary of the project.
I dedicated myself to creating a clear and concise organizational structure for our research findings. Through a meticulous categorization process, I divided all of our discoveries into different stages and sub-stages, providing a comprehensive overview of our progress and key insights
In addition to this, I ensured that all of the information we gathered was presented in an easy-to-understand manner, using clear language and visual aids to convey complex ideas and concepts. I aimed to provide our client with a comprehensive and detailed overview of our work, allowing them to make informed decisions and take proactive steps towards achieving their goals.
💬 Figma / Designs and Interactive Prototype
As the project manager for the Loc.gov System and Integration Process , I oversaw the entire project from its conception to completion. In addition to my management role, I also served as the lead visual and UI designer for all sprints. With this dual role, I was able to ensure that both the design and development aspects of the project were being handled smoothly and efficiently.
Throughout the integration process, my team and I conducted multiple rounds of testing and research to gather feedback on our designs and prototypes. We meticulously evaluated all feedback received, making necessary edits to our designs to improve their functionality and overall user experience. I was particularly focused on ensuring that the designs were not only visually appealing but also intuitive and user-friendly. Once the feedback had been collected and the necessary changes made, it was up to my team members to implement these changes.
As the lead visual designer, it was my responsibility to:
- Ensure that designs adhered to established branding guidelines
- Collaborate with stakeholders to prioritize accessible and user-friendly visual elements
- Establish a set of guidelines for all future designs and implementations
- Solidify design system and style guide for consistent, efficient design with fewer errors
- Achieve a more cohesive and professional look and feel for the project
💬 Google Drive / Reports and Logistic
Our presentations offer a thorough look into our design process, emphasizing the research and iterative methodology we employed in sprints 1-5 for each LOC system. Our goal is to showcase our user-friendly designs and provide a clear understanding of our process and successful outcomes.
As the person responsible for organizing the content of our final presentation and client handoff, I had to consider several factors to ensure that each slide contained relevant and useful information.
🔎 Content Evaluation
I began by reviewing the research we conducted and the iterative design approach we employed, and then carefully selected the most important and impactful findings to include in the presentation. This involved evaluating the effectiveness of each finding and determining how it could best be presented.
🧑🎨 Aesthetics & Organization
Once I had organized the content, I worked on establishing an aesthetic that would accurately reflect our design vision. This included selecting appropriate fonts, colors, and imagery that would help to convey our message effectively. I also made sure that the visual elements of each slide were consistent with our prototype, creating a cohesive and professional look that would resonate with our audience.
In addition to creating a visually appealing presentation, I implemented seamless animations to help emphasize key points and keep the audience engaged. These animations were carefully selected and timed to enhance the overall flow and impact of the presentation.
⌛ Time Management
To ensure that our presentations were completed on time, I delegated roles to team members and established a timeline for completion. This involved assigning specific tasks to each team member and setting clear deadlines to ensure that everything was completed in a timely manner. I also oversaw the finalization of the presentations, making sure that all information was accurate and relevant and that the presentations were ready for presentation to the client.
🗒 Lessons for the Future Task Delegation & Feedback
During this sprint, our team was faced with a daunting challenge - an overwhelming amount of work that needed to be completed within a very tight deadline. As a team, we knew that we had to be efficient and productive in order to deliver the project on time. To help us achieve this, I implemented a strict and straightforward work delegation system that assigned specific tasks to each team member.
As the project manager, I recognized that it was my responsibility to ensure that every team member was contributing equally and making progress towards the project's goals. I understood that every individual had their own unique strengths and skill sets, and that it was important to leverage these skills in a way that benefited the team as a whole.
To achieve a fair and equal distribution of tasks, I carefully monitored each team member's progress and provided constructive feedback and criticism that helped them improve without feeling discouraged. I made sure to communicate clearly and respectfully, highlighting areas of strength and offering suggestions for improvement. I also made myself available to answer questions and provide guidance when needed.
Through this experience, I learned that effective communication is essential for successful teamwork. I also learned that fairness and equality are key components of a productive team dynamic. By ensuring that every team member had an opportunity to contribute their skills and expertise, we were able to work together seamlessly and achieve our goals within the tight deadline. Overall, this sprint taught me valuable lessons about leadership, teamwork, and effective communication that I will carry with me throughout my career.
The Final Product
Complete Interactive Prototype & Designs
