Sunday, April 11, 2010

Notes on the Website (re)Design Process

A book that can help you manage a website (re)design project is Web Redesign | Workflow That Works (see
The process offered in that book is broken down into the following phases:
1. Define the Project
2. Develop Site Structure
3. Design Visual Interfaces
4. Build & Integrate
5. Launch & Beyond

My primary interest in this post is discussion of phases 1 & 2 - defining the project & developing the site's structure. Do this correctly, and you will produce a very usable website. This group of ideas on how to (re)design your site doesn't include such important aspects as setting schedules & budgets, determining when you will need experts (& what type you will need), or anything of that nature. If you follow the Web ReDesign 2.0 process, all of these additional issues will be covered. But my discussion below is sort of an "off the top of my head" list of what you should do to get started planning your (re)design process. So if you have any ideas to add or refinements to make, feel free to comment here.

To start off, don't even think about the visual aspect of what your new site is going to look like... yet. Don't let other collaborators get you sucked into discussing a website that is "cool" or seems "clean". I wouldn't let anyone start wireframing or sketching prototypes. Not yet anyway. Instead, begin with some core concepts.
(BTW, when you do look at other sites, don't just look at comparative sites. The "pros" call this "competitive analysis". But I wouldn't base all of my decisions on other libraries' sites, as there are many library sites that are less than ideal and have never been tested for usability. So they are not necessarily the best guides for how design your site.)

Basically, we want to establish what are you trying to do with your site? What is your (re)design all about?

A. Know, learn, or clarify your organizational mission. The mission of your organization will guide your decision-making. Don't debate semantics of the terminology of a mission statement, but be clear as to what it is your organization is there for, what value it adds to the world.

B. Establish your web presence's mission & goals. What is the purpose of your website? What do your users want from you online? What do they expect? Make certain all collaborators understand the mission and goals.

C. List problem statements about your current site (for those redesigning)
1. Run usability tests with users representative of your general user population. It can be a fairly simple process. For example, prepare a few questions to test how easy it is for users to complete commonly-performed tasks on your site. Don't fail to do this - this may be the most important step you take in your redesign process. (You should also test prototypes of your site with users as you reach later phases of the redesign project.)
2. Look at your website analytics. Note high bounce rates (this is a statistic found in some web analytics tools, such as Google Analytics). High bounce rates can indicate that people coming to your pages are not finding the content they find valuable and are quickly leaving the page(s) in question.
3. Survey end-users / provide an open feedback area about the website & solicit their opinions & suggestions
4. Use checklists, like those found at and websitesthatsuck to help you understand what issues your site currently has and which ones are most important (& for a why you shouldn't let your website suck - see this article re: Websites That Suck Increase Stress)
- Common problems:
(1) Navigation - if you get navigation down correctly, that will fix 80% of all usability issues (per CT's Usability Professionals Association president, Michael Rawlins, whom I just took a great course with!)
(2) Terminology/translation of mental models - especially in library sites, it's not uncommon to see the use of acronyms that the library staff may understand but first time users of your library website will not. Have you tested your "labels" for things with real end-users? Do they know what you mean when you're referring to "ILL" or "Databases"? Research has been done on library terms that users understand, so you can find some suggestions for how to deal with this thorny issue. But always test it against your user population.

D. Create a content strategy (You will be guided by the mission & goals of your site, as well as by your survey results, usability testers' comments, and web usage statistics)
1. What type of content do you want on your site? What do users expect (& what do they expect to see on your home page)? Where do you add value? (We understand that there are limited resources for content creation & the number of sites providing content expands exponentially every day, so concentrate on content that you are best suited to providing. If there are alternative sites that do a good enough job on a given topic, you may simply want to point your users to those sites.) Keep the content in line with the mission and goals you established earlier.
2. Who should create and maintain your website? How much should be posted and how often should it be renewed and reviewed? What's your plan for "weeding" the website of outdated/outmoded pages?
3. (for redesign) What content do you have up on your site now? What's most used? What's least used? What has a high bounce rate (which can mean that there's a problem with the page)? How recently has the content been maintained? How usable & accessible is it? Is it designed for the web (e.g., writing in bulleted phrases, instead of long paragraphs... in active voice... web-friendly, non-proprietary file formats used for images and multimedia)?
- If you aren't currently running an analytics tool or web log analysis software of any type, you really should add that, ASAP. Otherwise, you're building in the dark.
4. (for redesign) Inventory of your web assets/online customer touchpoints? For libraries, there can be a lot of these. Ideally, you'd be able to make them work together to provide a seamless and easy experience for the end-user, but that's rarely possible. Still, you should have an inventory of these assets (e.g., your catalog, digital collections, databases). Web2.0 tools make it easy for staff to post content (e.g., to, blogs, flickr, Facebook, Twitter, etc.) - but do you know what they've put online, where that material is and how/whether you can integrate the use of those tools with your regular website (or whether you'll have to migrate the content into the regular website)?
5. (for redesign) Which content will you want to migrate over to the new site? Which content will you have to create fresh (& who will create it)?

E. List your website's requirements
1. What features & functions should the website offer? (What tasks can the user do at your website? e.g., find out the hours of your physical location, buy something online, search the site for user-supplied keyword(s) or phrases...)
2. What are the site qualities you want to ensure?
for example:
- mobility (it works well on mobile devices. More users access the internet through mobile devices than by computer, so this is important)
- accessibility (legally, there are requirements that your website is accessible to users with visual and physical disabilities.)
- findability (search engine optimization has been done to ensure that your pages are easily found at the top of the search results list when relevant searches are conducted.. that it is easy to find information once on the site (e.g., you have a good, persistent/easily found site search engine as well as excellent navigation and bookmarking capabilities)
3. What should the back-end (admin and authoring) processes look like? (this will help you to choose an appropriate content management system or website publishing methodology)

F. List objectives for the site - measures for success of your (re)design project.
1. Increase number of site visits by x% - from X to Y
2. Lower bounce rate for various pages
3. Ensure that at least three posts or articles are put up about the organization every week
4. Move the site from a lower position in Google search results to a higher position when searching on a given phrase
5. Usability tests show that all participants can perform the allotted tasks within the allotted time.
6. Reduction in the number of phone calls to help with features of the website or to learn information that can be found on the site.

The planning is the most important part of the process. You'll need to take further steps to move toward completion of your website (re)design. Some deliverables you may produce during the planning process may include (each one of these could be a whole post unto itself, so I won't go into detail here, I just want you to be aware of these terms & concepts):
- site maps that demonstrate your site architecture
(usability tests: testing the planned architecture, navigation, and terminology/labeling against users' mental models using card sorting, for example and prototypes.)
- system flow diagrams - flow charts of how users will go through tasks on your site (e.g., booking a room reservation)
- wireframing/prototyping - you can use a number of tools, including simple sketching, to wireframe (create a mockup of various pages or a storyboard of a series of pages) your site & test people's reactions to the wireframes when laying out pages.

Finally, I should add that each one of the challenges you face - whether it's related to project management or how specifically to create a given function (e.g., design patterns for when/where/why/how to use web page elements like drop-down boxes) - has been faced by other webmasters. Standardized solutions have been developed, such as design patterns and tools like layout grids, content management system themes/templates, color scheme generators, and so on can be used, often at no cost. You should use them instead of reinventing the wheel. After all, you've got enough to do already!

My bookmarks for website design / usability:

No comments: