Tag Archives: user experience

UX and Web Technologies for the Music Librarian

At the 2024 Music Library Association (MLA) Conference, three-quarters of the MLA Web Team (Web Managers Karen Berry McCool and Kerry Carwile Masteller and Web Committee Co-Chair Laura Jacyna) gave a lightning talk presentation about various web platforms we’re using as we revamp the MLA website.

MLA’s web presence will be migrated in the near future from being hosted mostly on YourMembership (YM) to mostly or entirely on WordPress (WP). This is not an easy process, as it will include not just moving information, but also redesigning. The process will be very time-consuming, and requires a lot of decision-making that we need to do based on high-quality information. We’ll be using various tools as we make the transition; of course, YM and WP are two of these tools, but we’re going to focus on the newer-to-us, more supportive technologies.

First, there’s Figma, which calls itself “The Collaborative Interface Design Tool.” The possibilities with Figma are really endless; it can be used like Canva to design literally all kinds of things, but with even more granular options. It can be used like PhotoShop, but in a cloud-based, collaborative platform. There’s a whiteboard feature, where you can work with a team to draw, type, or create Post-it-style notes. According to their website, you can use it for anything from brainstorming or mind-mapping to strategic planning, concept mapping, or diagramming. So far, the Web Team has used it to do some wire-framing; in other words, we’ve recreated the menu structure of the website visually in Figma so that we can move things around, make comments and changes, and lay everything out so we can envision how to move forward. The screenshot below demonstrates how designers can collaborate when prototyping a design.

Figma's web interface.

Next is Jamboard (see screenshot below this paragraph), which many of you may have used before. We’ll be brief with this one, since we recently learned that Google is sunsetting it at the end of the year… It’s basically the whiteboard feature from Figma, where you can collaboratively arrange Post-its, text, and pictures on big rectangles. We’re using it as one option for card sorting (more on that later).

A Google Jamboard canvas, set up for a card sort activity based on a library website. A row of blue square notes identify categories, and a pile of yellow square notes show menu items to be sorted.

Padlet (see screenshot below) is pretty similar, although you can set it up in different ways so that it’s more like a whiteboard or a row of columns with cards underneath. Each item added to Padlet can be commented on by people with or without an account — Using someone’s Padlet without an account makes for anonymous comments. They seem to be limiting what you can do with a free account, but for the moment it can still be useful for collaborating and arranging ideas for free.

A Padlet canvas, set up for a card sort activity based on a library website. A row of tabs identifies categories, and a column of cards shows menu items to be sorted.

MLA is in the process of activating a paid subscription to UXtweak, where, like Figma, the possibilities are almost endless (though for user experience, or UX, testing, not necessarily design). There are options for preference tests, mobile testing, tree testing, surveys, and prototype testing, among lots of other things, in the free version alone. You’re limited to how many of each of the tests you can perform with the free version, which is why MLA is going to pay for a subscription for a limited time. I will once again mention card sorting, a research methodology that the three of us and Web Committee Co-Chair Woody Colahan presented on at the conference. This screenshot depicts a card sort in UXtweak in action:

A UXTweak online card sort session in progress, showing a user test to organize a list of fruits into user-created categories.

Finally, we’ve utilized something called XML-Sitemaps. This tool is what we’re going to utilize before we start user testing in earnest. According to their website, two of the other purposes of the site is to create something that will allow search engines to provide better results about your website, and to allow website visitors to navigate more easily. The MLA Web Team plans to use the tool to compile a list of all the pages on our website, displaying all of the pages that are publicly available at the time of the scan. Believe it or not, this is not something that YM is able to provide for us, despite being the service that hosts our website. By creating this list, we’ll be able to perform a full content audit, where we’ll figure out what we have, what’s redundant, what’s outdated, what can be deleted, and what we should definitely move forward onto the next version of the website. The screenshots below show two different ways that XML-Sitemaps can display your website information:

A spreadsheet of website URLs.
A hyperlinked hierarchical list of webpage titles.

There are some other tools that the Web Team is considering using, as well as others that we simply didn’t have time to present on. UX testing and website migration and redesign are complex tasks, so don’t go it alone! And the beauty of these tools is how versatile they are; these tools can be used for various research methodologies, (library) instruction, and even just for fun. Best of luck on all your projects!