The Web Design Process

#analysis #design #development #evaluation

A lot of novice web designers jump at the opportunity to create websites without giving any thought to the fact that they are creating a product that should bring value to the client.
This would be the equivalent of an architect attempting to build a house without all the work that would lead to a blueprint.
Continuing with this analogy, even before there is a blueprint to build a house, there are surveys to analyze the geological characteristics of the area, the type of climate of the area, the needs and preferences of the client, and many more considerations. Once the architect understands everything, the conditions are right to create the blueprint and eventually start the construction.
In other words, there is an analysis phase, followed by a design phase leading to a development phase, and when the house is done, there will also be a detailed inspection (evaluation) to satisfy building standards.

Web design should follow a similar process which we will call ADDE (Analysis, Design, Development, and Evaluation). This is based on the ADDIE model developed by the University of Florida back in the '70s mainly for instructional design, but one that fits in the web development process.

Before we focus on the design model, we are going to define Web Design as the process of using HMTL and CSS to create a product that satisfies a client's need. This means that a website should have a specific purpose like:

Sell products or services
- Amazon
Branding or Brochure Websites
- Provide information about the business or organization
- Portfolios
Lead generation: The purpose is to convert strangers into potential customers of your products or supporters of your ideas
- Angi (formerly Angie's list)
Informational or educational website: advocacy to promote opinions or ideas
- Blogs
- News
- Magazines

ADDE and the Web Design Process

ADDE (Analysis, Design, Development, Evaluation) is a process that allows a web designer to focus on creating a product (website) that brings value to the client and the users. The 4 phases of ADDE are:

Analysis: This phase requires research with the purpose to understand the business culture, client's needs until you can describe with words why the website is needed and how it will bring value to the organization. This step involves research into the business competition and client profiles with the purpose of understanding their needs and pain points. Without this understanding, it is impossible to design solutions for our clients.
- Deliverables:
  - Statement of need: The statement of need defines the problem. For example: "To create a website that engages people to rescue animals, donate or volunteer at the Hope Shelter for Animals"
  - Sitemap: This is a flowchart that shows the hierarchy of the pages required on the website to fulfill the needs and it also provides guidance to create the site navigation
Design: This is the design phase of the process. Using the definition statement as a guide, generate different ideas of the layout for the website (wireframe). Once you settle on a single idea, use the wireframe and work on defining a color palette, graphic style, and font selection. The design phase will save you time during the development phase and result in a higher quality product. Remember that development without designing is like trying to build a house without a blueprint.
- Deliverables:
  - Low definition paper wireframes
  - computer-generated wireframes
  - mockups, style tiles, or mood boards
Development: This is the process of creating the website using HTML and CSS based on the deliverables produced during the ideate phase
- Deliverable: Finished website
Evaluation: In this phase, we are going to evaluate the product to check if it satisfies the definition statement by testing the functionality to see if we can break it or find problems or opportunities for improvement. After we are satisfied, we are going to have users test the product to see if it fulfills the need.

Note: In website development, the ROI (return on investment) evaluation is done after the website is published by means of using web analytic tools to analyze the site performance. Performance analysis usually led by the marketing department.

Deliverables:
- Functionality testing
- User testing report
- Web performance analysis (done by the marketing department)

Note about the design process: ADDE is a sequential model, but new discoveries in any of the phases can cause to go back to any of the other phases in order to incorporate the new information or to solve newly found problems. For example, if during user testing we discover a problem we can go all the way to the analysis phase or the design phase to work on how to address the new problem.