the design process : 

a formal methodology

The development of a commercial size web site is a complex undertaking that usually starts with vague goals, disorganized materials, and a variety of mis-conceptions on all sides. This is an interesting and challenging problem that requires a formal methodology to drive the design towards a succesful conclusion. The methodology provides a structure for the project workflow, keeps the team focused on the right things, and establishes the context and necessary limitations for generating great designs.

There are many approaches to interactive development, none of which is perfect. The important thing is that the team adopt an approach they understand, believe in, and can organize around.

HILLMAN CURTIS focuses on the essential process of design ideation in his inciteful book MTIV (making the invisible visible):

• Listen - As designers, make it your responsiblity to listen to the client, translating their literal and thematic messages into visual [and I would add interactive] communication. The client is not your enemy. They are your partner.
• Unite - Involve the client and everyone on the team in the creative process throughout. Open communication and the resulting cooperation enables everyone to band together to achieve far more that separate individuals could ever do.
• Target The Theme - Every product, company and brand has a theme. Discover this theme for your project as quickly as possible. Use it to focus your design so you tell a great story based on that theme.
• Concept - Develop a concept that communicates the theme. Sketch, observe and look for great examples of concept, keep the client in the loop, think, invent, revise, keep it simple.
• Eat The Audience - Create composites of the audience, identifying the subtleties that distinguish them from everyone else: age, education, interests, environment, the computers they use. Then internalize the audience and consider them in every step of the design process.
• Filter - Focus your creativity. Let the limitations of the medium, the needs of the client, the audience, and the theme all filter your ideas and concentrate your design. Design for the medium and the project, not yourself.
• Justify - Throughout the project, continually question your design decisions. Let other members of the team do the same, and make sure the design is streamlined. Not every single element has to be rationally explained, but pay attention.

The textbook for this class, WEB ReDESIGN, concentrates on project workflow and the practical process of getting the project completed.

MY focus bridges these two, with special emphasis on information design, interaction design, client management, and production process.

Information Design What is it? Project definition Project goals Audience Scenarios Requirements Education Project plan Gather information Content Inventory Schedule, Budget, etc. Content Organization Outcome: Site map and site wireframe

-> Interaction Design How should it work? What is the experience going to be like? What is the navigation system? How does the user interact with the navigation? How does the user interact with the content? Outcome: Storyboards and navigation comps

-> Media Design How should it look and sound? Theme & concept Style, layout, and integration Visual design Design for audio, animation, etc. Outcome: Prototype

Create a clear definition of what the project is, describing the goals, audience, and project requirements. This definition process helps focus and constrain, clarifying assumptions and getting at the essential characteristics of the project. An integral part of the project definition is educating the designer and client in each other's areas, ensuring cross-fertilization and high quality collaboration.

It is important to note that goals, audience, scenarios, and requirements are all tightly integrated, and will evolve as each is clarified and the education process develops in the project definition phase. As the designer, it is critical that you point out, diplomatically, the relationship between each of these so the client understands the tradeoffs between each part of the project plan (especially budget and schedule vs. features). This evolution of the project may dramatically affect the site design. It may get bigger, it may get smaller, it may stay the same size but completely change.

The important thing is to avoid getting locked into one way of looking at the project during this phase. Try many different approaches.

What are the project goals?

• What are the priorities for the different goals?
• Do the goals conflict? Can the conflicts be worked out?
• Do the goals make sense and are they achievable?
  • Basic approach of site
  • Budget/schedule
  • Capabilities of Internet
  • Capabilities of the production team
• Can some goals can be put off until version 2?

Who are the different audiences?

• What are their demographics (age, gender, income, geographic location, culture, etc.)?
• What is their level of sophistication in regard to the content as well as use of the Internet?
• What are their attitudes about:
  • The organization represented on the site?
  • The content of the site?
• What are the audience goals on the site?
• How do the audience goals differ from the client goals?
• What are the circumstances they'll be doing it under (place, state of mind, experience, business, personal, etc.)? E.g. on the couch distracted by TV, in the office under a deadline, during a break at work, etc.
• What is their equipment (computer speed, connection speed, screen size, OS, etc.)
• Perform research (interviews, focus groups, literature search) with the client and some typical audience members to define who the audience is

What are some typical scenarios for the audience experiencing the site?

• How will people use the site?
• What are they trying to accomplish?
• For each scenario, describe a path through the site

What are the essential project requirements, limits, and scope?

• Time and budget
• Amount of content
• Level of quality
• Marketing/branding coordination
• Specific business needs
• People and resource limits
• X factors

• Education the Designer
  • Client business & market
  • Company or product theme
  • Audience
  • Brand
  • Marketing approach
  • Make it your job to think of issues that the client has not. Unspoken goals, requirements and business opportunities. Dig deep.
  • Do research beyond meeting with the client. Look at other web sites and industry publications, talk to the audience directly, look at competitors.
    
• Education the Client
  • What works and doesn't in web sites.
  • Show the client existing sites: educate the client about these sites, and find out client preferences.
  • Cost of development
  • Requirement for their in-house staff
    • Editorial development
    • Site maintenance
    • Technical

In this phase, a plan is assembled with a project scope, budget, and schedule that fits the project definition. This project planning is an iterative process, where proposed scopes, budgets, and schedules are balanced against each other until a workable model is achieved, and each aspect of the project fits with the others. Frequently, the project planning process feeds back into the project definition, causing changes in goals and requirements--for example, putting off some goals until the next version because the schedule doesn't allow for those goals to be achieved

• What are the existing assets and when will they become available?
• What are the capabilities of your team (expertise, equipment, availability, etc.)?
• What are the rough cost and schedule implications of the proposed content?
• What is the approval process going to be like? Who makes the real decision, how long will it take?
• What is the proposed budget and schedule? How much flexibility is there?

Develop a complete inventory list of the proposed project by section or grouping (e.g. product overviews, company information, press releases, etc.). This is essential for getting a feel for the real scope of the project.

• Define each item in the list by:
  • The web site section where the asset is proposed to be used
  • Description
  • Associated production tasks (e.g. purchase rights to photo, write html, create graphic, write copy)
  • Method of acquisition (e.g. client provides, purchase, produce in-house, service company, conversion, etc.)
  • The time it will take to complete all asset production tasks
  • The person on the team the asset is assigned to
  • It's status in regard to possession of the asset and completion of related production tasks
    
• Example inventory items
  • Photos
  • Graphics
  • Editorial copy
  • Video
  • Audio
  • Animation
  • Databases
  • Scripts
  • Logos
  • HTML pages
  • Backend software
    
• Find where assets can be shared across site to reduce production time
  
• Inventory a comparable existing site for a reality check...What have you forgotten?

• What are the technical requirements?
  • Will the pages be dynamic?
  • Is a database back-end needed?
  • Is there streaming content?
  • Are there motion graphics or animations?
  • Is the site highly interactive? (e.g. games, sophisticated interfaces, etc.)
    
• What technologies will be needed?
  • Client-side: HTML, Flash, JavaScript, QuickTime, Real Player, etc.
  • Server-interpreted: PHP, JSP, ASP, etc.
  • Server-side: databases, streaming servers, web cams, etc.

   

• Develop a rough first pass project plan & schedule - design, schedule, personnel, equipment
  • pre-production - project scoping, design, scheduling, budgeting, prototype, user testing, client sign-off
  • production - build first sections, more user testing, client feedback and sign-off, revise design per user testing and production realities, build the rest of it, alpha delivery, testing, client feedback & sign-off, beta delivery
  • post-production - test, debug, fix, deliver final version, deliver archive materials, deliver site documentation, promote site
• Develop a budget based on the project plan and compare that to proposed project budget. Adjust project scope, budget and plans as necessary.
• Develop a second project plan that is more realistic

With the project defined and planned (and the content correspondingly constrained), it is now possible to develop an organization of the content that most effectively meets the recently refined project goals and audience. Designing the information is more than simply categorizing and organizing. Your goal should be to create an experience that helps the audience achieve knowledge (rather than facts) that corresponds with the project goals. This often means throwing out initial conceptions of the site content and casting the information in a whole new light.

Develop an organization that follows the goals and messages of the site

• Build a narrative - Create an organization that builds a kind of narrative through the content, telling the story of the site that drives home the site message and achieves it's goals.
• Distill the content down to the essentials -Too much content is worse than too little because the quantity overwhelms the goals and message of the site.
• Identify the most important chunks of information - Make sure the organization features these priorities and enables the user to get to them quickly.
• Group information around a particular goal or message

Develop an organization that makes sense to the audience and their goals

• Create a sensible logic to the organization - But don't be a slave to it.
• Filter the number of categories down - Make easily comprehensible chunks that imply their content
• Collapse information - Combine content onto pages rather than dividing it up into too many chunks. Too many small bites of information frustrates the users. People appreciate a high density of information. On the other hand, don't go too far and have too much information on each page. You don't want to overwhelm or distract from your primary messages.
• Divide the content to address different audiences

Come up with different ways for people to access the the content

• Sequential vs. directed - Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. The site organization needs to satisfy both. To achieve this, sometimes you will need multiple forms of organization that map onto the same content.
  
• Search vs. grazing - Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your organization should accommodate both techniques, and again, sometimes more than one organization is needed.
  
• Summarize and duplicate - Content may need to be summarized or duplicated to provide the best access. Information does not have to follow a strict rule that it can only be in one place.
  
• Draw people into the content - Use different techniques: pull quotes, side bars, contextual links, short summaries or outlines.

Consider the organization process from many different views

Throw out your pre-conceptions - It's important that you start with a blank slate when creating an organization. There is often a pre-existing organization that comes from the client, or from competative sites. It is too easy to start with these. You should be willing to come up with completely different organizations from what has been handed to you--even if those original ideas turn out to be right, you will understand much better why if you try out other systems. And often, by trying out alternative organizations you will find better ways of looking at the content and how users will relate to it.

One common mistake is to base the information design on the how the actual company is organized. In most cases, this approach is not effective because the audience is doesn't see the information in terms of how the company is organized.

Build several different approaches - Don't be satisfied with the first organization developed. Set it aside and try something else. Then see which approach is best, or what can be synthesized from the different approaches.

Bottom up - Make a list of all the possible content elements, and experiment with different ways of grouping them to see what high level groupings emerge.

Top down - Start with a list of top level groupings, and see how the content fits into those groupings

See how the content items relate in each proposed grouping

• Audience addressed
• Similarity of content types
• Method of presentation

See how the proposed groupings relate to each other

• Same level of generality?
• Even distribution of information
• Importance of content
• Audience addressed
• Duplication of content (could be good or bad)
• Are there natural "meta-groupings" the group the groups? These could be used to separate groups of links on the page

Build the sub-groupings

• Be careful of excessive hierarchy (most information should be within 2 clicks)
• Keep the most important content near the top (even if it means creating a new grouping)
• Consider the 7 +- 2 rule
• Identify important cross-references - Provide links or duplicate?

Devise ways of representing the groupings

• Pay attention to goals and audience
• Names
• Icons
• Subheads/rollovers
• Don't be obscure! (unless that's your goal)

Try the organization out with your team and the target audience - Don't assume you have the right perspective. Bring in fresh people and see how they react to the proposed organization.

It is helpful to build a "wireframe" of the project at this point to help in the evaluation of the proposed content organization. The wireframe is set of web pages that outline the basics of what will be on each page. The pages have no design, but contain a description of the page contents, allowing the team and test audience to navigate around the content of the site

all materials on this web site © copyright 2005, Philip van Allen