How to make a website design development profitable? (Part4)

Today we will refer to prototypes. First of all, I want to ask 32% of readers who are already acquainted with them, not to prevent the other 49% of readers from understanding this question because they have never tried working with services for prototyping.     

Do you know about existence of services for prototyping? 

• 32% I know and use them; 

• 25% I’ve heard about them and read some information, but I’ve never used them; 

• 14% I’ve used trial versions but I see no point in them; 

• 5% I know and I’ve tried but they are too expensive for me; 

• 24% I’ve never used them but they are interesting for me.

“Prototyping”

In this subject it is better to tell more abstractly rather than concretize and dwell on one of the services because unlike other types of work, they include many services – more than 50 popular ones.  For those who are skeptical, I want to say – If only I knew how much time could I save and increase productivity then I would immediately buy the service for prototyping.   

One sunny and beautiful morning, I came to work, made a cup of strong coffee and decided to read the client’s e-mail message and I suddenly wanted to spill this hot coffee over him, throw this cup in him, tear the contract and make him eat the signed layouts because in the e-mail message the client wrote: let’s rewrite the upper and lower parts of the page and two other pages – front page and list of services while the half of work has been finished.  

So the designers and I started thinking what we were lack of and what tools we didn’t use?  ТЗ is available, project documentation is available, layouts on board are available; each after each layout was approved by him. After this situation someone said skeptically: “Should we try prototyping?!” We immediately came up in Google, read information about prototyping, chose the application and bought it.  Moreover we bought it for a year for $69. I liked that there was a 25% discount when buying for a year. But it is not the point (it was mockflow.com).

We spent a day in order to examine the application.  In two days the designer gave me very long link (the incredible disadvantage of this service is that it is stored on flash memory) for opening the whole site prototype. All this took less than 16 hours(the web-site was small, up to 10 pages + 404, alerts, short cut menu and message to the client – the full set).  I calmed down after the client’s e-mail message and wrote him the following: “Look at the project in general, the web site will be designed in this way, no more, no less; view all pages, study all the project details; your web site will look exactly the same, however, it will be colorful and will contain photos; its structure, menu, buttons, icons… everything will be as on the prototype”. And you know, the client answered me that he did not want to change the layouts anymore, he understood the whole concept of the web site and it was all right for him. We’ve just saved a week of work and maybe much time in future.    

How to use services for prototyping? 

You have an idea, structure of a website, some content and a board. Fix on the board general thoughts and ideas. Discuss the web site concept with personnel, software developers and layout designers (make a photo and add it to general google document which was discussed in Part 3). After that the designer who has an idea of the project and photo in the document, basing on the project structure, has to make a prototype. Having spent from 15 minutes to 2 hours for designing one page our project is ready.  The designer puts a link at the top of google document in the information block.   

After that all project participants have to get familiar with the prototypes using the link in the general document. Then we meet or contact there by messages. What do we have? The whole project – completely designed variant. The next step is to find nonconformities to the layout.  All those little things that are always lost and then added at the end. Nobody likes when it seems that you have already finished the work but the client or manager constantly gives more and more work: “you’ve missed the link here”, “we agreed that here should be a tick mark” and in that manner. Immediately look for all mistakes and all things which then will take you much time. 

Everything you want to do“later” immediately multiply by 2 and a month later multiply by 4 – these will be your losses.  

Looking for the “details” is the most complicated process. Sometimes you see the web site and think that it seems to be good but later when you see practically the same web site you think that is not so good. Why is it so? The first web site contains something small and it took some time to notice them - the “details”. Namely the “details” make the web site good and the resource convenient. Links to password recovery, page 404: stateful alert, tooltip on an icon, the link to information and an explanation line. Why do I write this here?! The answer is that photographers still like making black and white photos. They have more details. The same is with prototypes – it is better to find on them all missed details, icons, functions and finally the whole pages which were not provided earlier.   

The project structure

I write about the project structure in all parts of the article. Everybody sees it differently but no one can do without it. To my mind, the cut version – without explanations, only listing of all pages by nested lists is the friendliest. But each to their own. Moreover, the file may contain a multilevel structure, while it is better to use dual-level nesting for theprototypes and layouts.    

You should understand that at the moment of the first layouts creation the designer or manager often understands theproject and sees it “from the top” and in whole.  Meanwhile the client, layout designers and software developers see it “standing on the ground”. They do not understand immediately that they make the project, how they make it and why.  

Your task is to show the project linearly and sequentially, one layout (prototype) by one. The client should open the first layout (prototype) and just click “next” button. Your task is to create the right chain, make a structured presentation of the layouts (prototypes). What is the result? The result is that the client will ask minimum questions and accept even your first layout – and that is your profit. Of course, he will tell his remarks, but these will be relevant remarks. The client will find only those details which you’ve missed now but not on the project deadline date or a week later.

Where are savings and profit?

Make the project “breakdown”. Does a website user perform any actions in the page? Does he enter some data? Is there any reaction of the web site? Is everything happening in the same page? Show the section “Writing an article on Habra” (habrahabr.ru) to the user. The websection will contain the following layouts:   

• answers to questions;

• answers to the second questions;

• blank form for posting;

• form with unfilled boxes (is not validated);

• preview form;

• form with all drop-down lists;

• “your article has been published” alert;

• “thank you for publication …” page. 

That is either one or three prototypes with sketched out information.  It is a “breakdown” at the prototype stage. Having seen this, the client immediately understands how it works and how the web site is compatible with a user. It saves your time and the time of the client. It also saves time of your team. We are picture persons and for us a picture is worth a thousand words. Also you will save much time for explanations to the layout designer on what the page should be. The software designer sees functionality and you save time. The same happens at prototyping stage – the designers can discuss the effects and technologies, they can remove everything which is difficult or impossible to create. This also will save your time. 

The next step is that the client has to sign everything, approve and understand that there is no way back. The layouts will be created according to these prototypes. They will be colorful, with photos and nice buttons and no other ways. These are not words but the picture. All the client’s wishes not included to the prototype is the additional payable work.   

The conclusion

Do you need more facts?! On an average, having applied severe rules and prototyping, we managed to meet the deadlines and almost meet the specified man-hours limits. I will not lie and say that this is a decision of all problems but to meet the deadline and budget means to get a profit.  

In the next chapter we will discuss the problem of the “firstl ayout”, I will tell what structured presentation of the layouts is and consider an example of these services usage. 

Do you know about existence of services for the structured presentation of thelayouts to the client?

• 10% I know and use them

• 34% I’ve heard about them and read some information, but I’ve never used them

• 11% I’ve used trial versions but I see no point in them 

• 3% I know and I’ve tried but they are too expensive for me

• 42% I’ve never used them but they are interesting for me  

• 325 persons have voted, 134 persons have blank votes.  

© Igor’ Abyzov
project manager