1. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 1 Information Architecture Institute Redesign Deliverables Documentation: Home Page Redesign Concept 2006 Homepage Design 2007 Homepage Redesign 2008 Homepage Redesign Mailing List Integration Mailman standard design 2008 Mailing List Redesign List of Services Provided

2. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 2 Home Page Redesign Concept The Information Architecture Institute (IA Institute) is a non-profit, volunteer organization dedicated to advancing and promoting information architecture. The goal of the Institute is to support individuals and organizations specializing in the design and construction of shared information environments, through networking opportunities, volunteer projects, mentoring, and online tools and resources. The Website. The IA Institute website provides information and resource materials about Information Architecture as well as member-oriented tools and services, such as networking opportunities, a job board, mentoring resources and partner services and discounts. Challenge. A badly needed redesign of the IA Institute website was implemented in 2006, without controls on the placement and quantity of information on the home page. In January 2008, when the Institute was about to release an editorial insert in Fortune Magazine, its cluttered home page did not showcase a clear message about Information Architecture that would be consumable by a general business audience. The Institute also found that its Partners wanted more prominent placement on the home page, as required in its standard agreements. News and event information were crucial components, but its placement could not compromise our commitment to our partners and to site users. Finally, the redesign needed to work with our limited technological resources, but be flexible enough to anticipate future technology improvements. Solution. A user-centered approach to information display provides a clearer route to information that a given website user requires. Three user groups were identified including a. people who are interested in learning about Information Architecture, b. those who currently practice Information Architecture and c. those who hire and manage Information Architecture professionals. These groups now have prominent placement under the site masthead, with suggested starter links to deeper pages of interest. Partner information and IA Institute sponsored events have a strong placement without the need to scroll. News moved to the center of the page with a wider box. This allowed the Calendar section to expand to include featured partner event logos. A final space on the right column now offers the Institute space to highlight its own events and publications.

3. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 3 2003 Homepage Design In 2006, the IA Institute website had changed very little since the organization’s founding in 2001. A growing list of services and a bland visual design led to a clunky and uninteresting user experience. As Operations Manager for the Institute I was tasked with creating a more dynamic, action- based website, that would allow new and practicing Information Architects access to our new member database, member services and to promote membership in general. We solicited help from Institute members to create a new visual design and site concept. At left is the old design.

4. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 4 2006 Homepage Redesign I recruited a number of volunteers to design a friendly, approachable website that put the focus on the members of the community and how to get involved with Institute initiatives. This page shows some of the tools we created to determine how the information within the site should be structured, based on who the typical users are and what they needed to be able to do. The next step would be realizing a visual design that works with our limited technology. Mental Model Wireframe Website BlueprintUser Tasks User Scenarios

5. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 5 2006 Homepage Redesign At left is the visual design concept that was initially selected by the Board of Directors. Color coded sections alert users to content within specific sections of the website. Below, a second tier mockup shows how the color scheme is integrated in deeper pages of the site.

6. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 6 2006 Homepage Redesign Final tweaking and a few color switches led to the launch of the new site design at the 2007 Annual Members Meeting at the IA Summit in Las Vegas. As time progressed, however, the home page began to be cluttered with more and more information, causing crucial membership appeals to fall below the “fold.”. Members were beginning to complain that the site was confusing and difficult to use, certainly not the message an Information Architecture organization wants to hear!

7. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 7 2008 Home Page Redesign The left image is the result of a coordinated volunteer effort. The project required an update of several PHP modules and additional CSS code. The new design directs users to paths that an particular audience is likely to request, based on a review of user scenarios. It focuses on three prospective user audiences: People who are new to Information Architecture, which may include professionals transitioning to the field and students, as well as the business managers, the press and the general public. Those who are currently practicing IA who are interested in our professional resources and volunteer opportunities. User experience managers and others who hire and manage Information Architecture professionals. In addition, news, events and partner information are given more prominence. The result is a cleaner, more compact design.

8. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 8 Mailing List Integration The IA Institute currently supports a number of members-only and public discussion lists. The software is Mailman, which is a standard listserver tool with wide language support. As part of the redesign, we required that the list information pages and user support pages be integrated into our overall web design. Challenge. While Mailman is a standard tool, it does not offer support for PHP generated code, which is the format the Institute uses in its website. Also, a recent Mailman upgrade initiated by the Institute’s Internet Service Provider, strengthened the system security, but also limited the allowed code and use of javascript, affecting a number of elements on the page. After testing a solution, we noted that support for Cascading Style Sheets was limited in certain browsers. Because the Institute was preparing to launch three new mailing lists, we needed to find a quick solution that would satisfy the requirements for the Mailman upgrade. Solution. To recreate the look and feel of our website, we needed to create new CSS elements and pull the entire page code into the page templates. For localized content, we also needed to ensure that the language function was working appropriately. The old and new layouts are shown on the next two pages.

9. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 9 Mailman Standard Design

10. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 10 2008 Mailman List Redesign The new Mailman list information page and all user facing pages are now using the standard layout for the Institute’s Member Services website section. A. IA Institute Masthead B. List of other available mailing lists C. Archive link and additional information about the list. Continuing work on the Institute's mailing lists includes combining list archives with older lists hosted by iBiblio.org prior to 2002. The older lists predate the organization name change from “Asilomar Instutute for Information Architecture” to the current name. We are also undergoing a sitewide redesign which will pull all list content into the IA Network section and make a clearer delineation between lists that are open to the public and those that are only for IA Institute members. This process involves policy and design changes. A B C

11. Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: nwhysel@hotmail.com/917-826-9644Page 11 List of Services Provided Overall Project Management Volunteer Management via Basecamp (37 Signals) Content Inventory User Scenario/Persona development Requirements Gathering Functional Analysis and Documentation Navigation Concept Revised Directory Structure MovableType blog management and customization CSS Scripting PHP module development and customization Javascript HTML Operations Management Community Outreach Training