The Web Design and Development Process

A User Centered Design Approach

The web design and development process shares several resemblances to the software development process and systems development life cycle and is influenced by the rich history and practice of related fields such as systems engineering and information science. Building upon several influential methodologies and preceding models, the following is a simple 5-Step process specifically for web design and development that embraces User-centered design (UCD)and consists of 5 D’s: Define, Draft, Design, Develop, and Deliver.

User-centered design (UCD) or user-driven development (UDD) is a framework of processes (not restricted to interfaces or technologies) in which usability goals, user characteristics, environment, tasks and workflow of a product, service or process are given extensive attention at each stage of the design process. User-centered design can be characterized as a multi-stage problem-solving process that not only requires designers to analyze and envision the way users are likely to consume a product, but also to validate their assumptions with regard to the user behavior in real world tests. These tests are conducted with/without actual users during each stage of the process from requirements, pre-production models and post production, completing a circle of proof back to and ensuring that “development proceeds with the user as the center of focus.

– Wikipedia

A Simplified 5-Step Process:

1. Define – Define the project, problem(s), and stakeholder’s primary goals via the project brief. Gather background info to define user profiles, goals, and tasks.
2. Draft – Brainstorm conceptual solutions; draft the information architecture, site-maps, wireframes, prototypes, content hierarchy, and structure.
3. Design – Visualize and communicate the user interface design via mood boards, type studies, color studies, prototypes, iterative mockups, and multiple rounds of refinements.
4. Develop – Build the interactive, fully functioning product using web standard compliant, accessible, valid, semantic markup, styling, and scripting.
5. Deliver – Via due diligence, fix all bugs and conduct multiple tests for quality assurance across multiple platforms, browsers, devices, and screen-sizes.

A Brief Backstory

Preceding Influential Models

One of the most notable approaches that predates web development is the waterfall model: a linear, step-by-step sequential process that is inherently flawed due to the fact that, like a waterfall, it only flows in one direction. Broken down into five phases, a typical waterfall process entails defining system requirements, designing, implementing/coding, testing, and maintaining.

A waterfall process

In the text Usability for the Web (2002), Brinck, Gergle, and Wood illustrated a “Pervasive Usability Process” drafted specifically for web design and development. It consists of five phases that are sequential yet iterative through the process of continual evaluation. The five stages are requirements analysis, conceptual design, mockups and prototypes, production, and launch, and most closely resembles the Five D’s approach above.

Brinck, Gergle, and Wood’s 2001 Pervasive Usability Process

In contrast to the waterfall model, other notable approaches are iterative design and incremental development, cyclical design and development processes that entail multiple rounds of designing, prototyping, testing, analyzing, and refining.

An iterative process

In recent years, the agile software development process has had a big impact on web design and development. It embraces adaptive planning, evolutionary development, early delivery, and continuous improvement. Designed for speed, it encourages rapid and flexible responses to change throughout the process.

A combined iterative and incremental “5 D” process influenced by multiple models.

An Even Simpler “3 D” Process

When faced with limited budgets and short timelines, there are multiple strategies that can help designers and developers to work more efficiently and effectively, by embracing accelerated design processes that include techniques such as rapid early prototyping that allow teams to shift the development phase earlier in the design process to allow applied technology testing and early user testing. Teams and clients might benefit from an even simpler “3 D” process that includes:

• Draft Phase (project definition, site-mapping, low-fidelity wireframe as coded prototypes, & early visual style explorations)
• Design Phase (multiple iterative rounds of high-fidelity UI designs)
• Development Phase (starting early with coded prototypes and iterative testing on multiple devices)

Conclusion

There is no one-size-fits-all web design and development process. However, there are several existing models to follow as frameworks that embrace different principles related to user-centered design.

Related Resources and Reading

• Via Wikipedia:
  • Software development processAgile software development
  • Systems development life cycle
  • Waterfall model
  • Iterative Design
  • Iterative and incremental development

Go Further

• Familiarize yourself with User Centered Design
• IDF’s User-centered Design (includes a good video on User Human Centered Design)
• Usability.gov’s User Centered Design Basics
• Read IDF’s 5 Stages in the Design Thinking Process

---

Author Notes

This was written specifically to help aspiring web designers as they aim to:

• Define and plan for client-based projects in a clear, concise, and organized manner.
• Apply best practices for user centered design using user research methods and guidelines.
• Communicate project-related goals, deliverables, issues, and concerns to both clients and internal team members (co-workers).