4. Prototype, test, refine

The actual design phase serves the purpose of visualizing how designers think they software can best solve the challenges discovered in the research and concept development phases. It goes from sketching, through discussions and then to interactive prototyping which is iteratively redesigned and improved until the result is ready to go into production.

The prototyping phase starts with a low-tech design, sketched out on paper or a digital tablet. It is a fast and cheap way to communicate highly visual concepts and interaction ideas to users, who can then provide their feedback.

Initial wireframe sketches.

Particular functions can be sketched out and presented in isolation, or a group of functionalities can be designed and discussed at once, to let everyone understand the coherent vision and interaction pattern of a given set of features. Because low-fidelity sketching is so fast and efficient, this process can take place fairly quickly, and changes and ideas can easily be implemented before proceeding.

Online meeting discussing wireframe sketches; adding notes on questions, advice and ideas for improvements.

In the FOLIO setup, wireframe sketches are often discussed in online meetings, and the recordings published for people to watch later if they cannot attend the meeting in question.

When the wireframes seem to make sense to the group as a whole, the sketches are taken a step further. Without any actual coding, interactive prototypes are created through drag-and-drop tools by the designers themselves. The results are crude, but interactive mockups of what the app interfaces would look like. They can then be shared online for people to try out for themselves right in their web browser.

Getting to “try out” an interface gives people a very real sense of what it would be like to use a final interface, and sparks discussions and advice that people might not have thought of during the rough sketching phase. The interactive prototypes can be developed to become more and more specific, eventually looking exactly like the end result would appear. Oftentimes that is not necessary for development to start, because the primary purpose of the interactive, non-programmer, prototypes is to communicate the structure, the flow of screens, menus, drop-downs and buttons, and not so much to communicate styling details like drop-shadows, rounded corners or color nuances.

Interactive prototypes allow people to get a feeling of the final result—and provide feedback—before a single line of code is written. To support the FOLIO UX process, a customized prototype setup has been developed, allowing for multiple design teams to present a coherent product design in one place, and for a global audience to give advice and share ideas for improvements.

FOLIO, being a micro-app system, has required us to develop a custom setup where users can explore all the prototypes in one place, essentially conveying the feeling and experience of using FOLIO itself, and how users would navigate between apps and how they would use system features.

The interactive prototypes are accompanied by videos that explain the context and conveys any information not apparent from the user interface itself, like the underlying logic of a given function.

The crude interactive prototypes are developed quickly, and are therefore quick to alter and update. Details about the context of the app are communicated through an accompanying video for each prototype, explaining things that might not be obvious in the interface design itself.