With eight years of experience working on hundreds of projects, we’ve honed our processes to a specific goal: getting results.

We care about understanding you and your customers, in service of creating experiences that deliver.

Websites are the new storefront, the new billboard, and the new brand headquarters. If a friend recommends a brand or service we haven’t heard of, most people’s first reaction is to google it. If a product catches our eye on social media, it’s become easier than ever to tap a link and find out more. What must be waiting for us on the other side of a search result or a link is an engaging, accessible, and well-designed website.

To be sure, this is no small ask. A website has to do a lot for the visitor, and much of it subconsciously in a matter of seconds – at a glance, we form an impression and even have an emotional reaction to what we see. But beyond first impressions, the information sought after also needs to be readily available, and further information should be, too. A well-executed website rises to these design challenges, and even leverages impressions and usability to create an attractive and engaging user experience.

The website design process is where these considerations all come together. By using a robust process, we deliver an engaging customer experience every time. What follows are some best practices for planning, researching, designing, content creation, testing, launching, training, and evaluating an effective website.

Step 1: Website Planning 

Website Project Planning 

The very first order of business is to understand what the specifications of the project are. To begin, it’s best to answer some basic questions to establish the goals of the project. For example: what do we know about the target audience; over what connections and on what devices do we expect to get traffic; is the goal of the website to sell products, advertise a service, or something else? A good way to answer these central questions in the project is via a questionnaire.

Defining the Scope

With the main purpose of the website established, the next step is to scope out the work. This includes estimating a timeline for the completion of the project and determining how many people will be needed. This step is very important because the time and effort needed to develop a website can vary significantly. At this stage of design, it will also begin to be clear what other resources might be needed. For example, will the client provide images or should they be sourced from stock? What data, graphs, or infographics will be needed?

Stakeholder Interviews 

As alluded to in the previous steps, the website planning stage can’t happen in isolation. The stakeholders of the project need to be not just informed of the project’s timeline and requirements, but also have an important role to play in explaining their needs and goals. Through formal interviews, as opposed to an occasional email or message, the right communication channel is established between designer and client, and every major design decision can be traced back to a specific dialog. At this stage, the client can also provide important information about the product, industry, or brand. Ultimately the project is not just for the end-user, but also for the client.

Step 2: Research 

Reviewing Current Best Practices and Opportunities 

An important part of website design is understanding the common design practices people are familiar with. Completely reinventing the wheel, while it has the potential for innovation, can also confuse users who know a certain way of doing things. Further, knowing what’s out there also means finding common problems that others aren’t fixing, and incorporating solutions into your design.

Reviewing the Competition 

A review of competitors in the same industry is particularly important. This means not only dealing with design practices on the Web, generally, but those that a customer would encounter when shopping between your brand and the competition’s. Again, both understanding common industry practices and solving problems that others aren’t, are important here.

Reviewing the Brand 

These early stages of the website design process are also a good time for a brand review. A website is a facade for the company and has to be in agreement with broader branding and messaging. By reviewing the brand, we know how to write it into our design, but this also opens the door to considering tweaks that could be made.

Step 3: UI/UX Design 

Considering Users in the Website Planning Process

In step one, we took a first pass at thinking about the target audience while we scoped our project. Now, it’s time to be more granular about users. Persona development is the practice of imagining a set of traits that a group of our target users could have, for the purpose of ensuring our design and content satisfies as many users as possible.

Getting Granular About Website Design Steps

Again, in the stage of task list creation, we go more into detail where in previous stages we had just made broader plans. Now, decisions need to be made about who will be delivering what. For example, we might have planned earlier that some graphic design work was needed, but now we give a specific assignment to a specific designer. Part of this delegation process is also to ensure that everyone involved will be able to deliver what they are assigned in time. This process should be a dialogue.

Envisioning the Design 

Wireframing begins the production of a visual end result. This is the first sketch of the website, typically created with a digital mockup or design tool. Though sometimes, even before any digital assets are created, the process begins with pencil and paper. The goal here is to produce a vision of the completed version of the website that’s sufficiently detailed for everyone on the team to know what they are working towards.

Step 4: Content & Messaging 

Reviewing Content 

Having done a brand audit to understand the image and ethos, it’s now time to review existing, concrete messaging. Knowing what sorts of formats has the content taken in the past will dictate how to format it in the future — whether it’s blog posts, stories, or some other medium. The tone of the messaging is also important to make note of to maintain consistency in new content.

Planning the Content Migration 

Next we need to think about how to move the content to the new platform, once complete. Should all previous material be shifted over or should there be a more curated selection of releases? Best practice would be to migrate over all desired materials before launch so that users on the new site encounter a finished product, not a work in progress.

Looking Forward Towards New Content and Messaging 

Going forward, there will be many opportunities for new content and messaging. Now that we’ve made some decisions about how the brand and messaging should develop, we can let them guide us in the future.

Step 5: Design 

Designing Multiple Site Concepts 

As mentioned previously, the website is not just for the end user, but for the client as well, and so the client’s contributions are important. By presenting multiple site concepts, we can gauge what the client has in mind and eliminate design elements that are not wanted. This design dialogue is important for all parties to be satisfied by the end result.

Iterating on a Good Idea (or a Few) 

If some of the proposed concepts stand out in particular, we can get into the details and make some changes, getting feedback on the way. Through this cyclical ‘change-feeback-change’ process we can hone in on the right design.

Creating Graphics to Support Design 

With the frame of the website in place, UI elements like headers, navigation bars, and the supporting graphics to fill that frame can be drawn up. These are commonly used to complement textual content, making it easy to visualize ideas, or for purely aesthetic purposes. People are very visually oriented, so the importance of graphics must not be forgotten.

Step 6: Website Development 

Front-End Development 

Front-end development is the process of coding the interfaces and pages that the user will navigate to in their browser. There are many technologies at work to “paint” the pixels on your screen, but it comes down to three underlying tools: HTML, CSS, and JavaScript. HTML is the nearly-human readable markup that the browser converts into a formatted webpage. CSS adds styles and more detailed formatting to the markup. Finally, JavaScript is a programming language that can be used to dynamically manipulate what is seen on the page.

Back-End Development 

Back-end development deals with the internal mechanics and logic of the website. To illustrate the difference between back and front end, take for example an add to cart action. On the front end, the cart icon might have a new indicator on it, showing that there is some number of items in it — that happens on the front end. On the back end, code is executed to take a reference to that item and store it in your account’s cart, so that if you leave and come back, the item in the cart persists.

Staging 

As work begins to be done on the website itself, it’s time to set up a staging environment. This distinguishes itself from the production and development environments, serving as an in-between step. After changes are made in the developer’s environment, they can be sent to a staging environment that simulates what the changes will look like when they are live. If no problems are found in staging, changes are then pushed to production — which is the publicly available website. It’s important to set up the staging instance to ensure all changes are reviewed and tested before going live. (More on testing later!)

Step 7: Testing

Browser Testing 

One potential source of conflict in front end development is that browsers — like Chrome, Safari, and Firefox — all work differently, though they aim to show the same website. Sometimes it happens that a particular technology used on the front end is not supported across all browsers. This is what makes testing in a variety of major browsers important.

User Testing 

Assuming that the website works across different browsers, it’s also important to get feedback in the form of user tests. As a developer it’s easy to get a narrow view of what you’re building, and assume that it’s clear where everything is and how it works. But end users, who didn’t build the website themselves, might have a very different view. By opening for user tests, it becomes possible to find any common problems or sources of confusion, and correct for them.

Device Testing 

Users and browsers can vary, but nowadays devices can vary greatly, too. For example, the screen on a desktop computer is very different from the screen on a cell phone. Similarly, a strong wired internet connection is different from a slow 3G connection over wireless. In order to properly gauge site performance, it has to be tested on several devices, ensuring that no matter the screen size or connection strength, the user experience is excellent.

Step 8: Site Launch

Migrating Content to its New Home

Next, let’s move the content from its current location to the new website. Depending on the source of the content, the process is different. What’s important, though, is to check that migration was successful by checking a sample of pages manually. Common errors occur with formatting and links to external sites.

Deploying for the First Time

Once a fully functional version of the site has been staged, it’s time to deploy to production. How this happens depends on the particular technologies being used. Note, also, that deployment is not something that happens once, or every few weeks. Continuous deployment (meaning republishing the site any time a feature is added or a bug is fixed) has become best practice, and since this can be done without server downtime, there is no negative effect on the end user’s experience.

Continuing to Test for Optimal Functionality

Testing is also a part of the deployment process. In addition to user, device, and browser tests, ideally there are code tests that run to ensure that all of the functionality is successfully implemented. New tests are written in the front end and the back end codebases as features are added. One way of going about this is to first write tests, then write the features that will pass them. This is known as Test Driven Development (TDD).

Step 9: Training

Teaching Employees to Manage the Website

Once the website has been deployed, it’s time to hand over the keys to the kingdom. The person assigned to manage the website will need to be trained on how to maintain the site and what to do if a problem arises. Onsite or phone sessions can be helpful for developers to keep in contact and provide additional training as needed.

Providing Virtual Training Resources

Solutions are out there for a lot of the problems that arise with websites. The development team will provide the most useful virtual resources that can help answer questions specific to your website setup.

Step 10: Evaluation

Assessing Success Against Goals 

After the website is launched, the job is not over! First, take stock of the goals set at the outset of the project. Did all the boxes get checked? Also, evaluate the individual goals to make sure that they were not just checked off, but executed well.

Reviewing Recommendations 

Continuous evaluation and feedback are necessary to ensure that the users like the experience provided. Let reviews of the website come in and take note of recommendations. Of course, it’s not possible to add every feature or design change that the users want, and sometimes feedback can be contradictory. But make an effort to keep track of the feedback so that if overwhelming support for a feature arises, it can be implemented. Likewise, the team may have recommendations on how to maintain or improve the website in the future. A website is never finished, and there are likely things that can be done to improve the site. Keep track of this list and prioritize the goals that will have the biggest impact on your key metrics.

Discussing Future Work

So, what’s next? Knowing what went well and what challenges were faced, we are better equipped to approach the next project with valuable experience. Take inspiration from the current work to develop innovative new ideas. What other user needs arose once the current ones were met? Is there an opportunity for a new solution?

Step 11: Support

Fixing Bugs

Code is often buggy, but that doesn’t mean it should stay that way! Keep a record of users reporting bugs and have a system in place for putting a developer on the problem. Again, with continuous deployment of code, bugs can be taken care of and the fixed code can be pushed out right away.

Keeping on Top of Website Maintenance 

Beyond bugs and user feedback about the user experience, be sure to maintain all aspects of the website. For example, accessibility for the visually or otherwise impaired is often forgotten, and it makes the website difficult to use. Also, if the domain name and server space are rented, be sure to make payments when requested so that the website does not go down!

Supporting Changes

Changes to the codebase can be difficult to handle, but if a good design and set of tools are chosen from the outset, it can be easier to make modular adjustments. This way, the website can be future proof.