Step 1: The Road to Discovery

Web projects are by their nature elusive and ever-changing creatures. At first glance, they appear compliant, obediently following the straight yellow lines in the road and traveling safely at the legal speed. Then suddenly, just as you’ve started to enjoy the gently rolling scenery, your web project begins to detour, turning down uncharted streets and driving through neighborhoods your mother always told you to stay away from.

Poisar Development has been on a few wild rides, but rather than eschewing the car in favor of walking, we’ve taken what we’ve learned, re-written the driver’s manual, and given it a fancy title: Discovery.

Discovering Discovery
So, what is Discovery, and why do we do it? In short, Discovery is the step in the process that generally prevents web projects from careening out of control. Whether we’re developing a simple “brochure” site or a complex database-driven e-commerce site, Discovery helps us determine the web project’s final destination, the route it will take and travel time (excluding bathroom breaks).

Following a roadmap that we’ve developed over the years, Poisar Development uses Discovery to develop a complete understanding of project goals and expectations along with a comprehensive list of functional requirements. We ask questions such as “Who is the target market for your product or service?”, “How do you distribute your product or service?”, “How do you plan to measure the success of your web project?” and “What do you want visitors to your web site to do upon arrival?” The answer to these and other questions help us define the project in the form of a Scope of Work document, set expectations and lay the foundation for the partnership between Poisar Development and our clients. More importantly, this process allows us to discuss how detours will be handled when, not if, they arise.

Step 2: Building the Skeleton

What is Information Architecture?
“At its most basic, information architecture is the construction of a structure or the organization of information…On the Web, information architecture is a combination of organizing a site’s content into categories and creating an interface to support those categories.”¹ Whether you think of it as virtual DNA, infrastructure, or a skeleton, information architecture is the stage when a Web site begins to take shape.

The Foot Bone Connected to the Leg Bone…
Based on an analysis of the information collected during discovery, the information architect will begin to identify the content that should be included in the Web site, and how it must be categorized to facilitate a meaningful experience for each audience group.

Let’s say the client² is a manufacturer of quality, mid-priced women’s shoes, and sells through retail stores exclusively. The client has identified its primary audience as predominantly female, aged 30-50, middle to upper middle class, with full-time jobs earning $40,000-$60,000. They have also identified that their target buyer has approximately two children, owns a home and shops for shoes four times per year, spending an estimated 23 minutes per shopping visit (fewer if children are in tow). The goal of the new Web site is to help buyers search for shoes quickly, view details online, and then find local retailers currently carrying the specific shoe in stock.

The information architect will develop a structure focused on matching a buyer with a shoe in as few steps as possible. The architect might decide to group shoes by characteristics, such as style (sandals, pumps, boots, slip-ons, etc.), color or price range ($50-70, $71-100, Sale, etc.). In addition to product information, she might also decide to include details needed to facilitate the decision to buy, such as return policy, customer testimonials, product test results and a style guide to help buyers purchase the right outfit for their shoes.

The information architect will then develop a “Web chart”, which is similar to an organization chart in that both define a hierarchy and relationship for information. Once the structure is defined, the architect will review it with key decision-makers and influencers. This discussion will allow the architect to explain the rationale for her decisions, and to gather feedback about her assumptions. From here, the architect will refine the structure as needed.

The process for developing the site’s architecture can take several weeks or months depending upon the complexity of the site’s functionality, the number of key audience members to consider, and the goals of the site. However, once a solid foundation has been established, adding to the site in the future will be relatively simple to do.

Step 3: Graphical User Interface (GUI)

In the last installment we discussed the development of a site’s information architecture, which is the organization of content into logical, scalable categories. Once the Information Architecture has been developed Poisar Development uses this information to design the content areas of the site – known as the Graphical User Interface (GUI).

What is Graphical User Interface (GUI)?
“A GUI (usually pronounced GOO-ee) is a graphical (rather than purely textual) user interface to a computer… The term came into existence because the first interactive user interfaces to computers were not graphical; they were text-and-keyboard oriented and usually consisted of commands you had to remember and computer responses that were infamously brief…Elements of a GUI include such things as: windows, pull-down menus, buttons, scroll bars, iconic images, wizards, the mouse, and no doubt many things that haven’t been invented yet. With the increasing use of multimedia as part of the GUI, sound, voice, motion video, and virtual reality interfaces seem likely to become part of the GUI for many applications. A system’s graphical user interface along with its input devices is sometimes referred to as its ‘look-and-feel.’”¹

What’s It All Mean?
During this step in the process Poisar Development develops “wire frames”, which are basic line drawings that depict the placement of navigation buttons, links, logos, icons, text, and form fields on key pages within the site, and further define the screen flow (in addition to the work we did in the Information Architecture step). A sample list of web pages that we usually consider “key” include: home, product detail, all pages within a shopping cart, and most forms (such as Contact Us, Registration, Request Info, etc.). At this stage in the process, design is not introduced due to its subjective nature.

The GUI developer will begin the process of identifying the information that needs to be placed on each key page, and where it should be placed for optimal viewing. The Discovery process guides this step, as the GUI developer will rely on the goals and expectations defined during Discovery to lay out the information logically.

If we continue the GUI process using our shoe manufacturer example, we remember that the goal of the client’s new Web site is to help buyers search for shoes quickly, view details online, and then find local retailers currently carrying the specific shoe in stock. With this information in mind, we know we would need to develop GUI layouts for at least four pages in this site: Home, Shoe Search (and search results), Shoe Details and Locate a Retailer (and search results).

A sample Home page wire frame appears below:

As you can see, there is nothing artistic about the wire frame, and it is not intended to represent the actual design. Once the wire frame moves into the design process, the designer may take license with the placement of some items, but generally follows the wire frame whenever possible. Instead, the wire frame depicts key text and placement on the page. In addition, you can see that the left and footer navigation areas have been identified, as well as the location for introductory text, which is essential for search engine visibility. While it might not be pretty, it helps our clients visualize the information planned for the page, and it gives them a chance to make changes BEFORE design and programming begin. The same type of layout would be developed for other web pages, where the placement of specific information is critical to the success of the project.

This process can several weeks to complete, but once the client agrees with the content and placement on the web pages, the next several steps can be completed even more quickly.

Step 4: Website Design

You’ve sat through countless hours of discovery meetings, you’ve stared at version after version of web chart and you’ve studied every wire frame placed in front of you.  You’ve come a long way, baby.  And your efforts are about to pay off.  Soon you will be able to gaze upon the actual design for your new web site.

“Soon” is, of course, a relative term.  So is “actual”.  While the web site design phase tends to be the most satisfying for our clients, it is undoubtedly the most subjective phase of the project, and can sometimes last as long as coding.  Why?  Some of the reasons include:

• The client comes to the design process with a specific visual in mind, but has difficulty communicating it.
• The design process is being handled by a committee, which requires that the needs of each member of the committee are satisfied.
• The final decision-maker isn’t included in the design process, but instead sends comments and changes through an intermediary, who may or may not interpret those changes accurately.
• The final decision-maker(s) doesn’t have the time to focus on the project.
• The client’s design brief changes during the course of the design process.
• Poisar Development misses the mark with early design versions.

Any, and sometimes all, of these can occur during the design process. What does Poisar Development do to help expedite this phase? Lots.

“It was a dark and stormy night…”
Every creative endeavor begins with an idea. Whether it’s the “Great American Novel” or the next award-winning web site, both are sparked by ideas. During the Discovery phase, Poisar Development captures many of the ideas that our clients have for their web sites. These ideas, however, tend to be functional and goal-oriented. The design phase also begins with a discussion, but one that addresses visual ideas. Poisar Development uses a web designer’s questionnaire that helps clients address a variety of design-related issues such as:

• Defining user demographics and target market.
• Prioritizing user behavior on the site.
• Level of web experience for a typical user.
• Sites that the client likes/dislikes, and the reasons for their feelings about these sites.
• Competitors’ web sites.
• Color and image selection.
• Brand and corporate identity guidelines.
• “Feel” of the site (professional, approachable, reliable, etc.)

But ideas evolve, as is their nature. Which means that the first design isn’t usually the final design. If you’ve never used the word “tweak” before, it will become part of your everyday vocabulary during this process. There will be tweaks, tweaks and more tweaks.

There will also be discussions and debates.  What about?  Lots.

Volumes have been written about design and usability standards for web sites. Poisar Development is earnest in our efforts to keep up with the latest and greatest and apply those ideas to our clients’ web sites.  Just a few of these design/usability guidelines (as of the writing of this article, April 2007) are:

• Designing the site for the most common browser setting, which is currently 1024 x 768.
• Designing to keep key page elements “above the fold” so that in spite of the length of the web page, users will be able to access critical features of the site.
• Allowing text to automatically wrap, instead of forcing line breaks which will display differently in various browser settings.
• Using left navigation, footer navigation and breadcrumb navigation consistently throughout the site.
• Using HTML text for navigation buttons instead of graphics, which search engines can’t “read”.
• Designing the page to ensure a speedy download. Inherent in this idea is the priority of function over form. There, I’ve said it. Although we strive to develop sites that balance function and form, when push comes to shove function is king. After all, you’re trying to produce a result from your web site – online sales, calls to your company, downloads of a white paper, event registration, etc. If your visitors can’t find the call to action because it is buried somewhere inside the design, then the site has failed to achieve the desired results. And worse, your site visitors (aka “potential clients”) may have gone right to your competitors.
• Placing the client’s logo in the top left corner of the screen (and making it a clickable link back to the home page from all secondary pages).
• Using common naming conventions for buttons. For example, using “Contact Us” instead of “Call Me”, or using “Jobs” instead of “Join Our Team”. Common naming conventions give site visitors a feeling of familiarity with your web site – even if they’ve never visited before. Since a web site is a “self-service” environment, using common naming conventions makes it easier for site visitors to take action without outside help and without thinking about how to use your site. If you make your site difficult to use, you increase the likelihood that your site visitors will leave your site for one of your competitor’s.
• Including a Site Map and Privacy pages. Not only do these pages help build credibility on your site, they are also places to include text that has been optimized for the search engines.

The list above includes just a fraction of the guidelines that we follow when designing and developing web pages. If our clients allow us to implement our expertise, they will receive a good-looking, highly functional and easy-to-use web site in return.

¹ Shel Kimen, “10 questions about information architecture”, September 29, 2003, www.builder.com
² The information provided herein refers to a fictional client and Web project, and is for illustrative purposes only.