#design

Our Website Design Process.

Our Website Design Process.

Potential clients often ask us about our website design process and how we run our projects. So we thought it would be a great idea to explain our approach for a website design project.

Depending on the project, we have two available methodologies that we can use.

Agile: This working method emphasizes agility and iteration vs careful planning and documentation. This method is great for projects where the scope is not clear, and you don’t have many details up front. However, this often means that the website design project cannot be of a fixed price nature.

Waterfall: This working method is the older and more established of the two. It is also more process based than the agile methodology. There are clear phases of discovery, research, design, development, and testing. Each phase is completed before moving on to the next. This works very well when a project’s scope is well defined from the beginning. We follow the waterfall methodology and iterate within each stage of the project in order to counter the usual issue of waterfall being labeled as too rigid and unadaptable to change.

Regardless of the methodology we use, each website design project will normally cover the following stages:

  • Project Setup
  • Discovery & Research
  • Content
  • Design
  • Development
  • Testing
  • Go Live
  • Continued Operations

In a perfect world, each stage would naturally and smoothly follow on from another. In reality, we find that there is a considerable amount of overlap. For instance, we may have already chosen the Content Management System ahead of time, thus the development team can start doing some work of the development phase, while the rest of the project team is still on the discovery and research phase.

The same goes for testing; we might be stress testing the core of a new application to see how it performs under the stress of real world traffic, while simultaneously still working on the front end website design.

Project Setup.

The project setup encompasses plenty of technical and non-technical issues. They range from technology decisions to deciding the exact launch date.

We’ve previously discussed how to have an awesome kickoff meeting. So it’s definitely worth going over what the project setup consists of:

  • Contractual & Legal: We make sure that we have the necessary contracts and legal framework in place before we start. However, each website design project has different requirements. Consequently, we build our contractual documentation from our web design contract template before adapting it to fit the client and project.

  • Version Control & Servers: We set up the version control and make sure that the staging (what the client reviews) and development (what we internally review) servers are linked. As a result, our team can push their work easily for review.

  • Project Kickoff Meeting: We have a project kickoff meeting and introduce ourselves to the team.

  • Goals: We set clear success and failure scenarios and a strategy to achieve success.

  • Timelines: We set up a timeline to outline the phases of the design project. This consists of setting the required due dates for content, key decisions, feedback times, and other relevant aspects.

  • Project Management Setup: We set up the website design project on Asana, inviting all team members. We add all the pending to-dos, any reference files, and checklists. Everything can be found in just one place.

The project manager responsible will then create a project plan in Asana, which ensures transparency in the project. Team members are able to view the details and ask for clarification on any items.

Discovery & Research.

The Discovery and Research phase helps Mäd understand client needs. In addition, it helps the client to understand the possible solutions for their needs.

Mäd will normally kick things off by researching how similar companies in the same industry present themselves online. Afterwards, we widen the search vertically to identify applicable solutions from other industries.

We would then hold a requirement gathering session where each requirement is written down in a simple sentence, before prioritising them from the perspective of the end user and relevant stakeholders. This may be the visitor who purchases a product online or the staff member who will be in charge of managing the website content.

Once we gather all requirements, we split the list into “must have items”, “nice to have items”, and “items that we don’t really need.” As we live in a finite world, there is a limit to the amount of money, time, and effort that any project can take. Therefore, it makes sense to distill each project down to the correct level of simplicity. This doesn’t mean making it as simple as it can be, but as simple as it needs to be.

Building Requirements.

It’s far too easy to load up on features and requirements without actually thinking through what it entails in the long run. For instance, do you want a blog on your website? Well, that means committing to publishing regular content.

Once we agree on the requirements, we then write out a functional specification: a set of documents, and often drawings, that will describe how the system will work from the perspective of the users. We have a very specific way of writing this, which tends to capture the vast majority of what we call use cases (types of behavior expected from users) and then translating this behavior into what types of functionality the system should have to fulfill the requirements.

This document is essentially the blueprint of the website we’re building. In addition, this provides a template to what we will test against once we have built the system.

Content.

Creating high-quality content is one of the toughest challenges in website design. It’s also a leading cause in the industry for lateness in delivering projects and hitting the go-live dates.

Mäd also offers content creation services to help make sure that each “i” is dotted and “t” is crossed. More importantly, we make sure that the content of your website is properly structured, and the copywriting reflects your brand’s objectives.

At this stage in the project, our main concern is to have an understanding of the number of pages required, and the relationship between the pages. For example, do some pages simply list out other types of pages?

For each page, we want to drill down to see what type of content will be hosted on the page, any additional functionality required to make that content shine through.

Sitemapping.

We build a sitemap: a hierarchical map of all the pages, which clearly shows the relationship between them, and how each page is linked to another. Thus, we know for certain that no page is “floating free” (meaning that it is not linked to from another page) unless that is a deliberate tactic, such as a market-specific landing page. We can also start to make decisions about the navigation menu structure, to make it easy for end users to seamlessly browse through the website.

Another concern is the amount of content required on the website. While it’s fine to manually add ten or twenty pages of content, if the content runs in the hundreds, thousands, or even tens of thousands of pages, then a specific strategy is required to deal with such volume, as doing it by hand is simply out of the question.

Design.

For us at Mäd, design is the differentiating factor. By design, we mean both how things look and how they work. We’ve previously written about why great design is crucial for a successful business.

General Look & Feel.

In the early stage of the design process, our main goal is to try and capture the essence of the brand, and to make sure that we choose the correct direction to represent the brand online.

This normally means doing the following:

  • Creating mood boards: These are collections of images, quote, ideas, and examples that combine together give an idea of the general feel for the brand, as well as the general tone.
  • General Look & Feel: The designers assigned to the project are given a free reign to come up with any ideas they fell might well be suitable. We place an emphasis on having a wide range of inspiration and iterating through many ideas.

Wireframes.

The wireframes are generally the first real technical aspect of the project. Our design team will create wireframe mockups of every single page of the website for both desktop, tablet, and mobile devices, and sometimes even multiple variations for each page.

Wireframes are clear to the client that this is a work in progress. They also remove the unnecessary details, such as color, alignment, shading, contrast, etc. From the wireframes, the content becomes clearly laid out for each page.

The truly beautiful thing about this stage is the fact that feedback is incredibly easy to act upon. Each page should only take a short amount of time to create. The team can make changes on the fly by just dragging and dropping, without any need to write code.

This is where plenty of the discussion between the project team and the client takes place, to make sure nothing is left out of the detail.

HTML5 High Fidelity Mockups

The next stage of the design process focuses on actually building the real user experience, adding real content if available, or just dummy data if not.

HTML (the markup language that allows web pages to be displayed by the browser) mockups are high fidelity, meaning that the final version of these mockups is exactly how the website will look, minus a few tweaks and bug fixes during the testing phase.

This gives the client a fantastically clear view of what they are getting as a final product, but without many of the usual issues of making changes based on feedback as if we had built out the actual functionality.

This method gives us the benefits of both worlds. We do the least amount of work possible to get the maximum return on our efforts, without encountering the usual stumbling block of having to rewrite code and waste endless amounts of time.

Development.

Once we have the HTML5 High Fidelity Mockups complete, we then move on to the development work.

Choosing the right CMS.

Choosing the right Content Management System (CMS) can be a difficult choice for a client, but we’re always around to advise on the best fit.

This is a complex topic, and something that we feel is best suited for another article. But let us leave you with this:

We will always take the full requirement specification. We then give at least two recommendations based on the following:

  • Things that well for other clients,
  • What fits the skills of the current project team,
  • What we feel will work best for your organization.

CMS Integration.

We integrate the design that was completed in the previous stage and start to make the static HTML website into a living, dynamic system.

Contact forms will start to send emails, blog categories will dynamically start to pull content from the correct categories.  Google Analytics will start to track the pages, content will be editable, and in general, the system will start to look like a finished product.

This is often where amateur agencies finish the job and push the website live. We don’t. It can be frustrating as a client to wait, especially as the website appears, to all extents and purposes, to be complete.

There is still plenty of “under the hood” work left to do to actually be able to deploy this website.

Testing & Optimisations.

The web is becoming an ever more complex system. Nowadays you don’t just have to build for the thousands of different devices in the market, you have to build for devices that don’t even exist yet.

Ever higher-definition screens, browsers that update every six weeks, and yet the user still expects to have an awesome experience on every device.

This is why we do rigorous testing on both the browser and device level. It is imperative that both a user with an iMac Retina 5k display and someone with a mid-level smartphone can both enjoy the superior user experience that our clients expect from us.

However, that’s not it for testing. We still need to test that every website feature is functioning as described in the original specification document. What’s more, we take external QA (Quality Analysis) specialists to test our work and give us honest feedback.

In fact, they are incentivized to nitpick at our team’s work and find issues. We welcome this because it helps us maintain our high standards.

The last thing to test is the Production (this is what will be the “live” environment) server. Before we go live, we make sure we have a carbon copy of the current website and database on exactly the same server setup that we will use when the website is live. We and test and fix any issue that may arise from this, configuring and optimising both the server and the code for speed and security.

Go Live.

In the days leading up to the big launch, we add remaining content, making changes from the client’s feedback. Needless to say, we also continue our testing.

We’ll normally set up the DNS (the service that controls domain names) via CloudFlare. On the big day, there is no wait for the website to go live. On a click of a button, the entire website is simultaneously live all around the world.

If it’s a high traffic launch, we will then spend the day monitoring all systems. In doing so, we make sure that we have estimated the correct infrastructure. We’re ready to step in at any time to take corrective action if the traffic is greater than originally planned for.

Continued Operations.

We believe that launching a website is only the first step. Continued operations make or break the business.

With this in mind, we always include a period of continued operations in each website design and development project. This may include the following:

Warranty.

Every Mäd project comes with full warranty against any bugs that may have been missed during the testing phase. This phase normally lasts up to two months, hence it is to report and promptly deal with any issues.

General Maintenance.

This may include work such as bug fixing, functionality changes, upgrades to servers and software. In general, this is normally the least required for the continued smooth running of a website.

Even the ubiquitous WordPress platform requires at least one day a month to deal with system upgrades, known security issues, and general optimizations.

Emergency Work.

If there is an emergency, we’re always just a phone call away at any time of day, able to start working on the issue immediately.

We don’t all work during the same time zone because of our distributed workforce. Clients have people around the clock at on their project.

Planned Traffic Spikes.

We expect visitor surges during certain types of marketing events like television commercials and coupon giveaways.

We work with our clients to proactively prepare for such situations. In doing so, we always make sure that the funds invested in the marketing won’t go to waste because the website wasn’t able to handle the traffic. This often means spinning up temporary servers, or caching the website more aggressively.

Conclusion.

So there you have it: a high-level overview of how we will approach a general website design project.

Obviously, this is just a general plan. Each project has its own phase plan created during the project setup phase.We don’t blindly follow protocol, but actually take the correct steps to create the best possible website design for our clients.

Emanuele Faja

Emanuele Faja

CEO at Mäd. Emanuele brings on board a passion for minimalist Italian design and a 21st-century management approach. He consistently helps clients create and maintain market leader positions.

Read More
Our Website Design Process.
Share this

Subscribe to Why #workwithmad