We've created beautiful and functional websites for companies and organizations across a multitude of industries, including leading banks and financial institutions.
Our belief is that a website project is not just an IT project, but requires a cross-functional team of designers, copywriters, photographers, website developers, business analysts, and testers to ensure that the end product meets the needs of multiple stakeholders and adds significant business value.
Our approach to website design is to ensure that your new website has a clear set of goals and that the website works hard to achieve these goals, whether it's purely a matter of getting your brand out there, or you have a specific number of leads that you need to gather each month, or if you need to clearly articulate all your numerous products and services in an easy to understand manner.
While every project at Mäd has a made-to-fit plan and process, our high level website design process is as follows:
- Research & Discovery.
- Design Directions
- Information Architecture.
- UX Design.
- Content Planning.
- UI Design.
- Development & Testing.
- 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.
Research & Discovery.
The Discovery and Research phase helps Mäd understand client and user 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 (or a Design Sprint, if applicable) where each requirement is written down in a simple sentence, before prioritizing 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.
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.
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 room 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.
We build the information architecture (often called 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.
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.
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.
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.
We use Figma as our design tool of choice, because it matches our highly-collaborative nature (two or more people can simultaneously work on the same file).
In addition, Figma has prototyping built-in, so we can easily showcase our work in progress to client as we move forwards.
Having a "real life" prototype is critical in ensuring we can get fast approvals because key stakeholders can "feel" the design as if it was real. We have had CEOs of major banks sign off on design directions during the presentation meeting itself because they could instantly connect with the design and navigate the prototype as if the website was already complete.
Development & Testing.
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. We are big fans of Webflow (see Why Webflow for more details), but we are aware that choices have to be made based on the business goals.
This is a complex topic, and something that we feel is best suited for another article, but the key points to consider:
- Things that have worked well for other clients.
- What fits the skills of the current project team.
- What we feel will work best for your organization.
We integrate the design that was completed in the previous stage and start to make the 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.
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 because 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.
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.
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.
- 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.
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 that help them reach their organisational goals.
Request a Proposal.
If you would like to #workwithmad then send us an email at firstname.lastname@example.org and let's Make It Happen.™