In the previous article, we described the preparations necessary to start the project: creating a business model, market and competition analysis, and developing and detailing the documentation. Without these stages, we cannot proceed with further work. Today, I will show you what the next steps in the project are.
Stage II – Information architecture
This is a site map containing all the tabs that should be on the website. From the home page to all subpages of the website. Let us remember the three-click rule, i.e. we should be able to reach the deepest part of the website with 3 clicks from the home page. This rule applies to informational websites; it is not followed in functionalities such as the registration process, and this is not considered an error in website design.
The site map is usually prepared by the agency. This is the next step in estimating the scope of work. The creation of the site map is also included in the cost estimate.
At our agency, we create such a map in Axure RP or UXpin, which is the starting point for the next design steps. Below is an example of a map for one of our clients.
This is why some agencies, when asked to create a portal or an extensive website, first present an audit offer. If we do not have a mock-up, we do not know how the elements are supposed to work, and this can result in differences in cost estimates of up to several tens of thousands.
Stage III – Copywriting
Every portal needs content that must appear on it. We already know what pages should be on the portal, and we also know what content we need. Each subpage has a purpose, a call to action. For each subpage, we need, for example, advertising slogans and information for the customer.
Someone has to prepare this, and we have to include this investment in the cost estimate. Sometimes the copywriting stage follows the content architecture stage, and the mock-ups contain content describing the guidelines for the copywriter.
Stage IV – Content Architecture
This is where we begin the process of prototyping our portal. We know what tabs we have, we know what the content should be, and we have specific goals for each subpage. Now our task is to create a mock-up of the website with the layout of all elements. This stage can be done in a more or less extensive version.
The basic version only involves placing elements on each subpage so that the client can see the website in a block model with text – this will allow them to see what the portal will look like. There are no graphics here, just a solid model with text!
The more complex version involves a functional model where all elements are clickable, buttons lead to specific subpages, contact forms can be filled in, and users can go through the shopping basket or register for an event.
Such a functional model should be created for both the user side and the system administrator side of the portal.
This stage is the stage of initial beta testing. We should now sit test users in front of monitors, give them tasks to perform on our portal, and have them point out errors in the content architecture. We can make assumptions when creating a model, but only the end user can verify whether our assumptions are correct. After testing, we make corrections, then test again and repeat the process, observing the behaviour of test users and making changes to the portal. We also perform tests on mobile devices.
Why are tests so important?
Let’s imagine a situation where we are running an AdWords or Facebook Ads campaign directing users to our portal. Let’s assume that we direct 50,000 users there. We want users to register. However, we have a very low registration rate and we do not know why. It may turn out that, for example, we have made the registration process too difficult, users cannot find the registration button, or we do not give them clear instructions on what to do. As a result, the money spent on the campaign is wasted.
If we had tested our portal on users, the errors would have been caught at the development stage. Unfortunately, in this case, we will pay twice. We need to do tests and hire programmers to improve the functionality of the website.
Stage V – Graphic design
This stage of the project involves “dressing” the skeleton from the previous design stage in pleasant and neat graphics. Each subpage should be presented as a file that will be sent to the client for approval. This way, we will avoid a lot of corrections such as “please move the form to the right”. This stage is complete once users have demonstrated that this architecture works. We do not change it. The colour scheme of the website is also strictly defined in relation to the target group and is the result of research and colour analysis, rather than client guidelines, which are often based solely on aesthetic preferences.
Stage VI – Animation planning
It is possible to code something “rigidly” without animation, but it is also possible to introduce small touches that make the graphics more attractive. Please take a look at krakowresor.se – it is a simple website, but the animations make it more appealing than it would be without them.
Stage VII – Web development
This stage consists of two steps:
a) front-end – portal interface,
b) back-end – software for all portal mechanisms.
This is where we see the culmination of the previous design stages. We use source code to transform our content architecture, dressed up with graphics and a dash of animation, into a functioning web portal.
I will not elaborate on the reasons for using a specific programming language, but the approach to how a given portal is to be coded can vary in cost from several thousand to several tens of thousands. We believe that solutions should be created according to standards that give our clients the opportunity to continue developing their projects in any agency in the world. Most often, an agency creates something that no one else is able to develop further, and programmers shy away from such projects because you never know if changing one line of code will change half the page. We focus on quality – the source code is created according to best practices, in a documented manner and in accordance with international standards.
Project ready?
If you think that’s all you need to do to create an effective portal in an effective way, please wait. I have prepared another part of the article. Click here.
