Ryvra is designed to simplify the UI design process by eliminating the step between analog and digital wireframes through automated digitisation. Sketches can be scanned and immediately converted into digital wireframes.
In the days of the digital age, the question often arises as to why pen and paper are still used. That is why we decided to do research on the justification of analogue work. What advantages do analogue tools bring with them and will they remain relevant in the future?
In order to get a better understanding of how UI designers scribble, we had 20 test persons replicate six selected screens of existing apps. We selected screens of varying complexity and asked the test persons to show how their scribble of the respective screen would have looked like in the design phase.
The analysis of the different sketches allowed us to gain insights into the individual ways of drawing, which were crucial for the development of the later symbol system.
Afterwards, we conducted a short interview with the participants in which we asked them about their individual approaches and process when designing screens.
For instance, we asked:
With the help of the results of our research we created the symbol system. In our development we concentrated on the implementation for mobile devices and iOS.
The developed symbol system enables the scribbled wireframes to be converted digitally via machine learning. Beside the most used elements, like buttons and pictures, we also developed commands. These are supposed to make the sketching, and the digitalisation later, easier. Moreover, words that have been written out can be captured and digitised by OCR (optical character recognition).
In order to make it possible to realise the sketches at any time and place, the smartphone seemed to be an obvious solutionas a reference tool for the symbol system, since it is always at hand.
All elements from the symbol system are listed in the library so that they can be easily looked up if they are forgotten.
The app also includes a camera function as well as the project folders in which the photos can be saved. This way you can access them later on your desktop.
The first step is to select the photos you want to digitise. In the next step you will be asked to choose your device type. In the background, the appropriate symbol system, adapted to the operating system(in this case iOS), is selected. Afterwards,the desired pixel grid should be selected so that the elements can be aligned with it during the digitization.
After the transformation of the wireframe, one has the possibility to change individual elements if necessary.
The following options are available for the editing: Change wrongly recognized objects, select and determine unrecognized objects, select alternative elements, change style and move elements in the grid.
During the research and interviews it became clear that wireframes reach different stages of development during the design process. These bring certain advantages for different purposes.
That's why, after the transformation of the scribbled wireframe, the designer has the possibility to switch between three different styles. The layer element functions as kind of a view mode that displays the artboards in the respective style. The content of the board is not changed, but only displayed differently.
Only outlines, very similar to the selfdrawn sketch. It's supposed to enable the designer and the outside observer to reduce the sketch to the content.
Individual elements are already taking on more realistic forms, but the elements remain in shades of grey.
This is the final design of the project. The designer forms this style themselves by making their own adjustments to the elements of the symbol system.
Content, such as icons or images, can be replaced and adapted quickly to the user's own style.
The symbol system can be used like a design system. Unlike assets, elements do not have to be created from scratch, but it is possible to use the existing elements of the symbol system. These elements can be dragged from the library onto an artboard.
To get ourselves more involved with machine learning and also to explain the principle to visitors of our semester exhibition, we coded a simple prototype.
We had five wireframe sketches redrawn by 20 people. With those sketches, we then created a machine learning model via teachable machine. So for every wireframe we had 20 sketches, to make sure the machine would recognize them when they were drawn in slightly different ways. We then exported the machine learning model and integrated it in our interface using p5.js.
In the end, the visitor could redraw one of the five templates and then place his own drawing under the webcam. Afterwards they got the converted wireframe and could change the styles on it.
