Website Redesign going live and going Responsive

Well, I didn’t really post much about my library’s website redesign. But next week, we go live with it!

You can check it out now at our beta, pre-launch URL – dev.tscpl.org.

Here’s our go-live process:

  • Work on the site like crazy (we still have a big list of stuff to do!)
  • Today, we posted a head’s up to our customers, and asked them for feedback, too
  • We go live on January 29
  • Then, we’ll continue to tweak things as we notice them for 2-4 weeks.
  • Sometime after the big launch, we plan to have Influx take a peek, to catch stuff we missed.
  • Finally, we plan to do some usability testing to catch even MORE stuff we missed.

So, what’s new and different about our redesigned site? Quite a bit:

  • We went responsive, so one set of code works on all browsers and devices.
  • We have consolidated some of our blogs
  • Really worked hard on our links, our navigation, and directing people to the right content
  • Modern design, modern web fonts, white space, etc
  • On the back-end, we focused on letting WordPress do most of the work, instead of custom-coding. This will make things like sidebar widgets and pages MUCH easier for us to update

And probably much more that I’m missing. So go check it out!

Website Redesign Time!

My library is in the beginning stages of another website redesign. Our beginning thoughts were simply that we wanted to move to a responsive site design, to help out our mobile website visitors (hitting 20% and growing).

Then we realized all that back-end re-coding work pretty much meant a complete redesign. And there are some other things we want to address and improve, so doing a redesign makes sense.

I thought I might post once in awhile about the redesign process. Could be interesting…

What have we done so far?

  • I met with a group of customers, and asked them what they wanted in a website (see the image in this post for the notes on that session – here’s the Flickr link to it)
  • held some meetings with our Creative Group and our web team
  • created some early, rough draft mockups of the site – a main page, a blog post, and a mobile version of the main page.

Today, we kicked off a series of staff brainstorming meetings. In these meetings, I introduce the concept of responsive design, give some reasons why we are redesigning, and show off our mockups. Then, we brainstorm on these questions:

  • What do you like about the current website?
  • Where do customers get stuck when using the website?
  • What’s missing on our website?
  • What do you think can be improved?

Once these meetings are done, the next step will be to summarize the brainstorming sessions, and present that to our leadership team. Assuming that goes fine, then the website coding starts in earnest.

Should be a fun time!

Creative Briefs for the Website

Our Marketing department frequently uses a Creative Brief to plan the marketing and promotion process for events, services, and other stuff the library does.

Marketing and our web team meet weekly, and are part of a team we call our Creative Group (we’re big on team-based planning at the library).

So when we started redesigning our website, our friends in marketing suggested we use Creative Briefs to figure out some goals for the website, and the idea worked wonderfully.

Here’s what we did: we looked at every major section of the website – areas like About Us, Blogs, or Research – and went through our creative brief planning process for each.

We focused on these areas:

  • Purpose – what’s the purpose of this section of the website? For example, one purpose of the Research section is to connect customers to our databases.
  • Goals – slightly different and more specific than Purpose. Here, we set goals, like “We want a 20% increase in database usage in 2 years.” Or for our About Us section, it might be something like “we want fewer calls asking for our phone numbers” (since we now list out everyone’s phone number).
  • Primary Audience – Who’s the target audience? We try to choose 2-3 targets, usually based on market segments from a GIS study we’ve done (with help from Civic Technologies). This could also just be simple targets, like “the Kids pages focus on kids 8-12 years old.” This way, you can then focus the design and content on that target group.
  • Why Viewers use section – answer this question for the target audience – “Why would I want to go there?” For example, for the research section, the answer probably isn’t “because I want to find EbscoHost.” That answer focuses on the library. Answer this question by putting yourself into your customers’ heads. Do that, and the answers, more likely, resemble these: “I need to do research for my paper” or even better, “I want to get an A in History” or “I want to increase sales in my business for next year.” Then focus your design so those types of questions can be answered.
  • Tasks section accomplishes – This one is a bit more library-centric. What can you do here? List it out, then design those tasks to be as easy as using a light switch.
  • Content Requirements – What content do you need for this section? This isn’t a list of tasks – instead, it might include directions, explanations, links to more information, etc. You should also include any graphics needed here, too – graphics should support the content, and help make the main content easier to use.
  • Functionality Requirements – All the web stuff goes here – i.e., for a blog, you should list things like RSS and email subscription functionality. For the kids site, maybe you want things to move around on the page – list those ideas here. Basically, anything your web wizard needs to build.

Going though this process was great – it gave us some goals to shoot for on each section of the website, and helped make our redesign efforts more focused.

Here are a couple of articles with more info on creative briefs:

Anyone else use this or similar tools? Tell us what you do in the comments!

photo by insomnia

Our Website Redesign is Live!

My library – Topeka & Shawnee County Public Library – just released our redesigned website. Check it out!

Our new main page has three main sections that are easily seen in the graphic accompanying this post:

1. Featured Stuff. The top section is reserved for our featured stuff. We have one large featured area that can rotate with multiple . The goal there is to highlight on our 1-2 “Big, Important Things.” That could mean a library event, or it could be some new database we purchased.

There are also three smaller featured boxes that we’ll change up a bit more often. They’ll point to other cool stuff we’re doing.

And of course, the nav bar is in the top section. We went with a top horizonal nav bar this time around. It actually drops down and expands for more links (pretty much a copy of NPR‘s nav bar).

2. What’s Happening Now. The middle section highlights our content that changes often, namely our blog content and our programs. Most of this stuff, especially the blog posts, will disappear off the main page pretty fast, and that’s ok. it’s meant to hightlight “what’s happening now.”

3. Social Media. This is where we highlight our latest Twitter tweets, Youtube videos, flickr and Facebook Page.

Process:

This took us us a little over a year to complete – I started meeting with staff in February of 2010. I met with most of the library, and held some patron focus groups, too – then turned the notes from those meetings into a huge list of stuff we needed to change.

Then, we had quite a few decisions to make:

  • We had to decide how to handle content (more on that in a future post)
  • We needed to assign staff to content (still working on this one)
  • We needed to choose a CMS (we’re using WordPress this time around)
  • Visual design and navigation took awhile to get right, too

Our Creative Group (a team made up of our marketing department and our web developers) did most of this work … but the whole library helped in some way, too.

So yeah – it was a LOT of work … and it never really stops. We’re still cleaning stuff up, and will probably start tweaking pages in another week or so!