EDITING BOARD
RO
EN
×
▼ BROWSE ISSUES ▼
Issue 33

The importance of prototyping

Cătălin Timofti
UX Designer @ SDL



PROGRAMMING

I got my first job as a UX Designer at a multinational company back in 2011. Since then I had the opportunity to work with different methodologies of developing a design, succeeding to discover the pros and cons of each of those methodologies.Currently I'm employed as a UX Designer, I work with a team of 17 designers in an Agile environment, all with the main purpose of delivering the best experience for the users of our software products developed by the company.

The innovative environment I currently have the chance to be part of and the freedom of experimenting with diverse methodologies, allowed me to try new procedures for developing a design. Comparing to the previous methods I used, I have finally decided to stop on a single one, which I consider to be the best in delivering a successful design: using prototypes.

Therefore, I consider that the achievement of a product must always begin with a prototype, no matter if the product is a software or a hardware product. The prototype gives a clear idea and an exact preview of the final product. The prototype is a clone; it's a screenshot of the future product, which will become fully functional after the implementation is completed.

For me, there is no exception from this rule. For each project that I work on, I start with an overall idea, designed on a piece of paper, reaching up to the point where it may be constructed as a prototype of the final product, in the smallest detail, regardless of whether it is a layout of an interactive website or a 3D simulation of an object.

The process is carried out in iterations. With each iteration, the prototype gains more details, becomes more powerful, up to the moment when it is considered functional and ready for implementation.

The concept of iteration is as follows:

  1. The first iteration is always the part where all the necessary information is gathered from the experts in the field, for the product for which the design is created. All the information is rechecked by the team, from a technical point of view. We then determine what functionality is desired and then I draw the first sketch of the future product and determine the flow of the design for the project that will be carried out.

  2. The second iteration focuses in particular on the interaction with the product and on the validation of the functionality set out in the first iteration. What we are focusing on in particular in this iteration is the way in which the prototype is used by the target audience. More exactly, we make available for it a first version of the prototype and we analyze the way the user interacts with it. We want to observe if the user feels comfortable with the position of different graphical elements, if it is lingering after a long usage, if he/she identifies the main components easily, etc.

  3. Finally, in the last iteration of the design process, the focus is on the visual details and finishing the prototype that has been carried out. The prototype gets a commercial shape, through complex graphical elements and by repositioning its components, if necessary, based on the feedback resulted from the user testing feedback. Collecting this feedback is essential, because, when the design is validated, it goes in the implementation step with all the specifications clear and complete and it will finally be transformed into the product desired by its purchaser.

Iterative process to design a prototype

Each designer has its own preferences regarding the tool to be used for carrying out his tasks and creating Prototypes. Personally, I prefer using Axure to create prototypes and pencil and paper whenever I need to sketch an idea fast. Why Axure? Because you can develop an html prototype which evolves in an organic way, from sketchy drawings early in the first iteration, through to a fully designed prototype ready for user-testing and build.

However, the best tool is the one you feel the most comfortable with and you can create your designs in a reasonable amount of time with. What really matters is the final design, a design that needs to be easy-to-understand, usable and implementable.

Creating a prototype has only advantages and from my experience with different ways of working, it is always a preferred method, rather than creating a product by following the principle "go ahead, do this on-the-go and improve along the way". The product stakeholder will know exactly what enters into production and what you receive at the end of this.

I will elaborate 5 advantages of using a prototype:

1. It simulates the actual product

The most important advantage of a prototype is that it simulates the actual and exact future product. Using it can attract customers to invest in the product, before assigning any necessary resource to development process. The design correctness can be tested before it goes in production, where design errors might be discovered and compromising your whole project. Also, a prototype is tested on a representative number of users and helps you to discover up front how they interact with the product and to know their expectations.

2. It challenges you to come up with new ideas

Each stakeholder and user has his own vision on the product that needs to be implemented and, basically, wishes this vision to be found in the final product. Presenting the prototype helps gauge all the ideas and gives to the beneficiary the possibility to see the product from another perspective, to see it materialized and to provide a feedback focused on the desired details, on what they initially had in its mind. Starting from a low-fidelity prototype that is focused on design flows and which directs the user to review functionalities and the steps that need to be followed, we get to the point where we have a high-fidelity prototype, a point where we obtain feedback regarding the visual details, such as fonts, colors, alignment, button size, etc. Feedback is essential to find out what the needs and expectations of users are, the requirements of the business, and to have a clear idea of the direction in which the product is heading.

3. It prevents any major problems

Creating a prototype which can be tested as soon as possible makes it possible to resolve major problems before they cause financial damages, if it goes into production. By testing the prototype on real users, the suggestions and expectations of the users are obtained in advance, before the product is released.

Between the multiple existent methods to trace issues faced by users, Google Analytics for example, a tool I use very often, provides the ability to interpret the data for the usage of a product by a user located in his comfort zone, without knowing that the user is being analyzed. Their behavior in the interaction with the product will be natural and realistic, other than when they are invited to a session of user testing, a session in which they would know that they are being analyzed.

However, user testing in which the user is monitored live is the best way to deal with the problems they are confronting, since there is a possibility to gather as much feedback and see exactly where the user is failing in carrying out the usage tasks.

In our work environment, we send user surveys and we select potential users for testing. From all of them, we select the ones with higher chances of using the product heavily and if they also check the option of being available to participate to the usability-testing sessions. These sessions are carried out online. Each user shares their screen in order to demonstrate the way they interact with the prototype. Our role is to trace those design sections where the user gets into difficulty. According to the information collected from these sessions, we update the prototype and afterwards, we organize another testing session.

4. Planning

The teams which implement the design receive essential information that helps them to plan what needs to be implemented. A prototype may be considered, most often, the specification of the project and helps the entire team to create user stories and focus on the users' needs.

As long as it is carried out in time, before the beginning of a Sprint, it only brings benefits for the Scrum teams.

From my experience, what I noticed is that having an interactive prototype helps the programmers involved in the implementation process to have a more clear idea on the way they have to think out the interaction of the design components, which saves the company time and money. Through the prototype the message is much clearer of what needs to be implemented in reality, more exactly, the vision from the first iteration is materialized.

5. It's quick and easy to create

Even a stakeholder of the product can build a prototype. What is essential is to provide a simple idea on paper, for the designer to understand the functionalities and the product logic. This simple sketch, which, for example, can be an illustration with a few buttons for a web site, will be converted by an experienced designer into a complex product, highly detailed and ready to be approved for implementation.

Conclusion

I trust that this article has brought a great value on the prototype topic in the production software environment and has shown how important it is to have it. Its impact on the final product is phenomenal. It is not just that it prevents problems in the production environment but also protects the company from unforeseen costs, and streamlines the work flows, forms an overall view to all parties involved (programmers, testing engineers, product owners, stakeholders) and it is also an excellent resource that can be used in pre-sales.

VIDEO: ISSUE 109 LAUNCH EVENT

Sponsors

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects

VIDEO: ISSUE 109 LAUNCH EVENT