Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.
 

The Flipped Library Website : User Created Design for an Academic Library

In late Summer 2014, the State College of Florida asked users to draw what they wanted their website to look like. This is for the SpringyCamp 2015 "Building Better: Thursday, Nov. 19 Today is all about using Springy Tools to build a better user experie

The Flipped Website

The Flipped Library Website

Rhonda K. Kitchens, Digital Presence Librarian, State College of Florida

Video | References/Reading List | Tools

 

SLIDE 1:

This was the 3rd website revision I had done for the State College of Florida.  I wanted to get V2 going before Fall semester 2015.  

Instead of reproducing the same sections and links, I asked 10 Faculty and Students to draw me the perfect library landing page.  These weren’t just any 10.  I asked a Faculty person who was very technologically advanced who didn’t bring his students to Library instruction.  I asked student assistants who were often left handing the desk when Librarians were not available. I ask student assistants from other departments who made information referrals to us. I asked new students and returning students. I asked students that were technologically skilled and students who hated anything tech.  Then, I asked students coming to the desk about the drawings. I saw a common pattern and narrowed them down to 4 designs I would produce.  

A website I would produce in a month that was based on Bootstrap, which isn’t something I actually knew at the time.  

User driver design as skills development

 

SLIDES  2-4

Let me show you some of these ideas. 

I didn’t expect the feedback I received.  I know through a statewide Ask A Librarian program I had seen student’s struggling through lists and jargon. Sometimes I have a hard time with other library’s pages when I think in the context of a student’s search. 

They wanted images and pictures.  They wanted resources that were about them. They wanted to know….what they didn’t know.  They wanted movement and video. They desperately wanted a clean page that was simple.  At the most extreme end, a student just wanted a page with a search box like the Google page.

Almost uniformly, they wanted just one search box.

Once I produced these pages, I think circulated them to the Library Staff to get their feedback.  I carefully addressed each concern and idea so that five selected pages were reviewed by staff, Librarians at all levels, face to face with students and selected Faculty.

Then I did something a little different and used the test pages for when I worked on Ask A Librarian to get a real feel for the navigational advantages of each.

Faculty Idea:  Includes tablet-like images and video. Single Search.

Idea 2:  Student Assistant. Wanted more information specific to students, better navigation tools and images. Single search.

Idea 3: Library Assistant:  Slider with more color, left hand navigation of key user focused elements, link sections and single search.

 

SLIDE 5

This is what really helped me Bootstrap it up.  Bootsnipp.com.  I now treat it like Pinterest and save bootstrap code of objects I want to build.  I would find a vetted website element, pair it up with a Bootstrap component and learn how to build it.  

It became clear a navigation bar could do the heavy lifting to keep the site super clean.  User ideas, jargon and assignment lingo were used.

 

SLIDE 6: 

These are my major tools and influences for this transition from V1 to V2. Also, they allowed me to confidently move from out of the box vendor website to one we could control and gather valuable statistics from out users.  I have added information on the side tab to describe how I used each.

Tools:

Lynda.com

GetBootStrap.com

Bootsnipp.com

BeFunky.com

Unsplash.com

ColorCombos.com

Wave.webaim.org

Squarespace.com/templates

SmashingMagazine.com

 

SLIDE 7:

I measure student success in 3 ways.  

First, Ask A Librarian.  As Digital Presence Librarian I am usually the person signed on the most on this service.  On the day the page launched going into the Fall Semester I expected a lot of what I call “unintended consequences” to crop up.  We have the instant invite that pops up for students who stall on the page. 

There was silence. For weeks.  

Second, I have the Google Analytics page extension set up in Chrome, so as I go through pages, I can see how each element is working.

Third, there’s questions in our annual Libqual survey about online resources.

 

 

SLIDE 7: 

Google Analytics works on most elements of the Bootstrap based Navigation bar.

The next design I do will still absolutely be user driven.  The website I would have designed would not have looked like this.  It is important to take the time to see what our user’s see and how they sort through information and its context.