Architecture and Design Process - An Outline

The purpose of this article is to provide a quick outline for the process we use at VMLY&R to design and architect a website. In the future, I will provide an in-depth walkthrough of this process with a hypothetical project.

The process is usually done with a team that includes client engagement, project managers, business analysts, creatives, developers, and quality assurance. I will do my best to represent all of the disciplines but note that I am a developer and a manager first. This process is highly collaborative and is intended to facilitate the best possible outcomes for projects. This makes the client happy and helps us generate more business.

Some of this process starts before we even win the business. However, I will take the perspective that we have won the business and are getting to work on getting the project going.

Process Outline

1. Discovery - We gather information from and about the client and the project they are pursuing.

2. Design - This is a collaborative phase that creates concepts and designs and refines them through feedback loops to come up with the final design.

3. Website Architecture - In this phase, we take the designs and determine the site architecture. What are the pieces and structure and how do they apply to the administrative and frontend experiences?

4. Development - After we have determined the architecture, we move on to building the site. This includes testing and UAT.

5. Content Creation - At this point, the project is ready to have content built out and/or imported. This is one of the last steps before launching the project.

6. Project Launch - The finale, the coup de gras, where the magic happens and all your hard work finally pays off with a nice launch.

Process Phases Explained

Discovery

This phase of the project helps us gather what the customer is looking for (sometimes they don’t fully know themselves) and what they are trying to accomplish. This phase helps us understand their needs and the future they are trying to build for themselves. Some of this can get highly technical. However, the high-level view of this is simply understanding the client and building a vision for the direction they should take to move forward.

Design

As we move past the discovery phase we delve into the design process. This is the part where the creatives start to take the reigns. They build wireframes, determine color palettes, learn or create brand guidelines, and figure out how the client would like to express themselves through the customer’s web experience.

This is where they set the tone of the customer interactions. This ultimately ends up with full site designs including a style guide, layout and structure, header and footer designs, and custom components that the client can use in their editing.

Ultimately, all of this is highly collaborative and should be done with developer and client feedback. I can’t tell you how many times I have run into designs that would be broken by different-sized windows, components being created out of order, or that are just not functional or practical in a web environment.

Website Architecture

Once a design is created for us we need to determine the architecture of the design and how it fits into our administrative and frontend system. The structures we create from this will determine the editorial and user experience. We take the design and break it into functional pieces to find the structure and components so that we can piece them together into a dynamic and cohesive project.

This should include a breakdown of data structures. In Drupal, this would be things like content types, media fields, component structure, and taxonomies. It also helps with menu structures and site navigation pieces. This provides a guide for the development phase.

Development

As a developer, this is the phase I crave to get to the most. This is where the work I find the most interesting happens. The project is built out during this phase and actually becomes a continuous loop of building, testing, feedback, and corrections.

Build

After we have determined the architecture, we move on to building the site. This will be done in segments or sub-phases. Where you build out a piece of the site such as the header or a component, pass it off to QA for testing, fix any bugs found or add missing functionality, retest and then send to the client for UAT.

Review and Feedback

During the Review and Feedback piece the parts of the project are tested, validated, and put through UAT which allows the client to inspect the work and give feedback.

Corrections

In the final step of the development phase, one we hit repeatedly and iteratively as we build out the project, the developer takes feedback from both QA and the client and incorporates the needed changes into the project itself.

Content Implementation

Projects are not complete without content. During this phase, the client or the marketing agency writes copy for the entire site. This includes landing pages, sub-pages, and even articles. If there is a lot of content that exists, it will be imported at the beginning of this phase or not long before it during the development phase.

Project Launch

Finally, we get to the end. We make all our preparations. We run through our readiness checklists. Make sure our build and deploy process is solid. Make sure all of our environments, especially production, are in the condition we want to show to the world. Then we hit the switch and point the domain at the new servers that host the new site. If process is followed correctly then there should be no surprises during this phase.