Here are some sample pages and screen shots from projects that have benefited from Luminanze's user-centered design work.

(We have contributed to many more projects than this. Unfortunately, we cannot show them, either because we signed nondisclosure agreements with the clients, or because we performed the work for previous employers.)

American Library Association

New ALA home page
Home Page
Larger version (new window)

New ALA landing page (1)
Landing page (level 1)
Larger version (new window)

New ALA landing page (2)
Landing page (level 2)
Larger version (new window)

New ALA list page
List page
Larger version (new window)

New ALA content page
Content page
Larger version (new window)

Client:

American Library Association (ALA)
(subcontract to UserWorks)

Project:

Redesign the web site of a nonprofit professional organization (ongoing; site not yet live)

Date:

July 2006 to present

Activities:

Leads UserWorks team in redesigning ALA site.

Phase 1, Initial usability assessment — Designed stakeholder interviews and led their conduct; designed and conducted focus groups to elicit the needs and primary tasks of ALA members and nonmembers; designed and conducted an online survey to obtain member feedback on the existing ALA site; led the expert review and the design of a usability test to identify the biggest problems with the current site. Led the preparation of five deliverables (which ALA has posted in the wiki of their web planning retreat):

  • Focus Group Reports (members and nonmembers)
  • Gap Analysis Report
  • Stakeholder Requirements
  • Usability Assessment Report
  • Strategy Recommendations Report

Phase 2, Web Planning Retreat — Designed and facilitated a one-day web planning retreat at ALA.

Phase 3, Initial information architecture — Provided technical leadership in the design of card sorting and information architecture (IA) activities for a portion of the ALA web site. Guided teammates in card sorting, information architecture, wireframe development, codiscovery to evaluate the wireframes and the IA, and an online survey to obtain feedback on the wireframes. Made several presentations to various ALA stakeholder groups during this process.

Phase 4, Information architecture and graphic design — Guided teammates in developing and refining the IA for the rest of the site. Guided graphic designer in producing a graphic design that implemented ALA input and feedback and followed usability principles. Designed and conducted two focus groups to assess site user opinions on graphic design concepts; guided the design and analysis of online surveys to obtain wider feedback on the graphic design and to answer some specific questions about the IA.

Phase 5, Style guide development — Just about to start. Will lead the preparation of a web style guide to help content providers follow the new design and general usability best practices in producing content for the web site.

Additional activities — Serves on the ALA search committee for a Senior Usability Officer. Provides usability/design support to ALA on request.

Note:

Although the new design is complete, the redesigned site is not yet live. Our team is currently working with ALA's content management system contractor to answer their questions about the design and ensure that the new site is implemented as designed.

River Road Unitarian Universalist Congregation

RRUUC web site
View larger version

Client:

River Road Unitarian Universalist Congregation
(formerly River Road Unitarian Church)

Project:

Redesign congregation's web site (ongoing)

Date:

January 2007 to present

Activities:

Cochairing web design team. Guided team in user-centered process needed to accomplish the redesign. Led team focus group to define audiences and draft set of tasks. Conducted card sort (in groups) to collect data for initial information architecture.

Worked with committee chair to develop layout and basic style. Prepared several alternative color schemes and worked with committee to select one.

Conducted codiscovery usability testing (three rounds in two weeks) with members of the congregation, recommending changes after each round. Reviewed site frequently to assess how design implementation was proceeding and verify that recommended changes had been made correctly.

Note:

The visual design is not yet complete; it needs refinement in several areas. I am working with our graphic designer on it.

2007 Stewardship Campaign

2007 RRUC Stewardship Campaign
View larger version

Client:

River Road Unitarian Church

Project:

2007 Stewardship Campaign

Date:

Winter 2007

Activities:

Designed and developed information structure and interaction concepts; designed navigation to fit into overall church Web site; integrated content as provided by church. Developed site color scheme to coordinate with logo provided by graphic designer. Designed pages to coordinate with printed brochure, using CSS to achieve inner/outer border effects. Designed online forms, modified JavaScript validation from previous year's forms, and collaborated with data base programmer to implement and test them. Implemented design features with cascading style sheet. Revised site to use CSS instead of tables.

Ghaznavi's Squares - Circus of Patterns

Ghaznavi's Squares
View larger version

Client:

Ghaznavi's Squares - Circus of Patterns

Project:

Business site — selling a set of charts that entice upper-elementary and middle-school students to learn mathematics by discovering patterns among numbers

Date:

2005

Activities:

Adapted information structure from printed brochure, in collaboration with graphic designer. Designed and developed interaction concepts and navigation mechanisms. Designed order form and "contact us" form and programmed them to use FormMail.pl to send the information via email to the client. Designed and programmed client-side order validation and subtotalling in JavaScript. Provided substantial consultation and editing to client regarding wording of product descriptions and other site content (clarity, grammar, usage, etc.). Adapted logo provided by graphic designer for several types of uses on site, including favicon.ico and animated jugglers in the upper corners of each page. (Jugglers stop juggling after three seconds, to avoid distracting the reader's attention from the page content.) Implemented design features with cascading style sheet.

2005 Stewardship Campaign

2005 Stewardship Campaign
View larger version

Client:

River Road Unitarian Church

Project:

2005 Stewardship Campaign

Date:

Winter, 2005

Activities:

Designed and developed information structure and interaction concepts; designed navigation to fit into overall church Web site; integrated content as provided by church. Developed site color scheme to coordinate with logo provided by graphic designer. Designed online forms, modified JavaScript validation from last year's forms, and collaborated with data base programmer to implement and test them. Implemented design features with cascading style sheet.

Fine Arts Committee, River Road Unitarian Church

Next Month's Show
View larger version

Client:

Fine Arts Committee, River Road Unitarian Church

Project:

Current and planned art shows, and information for artists and committee members

Date:

2004

Activities:

Designed and developed interaction concepts and information structure, including keywords and descriptions for search engines. Developed subdued color scheme to show art samples at their best. Implemented design features with cascading style sheet. Wrote guidance for artists on what to include in their biographies and how to produce good-quality digital images of their work.

Site is updated monthly, as shows rotate; and coordination is maintained with artists to incorporate their biographies and art samples.

Changing Lives Consulting Services

Changing Lives home page
View larger version

Client:

Changing Lives Consulting Services

Project:

Individual and family therapy site

Date:

2004

Activities:

Designed and developed information structure, meta tags, and interaction concepts. Devised color scheme; collaborated with outside graphic designer on logo; designed banner and other images around logo. Built and tested site; provided JavaScript rollovers for navigation images. Provided editing services to improve wording, grammar, and spelling of content. Implemented design features with cascading style sheet. Submitted to search engines.

MomBlog: Current News

MomBlog: Current News
View larger version

Client:

Self, family, and friends

Project:

"MomBlog"— a custom blog to keep loved ones up to date on my mom's condition after her auto accident

Date:

December 2002 to July 2003

Activities:

Everything. Designed and developed information structure and interaction concepts, and revised them as needed (which occurred several times, as the information content grew). Designed and developed visual appearance. Posted updates almost daily. Included a glossary and links, to help readers understand traumatic brain injury and what was happening to her. (I did not use an online blogging tool such as Blogger. If I had it to do again, I would.)

Issues:

Privacy. Posted blog in protected area of my personal site, aesthetic-images.com, rather than using blogging software/services; used "robots.txt" file to keep Web spiders out. Mentioned no surnames in text.

Audience. Many audience members were women in their 70s with little or no computer/Web experience. Used the "index.html" file to keep the current news in an unchanging URL for their ease of use; moved older postings to other file names and kept those links up to date so readers could catch up if they had missed some postings.

AEsthetic Images Photography

AEsthetic Images Photography
View larger version
(will open in a new window)

Client:

AEsthetic Images Photography
(Self — sideline photography business)

Project:

Photography web site

Date:

Original design and construction, 1998; transformation from tables to to CSS, 2007; updates continuing as needed

Activities:

Everything. Designed and developed information structure, interaction concepts, and visual appearance. Continues to refine structure as needed, to accommodate growth in information content. Prepares photos for posting. Converted site from tables to CSS.

n = navigation bar. t = top of page.