The Web Design Process

Building a website is an exciting time! Everyone is firing on all cylinders and eager to get started. The mood is high and the room is full of great ideas. Putting the correct process in place will help grow the excitement and craft ideas into executable goals.

The Web Design Process: A Strategy for Success

Discovery

Project Definition & Brief

The first step in building a website, discovery, is often the hardest. It is critical to make sure everyone is on the same page and expectations are in place. Gathering information and doing a deep analytical dive isn’t easy but getting genuine information will pay dividends down the road.

Have a Purpose

To get started you need to identify the purpose of a new website. One of the best ways to do so is to cover the five Ws and one H. The who, what, when, where, why and how. It’s impossible to build a new website without knowing the purpose and having defined objectives.

Set Goals

Forecast where you want to be and how you would like your website to perform by setting goals. Goals give you something to work towards and provide a defined metric for success. Goals are important for both the short term and long term, modeling what you want to get done this week as well as in the following months.

Evaluate Existing Website

Your current website can be the best research tool available. Take a look and see what is working well on the current website and what needs the most work. Help ensure your new website is indeed an improvement and not a step in the wrong direction. Dive into analytics, set benchmarks and measure room for improvement.

Find What Users Want

Websites rely on users and users rely on websites. Stop guessing what users want and go directly to the source. Find out exactly what users enjoy about your website and what they strive to need.

Research the Competition

See what you are missing by researching the competition and analysing market trends. Chances are your competitors have been down this road before, take the opportunity to learn from them and see what is proven to work.

Interview Stakeholders

A great way to fully understand a websites is to speak with those who work with it directly. A customer service agent might have a slightly different opinion than a content strategist. Understanding every one’s perspective will help you make better, informed decisions. Additionally, the website needs to have support from the entire company for them to fully back it.

Outline Initial Tech Specs

Do your best to research and understand what will be required for the website from a technical standpoint. Does the current server have the capability to host the new website or will a upgraded server be required? Before building a new website ensure all of the correct technical specifications are in place.

Collaborate & Listen

Start the design process by listening and end the design process by listening, especially within the discovery phase. Hear everyone out and collaborate together. When everything is on the table and everyone is working together the most intuitive decisions are made for the benefit of the project.

Plan

Information Architecture & Strategy

A strategy needs to be put in place based off all of the information outline within the discovery phase. Decisions made at this stage can, and will, affect the bottom line of a website. Having a plan of action is key to success and it will help dictate decisions moving on.

Define a Timeline

Set dates and define a timeline for the expected duration of a project. Doing so will help ensure everything runs smoothly and the design process does not get stalled. A timeline also helps set expectations and keep everyone on track.

Outline Responsibilities

Know exactly who is responsible for what. Who is in charge of the design? Who is required to sign off on the design? How is the design handed off to the developer? Going over these questions up front will eliminate the guess work down the road and help speed up the process. Outline all of the members of the team, what they are responsible for and what deliverables they will produce.

Determine the Structure

Outline all of the different pages and their hierarchy within the website. Getting an understanding of what pages are needed and where they will live within the website will assist with content creation and building out a site diagram.

Diagram Page Flows

Each page can have it’s own flow, specifying how the content on the page should relate to other elements on the page. Determine the content necessary for each page and the priority with the content. Arrange the page to place emphasis on the primary content and keep a user focused moving down the page.

Make Content Relationships

The sooner you can define content needs the better. Summarize what specific content and messaging is needed for each page and how it will relate to other items on the page, as well as other pages in general. Design needs to work for and fit around the content properly. Content should not be worked to fit within the design. Start writing early and as soon as possible.

Prototype Wireframes

Before jumping into the detailed design, build and prototype different wireframes. Wireframes allow you to get a quick idea of how the website will look and function without all of the embellishments, putting the focus on usability. Furthermore, wireframes allow you to produce designs much faster, saving time and energy.

Perform Usability Test

Review case studies and perform usability test on your wireframes. The quicker you can acknowledge any flaws within the design the easier they will be to fix. Follow the best practices and continually refine your wireframes.

Set a Maintenance Plan

Once a website is launched it needs to continually be nurtured in order to grow. Take the proper steps and outline an ongoing maintenance plan. Once the website is launched this plan will need to be put into effect to keep the website up to date and in alignment with the overall strategy.

Design

Web & User Interface Design

Once the overall architecture and plan of the website is in place it is time to get moving with the web and user interface design. At this stage you will see all of your ideas come to life. By the end you should have a finalized layout and design, along with a handful of other brand and design elements to utilize.

Brainstorm Creative Concepts

Before jumping into the layout and visual design you want to make sure everyone is on the same page concerning the look and feel of the website. The best way to do this is to put together a mood board consisting of different visual references to use during the design phase. These references may include other websites, pictures, colors or any other artistic inspiration. A mood board doesn’t need to be set in stone but should be used as a tool to align ideas and spark inspiration.

Design the Visual Layout

Using the wireframes and mood board in hand, begin the visual design of the website. Taking the wireframes, design a full fledged layout complete with poise and polish. Remember to reference the site diagrams, page flows and other information architecture documents for additional support.

Follow Design Principles

Working on the design and visual layout can be quite difficult. There are numerous items to take into consideration, all for the greater good of the website, and often the most important design principles can be forgotten. Remember to follow and reference different design principles while working on the layout and design.

Keep Brand Identity

Often a new website commissions a refresh within the brand identity as well. Ensure the brand identity is properly carried out and developed throughout the new website. It can be easy to get carried away and stray from the core brand personality, remember to stay on track.

Remember Asset Creation

The design phase is not complete with the layout and visual design of the website. Remember to cover design for all of the different assets going to be needed during the life of the website, including different sub page layouts, different emails and other elements requiring design.

Obtain Feedback & Revise

As within the discovery phase, it is beneficial to check back with all of the different stakeholders involved with the website and see what they think about the layout and design. Chances are that they may pick up on something initially missed. They’re additional support encourages them and lets them know that their input is appreciated. Taking what these different stakeholders have suggested revisit the layout and design, revising it with the updated recommendations.

Perform Usability Test

Very similar to the usability testing completed with the wireframes, run the layout and designs by a select group to see what thoughts they may have. See if they understand the flow of the pages and the overall hierarchy of the website. The more problems you can recognize and address now the better.

Create a Style Guide

One of the final parts of the design phase is create a style guide. This guide will serve as a reference for updating and managing the website once launched. The guide will also insure that the website keeps a consistent tone and feel.

Develop

Coding & Development

Once the design concept is finalized it is time to start programming. If there are quite a few components to the project the development phase could take quite a while. Remember to stay focused, make logical decisions and write the cleanest code possible. Writing quality code the first time around will save hours upon hours of headaches later down the road.

Code HTML/CSS Markup

Start the development by coding the general premise of the design in HTML and CSS. This will provide you with a strong base to work from and the ability to grow it into an application or CMS if needed. Keep your code well organized so that it may be scaled and maintained easily.

Develop Any Applications

Behind most websites there is some heavy lifting involved to get everything working properly. Developing an application, setting up a CMS or e-commerce platform can often be that heavy lifting. This step can be quite complex and often begins even before the design phase. Stay agile and deploy often to keep everything aligned and on track.

Add 3rd Party Integration

If your website will be using any 3rd party integration now is the time to get it properly installed. Make all of the proper connections and run vigorous test to make sure everything is working accurately. Make sure to especially test any part of the process that you may have personally customized. Remember to also run more test over time as the 3rd party will make updates of their own.

Support Responsive Design

Surfing the web from a mobile device is getting more popular as time goes on. Mobile browsers are getting much better at displaying websites however they have not completely figured it out. Make sure that your website has mobile compatibility for a variety of screen sizes and displays content largely relevant to a user on the go.

Test & Validate Code

After all of the development is wrapped up you need to double back and review the code, test it for for errors and make sure that it properly validates. This steps can often be a breeze or very frustrating. Either way, the important thing to remember is not to ship any faulty code. You may only get one shot with a user and if that experience is anything but enjoyable it is likely you will never get them back.

Set Up Hosting & Launch

At last, it is time to launch the website. Hopefully you covered all of the hosting and server needs in the discovery phase and are ready for launch. Upon launch do not forget to test and retest all of the functionality that was working on the development server, you never know what will happen when making re final migration. Additionally, don’t forget to make any last minute updates, configuring the proper analytics for example.

Launch

Deploy & Grow

Think of your website as an evolution not a revolution. Once a website is launched it needs to evolve and grow with time, not sit inactive waiting for the next uprising. Stay on top of your website and provide it with the support it needs. You have put all this time and effort into launching it, why stop now?

Train Website Managers

More times than not once the website is launched you will be handing it over to a set of employees to manage. Train these employees and managers on how to use and update the website. Make sure they thoroughly understand the CMS, email management system or any other platform necessary. If those in charge of managing the website do not know how to properly update it you may have a recipe for disaster.

Maintain the Website

Take the maintenance plan established within the planning phase and put it to use. If unattended your website can become dormant fairly quickly. Update and maintain the website to keep it relevant and inline with your overall strategy.

Start Marketing

The phrase “If you built it, they will come” doesn’t apply to most websites. You need to market and promote your website to drive traffic. There are a million different ways to do so including social, search engine marketing and search engine optimization to name a few. Find the right advertising medium for you and work to acquire users.

Measure Progress

Continually measure your website progress and work to improve it’s overall performance. Learn from what you have completed so far and find ways to grow based on these experiences. Over time you will get to know your users better and better, finding out exactly what they desire. Do your best to give them what they want.