At Fabric we have a very defined way of designing our websites which is very unique to us. It has taken us 5+ years to develop this process to where it is now.
At Fabric create websites that cover off 3 factors:
1)Business Goals – ensuring that the design covers off the selling of the key services or products that are important to the business
2)Google Requirements – making sure that when we design and build, we build with Google best practice in mind. There is no point making a website that can’t be found by the target market
3)Ensuring that it is Customer Centric – we want to ensure that we focus our website design on our client’s customer
Ensuring that these three factors are catered for are of upmost importance and we find that every website that we redesign, is due to one of these factors not being considered. I guess that is because if your phone isn’t ringing – the chances are that your website is letting you down in one or more of the three areas above.
So, lets begin in the process of web design – the Fabric way.
First we start with the Sitemap
The design of the website always starts at the proposal phase of presenting a solution to a client. In this, we seek to find a solution of the architecture of the website that will best suit the three main factors above. Ensuring that there are the right amount of pages within a website is highly important, especially when dealing in highly competitive industries. As an example the home services market.
Making sure that every service is laid out on its own page is imperative. It sets the foundation for the UX of the website and also sets out, what search terms we want to rank for later on in Google once the website goes live.
In the example of the home services market, we created a website that went above and beyond, creating a module in the website that automatically generated landing pages for their services, based on suburbs within Auckland, NZ. In essence, knowing how competitive the home services market it, we developed this piece of software to enable us to automatically generate the landing pages for localised search options, so when a potential customer used search terms such as “roof repair Torbay”, they would be greeted by a H1, H2, Meta description and landing page relating to the search phrase “roof repair Torbay”.
The sitemap is the foundation of the website, it’s the overall plan of how the website will be structured and a lot of time goes into creating it.
Next draft wireframe (90’s ransom letter)
Once a client signs off on a proposal from Fabric, the internal meetings begin. Within the internal meetings and workshops, we as a team discuss the client in great detail, including their industry, their customers and industries like theirs. We focus on their customers decision making process and focus on how best we can layout what the client does within a website, generating maximum calls to action.
In this process we scour the internet to compile a library of website components that we like and feel would work in the website build. By scouring the internet, we look at anywhere between 200-1000 different websites, taking snapshots of different design elements that we can use of our own build.
In this we create something synonymous with an old 1990’s ransom letter, cut and pasted to show what the website will feel like.
The draft wireframe is a really important component to the website design process, it sets out how the website will feel, how the services will be laid out on the homepage, how much information we want to the target user to be exposed to on the homepage etc.
Most importantly though, it shows the client, how the website will feel and from a really high level what it will look like. Here is an example of a draft wireframe:
Once the client signs off on the draft wireframe, the designer strips back the elements of the draft and creates the actual pixel perfect wireframe. This is the overall architectural structure of the website. It’s a black and white version of the website, showing exactly how the site will look at feel without colour. These initial stages are crucial, as it gives the client the opportunity to change up where elements will sit and make the small changes needed to ensure client satisfaction.
Once then client is satisfied with the UX of the website and this stage has been signed off, we add colour, pictures and content to the wireframe to come up with the UI concept of the website. This is where the concept, really looks like the final product. The best part about the UI concept is that it is a huge image and if changes are required, the designer can make the changes fairly easily with a few clicks of a mouse. It is much easier to change elements here, than in the development phase, so we want to ensure complete client satisfaction before moving into the development process.
Once the client signs off on this…. Boom, the concept is passed on to the developer to code into HTML format.
This process is foolproof, it ensures complete client satisfaction keeping our clients atop of all changes being made to the website. It requires minimal effort from the client too, a short meeting at each stage for signoff. There is nothing more frustrating than getting a to the end of a project, ready for launch and the client is dissatisfied with the product. This alleviates this and saves on expensive development hours.
If this process is something that you would like to be involved with for your next website design Auckland project, feel free to contact us anytime.