Skip to main content
illustration of climbing a mountain, i.e. the process of prototyping

How do prototypes complement analyses? Part 2

Sigrid Varemäe & Trinidad Wiseman’s service design team leads

Last week, in the first part of this article, the Trinidad Wiseman service design team leads gave you an overview of what a user interface prototype is and why you should use it in analysis projects.


We talked about validating prototypes with end users and also described different kinds of prototypes – which we also use in the various projects we work on – along with their advantages and disadvantages. In this article, we will continue on the subject of prototyping.



How is prototyping done for different kinds of projects?


As we mentioned in our previous post, prototypes are focused on the user journey AKA how the user can do different activities in the system.


Regardless of what kind of project you are working on, if you want to reach the best and most convenient solution for the user. 


Then the first step should always be creating a black and white wireframe which can then be used to agree on the different parts (information blocks) and components of the page. Below, we will take a closer look at prototyping for different kinds of projects.


For an informational website or a homepage, the prototype is more likely to consist of static images with the structure being agreed upon using a wireframe. If the project is not overtly complicated, then the design stage can be reached in just a couple of days.


For online stores and advertisement portals, things get a bit more complicated, and more views are needed. It usually takes a few weeks to get from the black and white prototype to the design stage.


For example, online stores are very widely used environments and their general structure is already known to most users. So, if the most common solutions (shopping cart, search etc) are used to create one, then prototyping will also be a lot quicker and easier to do.


It is a lot easier to bring in design elements (colours, fonts) when using commonplace solutions such as these – we can create a prototype that is quite close to the final product since we do not need to invent many new things.


The chance of any misunderstandings arising is also decreased and, in all likelihood, the shopping cart or search solutions will be similar to how the designer made them or how the client has visualised them.


Information systems are quite complex solutions. This category mainly covers tools used by experts (e.g. registers for doctors, police officers, or judges that they can use to work on different cases). These types of solutions are very specific to their fields and need to be created from the ground up.


This category also includes systems that people use for various services. Every service is special and ones that can be used fully through an online channel need unique user interfaces. There is no one solution that fits all – however, there are patterns that can be reused.


For information systems, it is definitely worth starting out with a very simple black and white prototype. This enables us to iterate very quickly from the beginning and to reach a stable foundation before moving on to the design stage.


In general, these kinds of projects take many years to complete, and prototyping is done continuously throughout the project. In other words, work for the next stage of the project is always being prepared for the development team and prototyping is done in cycles that are between two to four weeks long.



Cooperation between the analyst and the prototype creator


The role of the analyst is to bring business rules to the project AKA everything that needs to get done and must be taken into account.


Let us take a closer look by using the example of a compensation application project and let us suppose that its goals are as follows: the offer must be submitted to the client and all of the client’s questions must be answered within the user interface to ensure that there as few attempts at getting in touch as possible.


Here, the job of the analyst is to determine all of the questions the client may possibly have and to analyse the various use cases. It is the analyst’s task to think about the situations the user may encounter in the system.


For example, the user may get through all the different steps of the process of applying for compensation, but they may then realise they filled something out incorrectly and wish to go back to that place and fix their mistake.


The analyst must be able to identify all the places where the user must be allowed to change things as well as those where they cannot be allowed to do so.


Additionally, the analyst will provide the project team with information about which kinds of solutions can technically be created and which ones would require a huge amount of work and would thus surpass reasonable expenditures.


Using the prototype, the analyst can get a general idea of the technical expectations for the planned solution as well as the amount of work that needs to be done for it.


A prototype is a tool that can help get the project team on the same page about what exactly is being done and why, and what everything should look like in the end. Completed prototypes can easily be amended if any new services should be added to the system in the future.



A designed prototype vs UI design


In UI design, the focus is on reaching a solution that is as visually attractive as possible. But the purpose of a prototype is to define the overall user journey and the architecture of the user interface, which means that a pixel perfect look is not the primary concern.



Low detail prototype, high detail prototype and UI design or design, by Rene Rebane


We recommend that you first create a black and white low-fidelity prototype that can be used to reach an agreement on the information architecture. After that is done, you can move on to discussions about the design elements. If you need and wish to, then you can also have a fully polished beautiful prototype made in the end for usability testing. 


For big corporate clients who already have a clearly defined visual language, all prototypes can be made using the actual final design (correct colours and fonts).


In these cases, iteration also takes a lot less time and black and white prototypes can be used only when creating a new functionality with a work group to specify any necessary details.


The following link will take you to one of our high-fidelity prototypes from 2019: prototype of the Social Insurance Board’s self-service platform


The benefits of using a prototype in your analysis process:



Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.