Web design and development: Designing a process that works

A great web design and development process enables the final website output to be aligned with the goals of the business. Without a solid process the end product can stray from the original requirements of the website build very easily. 

A great web design and development process keeps the project stakeholders informed and makes it transparent what happens during the course of development from start to finish.

It also favours ongoing feedback and input from the project stakeholders and the design/development team.

With these qualities in mind, what is the process?

Wireframing is the first step

Website wireframes (and site mapping) are essentially a visual guide that is representative of the skeletal framework of a website. The wireframe provides the scaffolding for the structure that is going to be your website.

In the world of design, there is a common saying that content is king, and it is something we stand by when it comes to everything digital. Understanding this is especially important when planning and designing your website.

Most importantly a wireframe is a design agnostic version of a website. Unfortunately we're all attracted to visually beautiful things. In a web design process a beautiful design can cloud our judgement when it comes to website navigation and content. And it's the website navigation and content that is critically important to any website project. If these are not done right, regardless of the amazing job a design does and how great the website ‘looks’, the website will miss the mark in terms of its goals. Navigation and content achieve website conversions far more that design. 

Creating a wireframe will help you when deciding on what content you will add to your website, what content is extremely important to showcase, and where to put it on the website.

Designing the website

Following the wireframing process, you can start putting together the designs of your website. This is where you begin fleshing out the look and feel of your website.

Typically, the layout of the website is done by the designer, in conjunction with collaboration from a web developer. The designer will use programs like Sketch and Adobe to put together this design.

A designer that designs websites is called a UI Designer or User Interface Designer. However, most designers these days can lay out a website. Our preference is a UI Designer. They understand how to design for desktop and mobile devices. They also understand how to work with web developers. (Which can sometimes be a dark art!)

The designer will start with the home page, and generally provide a few options with different images and colour options. Naturally the colours will be in alignment with your corporate identity if you have one. Once the home page is approved the designer will create the internal pages including, product/service pages, blog, and contact pages.

Developing the website

Based on the brief, after both the wireframe and designs have been approved, you will receive/provide feedback and reverts. Once all of this is finalised, then you can move on to the actual development of your website.  When it comes to feedback, reverts and site reviews, it’s important that your process facilitates gone of two methodologies. Traditional website design and growth driven design.

Traditional website design

Traditional website design focuses on a website as one large project that results in a finished project. This is the most common methodology. Every 2 - 3 years your website is redesigned to accommodate changes in the business and market. The project takes 3 - 6 months to complete.

Although this methodology is by far and away the most common methodology and produces some great results it has one major flaw. The wireframes and designs are based on a hypothesis of what is required in the future website. Everyone involved in the project makes a ‘best guess’ based on the past performance of the website what the new website needs to make it work better. Unitil the website is launched, no one can really know how it will perform. If the site does not perform - too bad. You can’t go back to the drawing board, setting aside another budget and 6 months.

Growth Driven Design

Growth driven design (or GDD) is a response to the traditional website design process being very static. GDD is an agile approach which focuses on an iterative web design and development process whereby all stakeholders are involved in the process, which is ongoing. Updates are made to the website every month or quarter.

Growth driven design views a website as a constantly changing and evolving mechanism that requires consistent review, redesign and redevelopment. This makes the process agile as ongoing input is required from all people involved.

A word on Scrum methodologies

The Scrum approach to running projects is agile and iterative, much in the same way as growth driven design is. Therefore, they pair quite well together.

Scrum is an agile framework for completing complex projects, such as website design and development projects.  With scrum, the focus is on sprints or short iterations of work that are fixed in length. In the case of our agency, we run our sprints for a week at a time during the wireframing and  design phase.

At the end of the sprint, comes the milestone or review of the sprint where you discuss the goals you have achieved and what were your challenges. Scrum is structured to make an overall project digestible and all the tasks in your backlog are made much easier to deal with by using this approach.

At the beginning of a sprint, the scrum master (facilitator) sets all the goals or tasks that need to be completed. Within the sprint, every day a daily stand-up is held to determine what each team member has achieved and what they were challenged by. A task is moved from the backlog, into an “in process” phase and finally a completed phase. At the retrospective and review, feedback is given and a review of the completed work for the sprint happens.

Web design and development is collaborative

Scrum suits the needs of the collaborative nature of the web design and development process. Throughout the process, there is communication between the designer and developer. The developer will express what works when presented with a design and the designer will try to match the design to functionality.

No longer should web design and development be caught in the waterfall process where designers and developers work in silos and a website is seen as one big project that needs to be completed.

Today, website development is a collaborative and iterative process driven by audience data insights and consistent feedback from designers and developers.