Day 1 - A Very Springy Web Makeover

Springy_Will · 2023-07-24T21:09:17+00:00

There was an error rendering this rich post.

Session information: https://training.springshare.com/springycamp/2023/very-springy-web-makeover

Hekman Library successfully redesigned its website using Springshare platforms, despite constraints in time, staff, and budget. The focus of this presentation is the Homepage makeover. We utilized LibGuides CMS for design and user testing, LibCal for displaying department hours and space reservations, LibWizard for user input, and LibAnswers/LibChat for FAQs and 24/7 chat support. Throughout the process, we prioritized user feedback through usability research with 70 participants. Join us to learn the how-tos and discover how you can achieve similar results for your web pages with limited time, staff, or resources.

Have any questions for Brian Holda?

Post them here! 💬

Find more posts tagged with

LibGuides

springycamp

springycamp2023

Comments

Groomej

can you talk a bit more about Full Story tool?

Springy_Meg

Here are a couple questions for Brian that we didn't have time for in the presentation:

Amanda asks: I’d love to hear a little bit about your implementation plan/project management for putting all these pieces together.
KST30 asks: Any issues with one person editing, then a second person changing it back? Or do people "own" specific areas?
Shane asks: How do you deal with everyone having different “ideas” for the website makeover?

brianholda

@Groomej ~
Glad you asked about FullStory! I don't think it gets nearly the press it should, as I find it very helpful to make evidence-based web decisions (more so than Google Analytics).

You can use the free version and they have a code snippet to copy and paste into your website (the way you do Google Analytics).

Then it starts collecting data, and will e-mail you weekly/monthly to give high-level information. To get the most information, you'll want to login to your account on their site. I find the video playbacks the most useful. You can actually specify to look only at a certain page or if users do a certain thing, then it will give you videos of users using your site. I LOVE watching the videos [insert popcorn emoji :)]. In a matter of minutes I can get an idea of what real users are doing on our site and where we might need to change things.

Does that answer?

Brian

Cybrarian

@brianholda Thank you so much for sharing your code. I was going to ask how you styled the Hours widget. I am still struggling with using that in a beneficial way. I'm never sure what I need to copy from the widgets page. I will keep trying - with your code help.

Thanks!

brianholda

Answering Amanda's question: I’d love to hear a little bit about your implementation plan/project management for putting all these pieces together.

Great question!
I think that's where it was helpful to see what users were currently doing and what we wanted them to do (the "Evaluate" part of my presentation). Then I got out the pencil and paper and tried to dream up some designs. A philosophy I go by is that it's better to make incremental changes (to avoid user whiplash) than major changes. So, for instance, if our current page has hours, we shouldn't totally remove it from the new page (unless we had good user-data to make such a drastic change). This really helped guide our makeover design.

So once we did the pencil-paper design based on all this, we looked for ways to build content based on what we have at our disposal. So libcal became a natural fit for hours, libanswers for chat, etc.

I made a lot of those decisions, but included a web team where we discussed altogether what's working and what needs to be changed.

Does that make sense? Sorry if I didn't answer, please let me know and I'll try to give it another shot if so.

Brian

brianholda

KST30 asks: Any issues with one person editing, then a second person changing it back? Or do people "own" specific areas?

Another great question - thanks KST30!

Thankfully, roles have been fairly clearly communicated, and so even though (in theory) many staff members could edit the content, they are careful to "stay in their lanes" so to speak. This means: I/web team make larger look and feel decisions for our Springshare apps; others are more in charge of content. I believe in "over-communicating" wherever there is gray area, and we have a highly collaborative team, so it works with our culture.

PLUS: There are regular backups made of our content (and if we got in a real pinch, Springshare has been gracious to help restore content on those very rare occasions). Therefore, I'd rather give staff the ability to learn and fail rather than micromanage. Though I might only let them be an admin for certain groups at a time to help them not accidentally do something they/we all regret later ;)

Does that answer your question?

Thanks,

Brian

brianholda

Shane asks: How do you deal with everyone having different “ideas” for the website makeover?

Another great question! 2 things were decided from the get-go:

There was a web team (4 of us) to make final decisions on website makeover. This is probably as big (or even bigger) than I'd typically recommend because of how many opinions fly.
We were going to make user-testing a priority so when there were disagreements we'd agree to settle it based on existing web usability research OR (even better) research we do with users to see what was the most helpful. User research is a great referee of such things!

I think those 2 things make decision-making much smoother :)

Brian

Springy_Meg

Thanks so much for your stellar presentation, @brianholda, and for following up with the questions here! FullStory sounds awesome — thanks for sharing about that (and everything else, too!). 🤩

brianholda

@Cybrarian ~ Sounds like you found my code for the hours widget.

Bummer you haven't got it to work.

Here's what I do to get the widget:

Login to libcal's admin interface
Click "Admin"
Click "Hours"
Click "Widgets"
Use "Today's Hours" widget, and Request Format as Javascript

Then the rest of my code should work (just replacing your unique widget ID where mine is referenced in the code).

Does that get you there?

Brian

kclaunch

Hi Brian, this was a great presentation and I really liked your comment to Shane about having a limited number on the team due to differences of opinion. I also really appreciate the suggestion to use statistics to help referee the decisions. I have had a similar experience and will try to remember that for future team projects.

rahalberg

@brianholda Are there any tutorials on how to use FullStory Free Edition that you found helpful as you worked with the analytics to evaluate your website?

Cybrarian

@brianholda Your code really helped. 😎 I DID get it to work a little bit more than before. I am in the process of tweaking and have not decided how to deploy it just yet.

Thanks for your code! I will keep tweaking. 😊

Cybrarian

@brianholda and anyone else. I really like how they have styled this one: https://www.bmcc.cuny.edu/library/

If anyone has any insights into how they did it and what "code" they used, I would love to know. Too much javascript or other things that I am just not as confident with. I don't know what to look for or make changes to.

Thanks!

Cybrarian

@brianholda Ok. Maybe one more question. I don't think this part of the code is working for me.

        //insert day of week

        const today = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][(new Date()).getDay()];

        $(`tr.loc19460 th.hours-col-loc`).text(today);

Is that supposed to put the day Name in place of the location name? If so, our location name is still there. What changes do I need to make to the code? And where do I find the "loc19460" code for us?

I like the styling and I can figure that part out.

Thanks!

brianholda

@rahalberg ~
I do not recall using any FullStory tutorials. Sorry. Thankfully, I found their interface very user-friendly and intuitive. I've only mainly used the following:

video playback - Click on "Segments" from the left-hand panel and it shows pre-selected segments you can watch. Or you can create your own Segment by clicking "Everyone" (under Segments), and then add your filters and save it as your own segment.

rahalberg

@brianholda Thank you! I've been exploring FullStory now that I have it tracking our site, and I found the playbacks really helpful as well as the heatmaps. Thank you for sharing. I've been looking for a better way to track this type of usage, and this was a great tidbit to glean from your presentation.

brianholda

@Cybrarian ~

Sorry it's been a bit difficult to make work.

You'll want to inspect the HTML spit out by your widget and look for something that looks like this:

<tr class="hours-alt hours-today-row hours-library loc19460">

            <th class="hours-col-loc">

                                    <a href="https://library.calvin.edu" target="_blank">Hekman Library</a>

                            </th>

You'll notice on ours they assigned the class-name of loc19460. But on yours it will be different. So you can replace my loc19460 with the one you have on yours. Does that get you there?

Brian