From Mess to Success at Internet Librarian 2013


Published on

Foust discusses taking both a public and staff site from mess to success in a challenging environment with comments on new leadership, limited time, diverse staff in 10 locations, a library brand in flux, and a commitment to incorporating a full-scale social media integration. She shares tips on redesigns as well as lessons learned.

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Overview: Hi everyone, I’m Amanda Jacobs Foust, the Electronic Services Librarian for Marin County Free Library which serves a population of 139,000, with a 14 million dollar annual budget, circs over 2 million items annually with 100+ employees spread over 10 branches, a bookmobile and literacy program . Additionally we are part of a Marin County consortium: MARINet, which includes six city libraries and one University; serving an additional 100,000+ patrons.
  • Control of the site used to be much more centralized, with all page design and content being created by just a few staff members. We moved to a proprietary content management system (CMS), but found the cost too prohibitive and the limited use licenses restrictive Our early sites did not incorporate any interactive components andthe design was limited.
  • Amidst the development of the new website and rebranding project, I evaluated how other libraries were using social media, developed a Social Media rollout and Implementation Plan; which was approved by our Executive Team in early 2011 and I began building the sites. So here’s our plan, in it’s simplest terms: everyone has access and is encouraged to spend up to two hours per month developing and posting per their branch manager’s discretion.. We provided individual and group trainings at each branch location to familiarize staff with each of the platforms. We created tip sheets, controlled vocabulary lists for tags and labeling and step by step instructions. New Site: 11/2011Successes and Failures: When I took on the Electronic Services position, I knew I had a lot of work to do. My immediate predecessor was a role model for how not to do the job. I knew that re-doing the website would take a lot of time and energy and was prepared for obstacles, however, I underestimated the resistance staff would have for using social media. The Executive Team, who approved my rollout and implementation plan, only added one thing in anticipation of staff resistance, a committee, using the diagonal slice model, meaning we brought in a staffer from each committee and branch, as the implementation team and I remained optimistic.To describe me as naïve at this point would be an understatement. The idea behind the committee was to educate and train staff with the expectation that they would return to their branches and committees and spread their enthusiasm and training. Instead, it was inadvertently a group that wasn’t the least bit interested in social media or it’s value to our libraries. Our first three meetings were were dominated by staff objections to using social media. After six hours of discussion, I had to ban further discussion from the agenda, since we were the Implementation Team and that questions about why we were using social media had been thoroughly discussed and noted. Over time, we were able to overcome the initial negativity and get some work done. The committee developed project plans for each committee and branch, assisted in bringing MCFL under compliance of the County of Marin’s newly developed social media policy and procedure, developed the All-Staff Day presentation on social media and completed a statistical review of CA libraries with similar service populations and their social media usage. However, training the trainer wasn’t working and overwhelming, committee members felt that social media wasn’t their job. Maybe it was important and valuable, but someone else should do it. Instead, I relied on interns to develop training materials. Eventually, we started working together as a group and got some work done, but the continuing viewpoint of the majority was that the work related to implementation was the work of Electronic Services and not the committee.
  • For a project of this magnitude, it was essential to track and stay on top of the various tasks and deadlines involved with the redesign, including selecting our vendor. We received quite a few bids for the project. Our biggesttip: make sure that when you ask potential vendors for examples of websites, that you specify you’d like to see sites that were created for budgets in the same ballpark as your own. If the library missed a deadline to give feedback on a decision, this delayed the whole process. This proved challenging, as some of the turn-around times required by the vendor made it difficult to get responses from staff. We have many staff members who only work part-time, and so were not always available to weigh in on a decision.One thing that is not on the timeline is rebranding. The decision to rebrand was made more than 6 months into the new website process and was suppose to run parallel to the website project. Instead, we ultimately put the website on hold in order to complete the branding (during which time we worked on developing content)
  • The mother of all spreadsheets was a tool that many of us had decorating our workspaces. Every single section of the website was listed, with a column for each page, piece of content, type of content, and what was needed, as well as who was responsible, and the deadline. We were fortunate to have a staff member, Anna Jonsson, who kept track of the spreadsheet and recorded questions and concerns. As content was created, we submitted it to a group of proofreaders. There was a schedule for when our basic content for the website was due, and who was responsible for each section. Our pool of proofreaders vetted content for accuracy. We had to sort through all the existing content on the site and decide what to keep, what to re-write, what to wait on for later, what to drop, and what new content was needed. The Process: Google Docs (now Drive)As our system is spread across Marin County in 10 branches, we had to come up with a way to allow easy access to information and documents for many staff in different places. We needed staff to be able to upload and download documents, whenever and wherever they might be working.To expedite this process, we utilized a Google Drive account. We created folders for each section of the website, as well as allowing staff to create their own folders. We created a standardized formula for naming files which included the section, type of content, etc. This allowed us to keep track of files much more easily.We used Google Drive for everything from uploading staff photos to cheat sheets/instructions.
  • One of the major tasks early in the process was transmuting our website layout into wireframes.Every single page had to be “mocked up” with placeholders to signify the function of each area on the webpage, e.g. search box, carousel, blog feed, calendar feed, etc. Every link, every bit of navigation, had to be included. The page layout includes interface elements and navigational systems, and how they work together. Of course, this is just a lay-out of the structure of the site, and did not have design components—it focuses on what a page does, not what it looks like. Unfortunately, some staff felt disappointed when the actual web pages did not always exactly match the size relationships depicted in the wireframes. For example, some of the boxes became more rectangular when filled with content.Note: you’ll notice that our wireframes are quite detailed. Generally, wireframes are not made to that level of detail. However, in our case with such a fast-tracked process, our wireframes ended up serving double duty in developing and communicating many aspects of the site. The level of detail ended up becoming an essential tool in communicating our expectations both with the developers and with staff, and it was a document that we referred to constantly throughout the process.One tip– it was not immediately clear to us that library staff were responsible for actually creating the wireframes. Communicate with your vendor about tasks and get information in writing– this makes it easier for everyone to be on the same page. Keep your contract on hand and refer to it.The Process: WireframesIt was critical to have the staff involved in working on the mock-ups be intimately familiar with the components destined for each page. This means having the information about which items are buttons/links, text/links, image/links, what pages fit where in the hierarchy, etc. It ended up being a rather small number of people who had to crank out tons of pages, which represented a significant amount of time. We used GoMockingbird, which worked fine, though it did start to crash as our load of pages increased. Since we were all relative newbies to the design process, the underlying dynamic of the web design process utilizing wireframes was not well-understood by us at first. “The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.” Garrett, Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. ISBN 978-0-321-68865-1. Wireframing allows you to prototype the site and show the practicality of a design concept. Working with wireframes may be a collaborative effort since it bridges the information architecture to the visual design. Due to overlaps in these professional roles, conflicts may occur, making wireframing a controversial part of the design process.Wodtke, Christina; Govella, Austin (2009). Information Architecture: Blueprints for the Web, Second Edition. New Riders. ISBN 978-0-321-59199-9.Since wireframes signify a “bare bones” aesthetic, it is difficult for designers to assess how closely the wireframe needs to depict actual screen layouts. Brown, Dan M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders. ISBN 978-0-13-138539-9.Another difficulty with wireframes is that they don’t effectively display interactive details. Modern UI design incorporates various devices such as expanding panels, hover effects, and carousels that pose a challenge for 2-D diagrams. Brown, Dan M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders. ISBN 978-0-13-138539-9.The Process: WireframesOne of the elements of wireframes is interface design. We developed “user profiles” to help us design our pages and to anticipate how they would be used. We wanted to facilitate usability by the public, and this helped drive our choice of buttons, drop-down menus, etc. Garrett, Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. ISBN 978-0-321-68865-1. Another element is navigation design. Wireframes are also the way to look at the screen elements that allow users to move through the website. How do you see where you are? We had bread crumbs listed below our top nav tabs, but also a side navigation bar for the sub-pages in a section. Garrett, Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. ISBN 978-0-321-68865-1. And, of course, information design is the base for the entire website. How information is presented and placed and prioritized is how graphic design principles allow you to effectively display the information for clear communication. The focus should be on the goals and tasks of the user—this should determine how the elements are arranged. Garrett, Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. ISBN 978-0-321-68865-1.We continued to grapple with the intertwining of these three elements.
  • So here we see the final product! We have our colorful new logo located in this corner, with the coordinating colors carried throughout the site. We have dynamic and interactive carousels such as this one on many of the pages. We use photos we've taken and purchased some high quality stock images to keep the appearance or the site lively. Our new tabs use common language to break the site into clear sections in the hope that visitors will easily locate what they're looking for. We have a slideshow of our system-wide promotions in the top right here.
  • We wanted to be sure our site was built for people who use the internet. We kept web-standard formatting in mind during our design process. We included commonly accepted contents in ourfooter like Contact Us,Quick links, a site map, and a link to the county website. We've got all of our social media outlets available here as well.
  • Staff has been struggling to develop a repository for procedures, news updates, copies of commonly used forms and general bits of advice and tricks of the trade. A wiki was created for this purpose in 2009, but at the time, the technological divide among staff was too broad and many were either daunted or discouraged by the tool.
  • The intranet mimics the look of the public site. The Intranet’s homepage will display entries from an internal blog about upcoming product support, trainings, institutional changes and so forth, much of what is currently handled by emails being sent around and duplicated. The site is searchable. The Intranet: All staff will receive a login. A read-only account will exist for shared computers (and use at ref, children's, circ and check-in computers). Our new Intranet is now home to the entire organization policies and procedures, technical support, documentation and meeting minutes.
  • Brian’s example, turn negativity into a positive.
  • Try to communicate with a clear vocabulary so staff know when to panic.  Is the server down? Critical.  Is a link broken?  Not critical.  Promos up? not critical. Successes and Failures: Do yourself a favor, only worry about what you can control. Blog profiles? I only cared about getting a picture, if they wanted to hide behind a book, so be it. Also, you don’t have to understand how the technology works, just how to create content (Nicole’s example).
  • After the restrictive nature of our old site, it was important to us to have flexibility and creative options. Drupal uses open source, so the answers to your questions are out there. It uses WYSIWYG for content creation, so knowledge of HTML is not required to contribute to the site. It allows for unlimited logins, so everyone who needs one has an account. Content is distributed – enter once and things like blogs events can appear in multiple places. With experience, grander visions can be achieved as well as the easy maintenece of the basics.  That said, someone with Drupal experience is really handy to have. 
  • Spendsome money in places where it really makes a difference. Put a maintenance contract in your CMS for problems and questions that arise after delivery. Splurge on Photoshop – it’s sooo much easier than GIMP. If you do wireframing, pay for the Go Mockingbird Pro. For social media, get Flickr Pro and a Hootsuit account. Spend money when necessary to use stock photos. The little things you think you can work around to save money up front wind up taking so much more time and effort than you realize.
  • We strive to say yes whenever possible and use the following criteria for suggestions: is it technically feasible, can we maintain it and can we afford it? Failure is OK; expect it. Even though staff may expect and demand perfection. We strive to say yes whenever possible and use the following criteria for suggestions: is it technically feasible, can we maintain it and can we afford it?
  • What’s next?After launching the site in Nov. of 2011, we continue to work on how to maintain and nurture the site. I have set up staff and user surveys approximately 6 months after launch so we could get feedback. Overwhelmingly positive, we did get some comments that will allow us to focus on retooling a few sections and pages to make the site simpler to use and (we hope) more effective in engaging our public.Focus more attention on the quality of our social media, and having staff continue to create content for it, and engage our public through it. Empower staff to communicate more through social media.Continue to track usage of the site with Google Analytics so we can use data to help make decisions about the site. What are people looking at? What do they use? Keep abreast of changes in library styles, web developments, etc. Pinterest.
  • Thank you!
  • From Mess to Success at Internet Librarian 2013

    1. 1. FROM MESS TO SUCCESS Tips on Redesigning Websites October 28, 2013 Internet Librarian, Monterey, California Amanda Jacobs Foust Marin County Free Library
    3. 3. WEBSITE 2010
    6. 6. TIPS  During vendor selection, ask for examples of websites created with budgets approximate to your project  Technical support available to answer questions/verify concerns about needed server capacity  Create your own spreadsheets/notes on outstanding items and tasks  Confirm who is actually creating the wireframes for your project– you or the developer  Keep your contract on hand at all times and refer to it  Rebrand BEFORE you redesign
    11. 11. STAY POSITIVE Office Space
    15. 15. SAY YES AND ALSO EXPECT FAILURE Looney Tunes
    16. 16. WHAT’S NEXT?
    17. 17. QUESTIONS? Amanda Jacobs Foust, Electronic Services Librarian