The basic idea of a prototype is to test its design and the underlying product idea before the real product is implemented. This allows feedback on the concept to be gathered and usability to be improved with appropriate adjustments and iterations. A prototype is a simulation of a user's interaction with an interface. This simulation can vary in scope depending on the level of sophistication required. For example, only individual functions within a screen or an entire user flow through a system can be represented. The accuracy with which the final product is represented in a prototype is called fidelity. Read more in an Adobe blog post by Nick Babich.
The iterative design process with low and high fidelity prototyping is demonstrated here with an internal project that addresses safety in public spaces. It's about the step-by-step generation of mobile app screens using a variety of techniques.
Paper Prototyping
With paper prototyping, the focus is on the quick visual representation of initial concept ideas. With a simple pen, structures of the screens can be visualized on paper in an uncomplicated and low-cost way. Rectangles for images to be inserted, lines for possible text content and hatching for clickable elements communicate a rough structure. It is particularly important here not to get lost in details. The strength of the method lies in being able to quickly discard ideas without being too emotionally tied to them as a designer or stakeholder. With the help of created paper prototypes, the first UX tests can already be carried out.
As part of the internal project, several screens are sketched in order to compare different design approaches. Among other things, it is tested whether to work with or without a navigation bar, map elements or a flying approach is preferred or whether special elements are displayed by an overlay. In the end, it was decided to use four main screens that are accessible via a navigation bar.
Clickable Wireframes
To obtain initial digital representations of the screens, the technique of clickable wireframes can be used. Like the paper prototypes, they do not yet have the visual design of the final product, but focus on the positioning of the individual elements, which are kept in shades of gray. By linking the static screens, interactivity can be added. This gives the prototype a better experience. Clickable wireframes are ideal for UX testing to test the concept of the screens. The feedback collected through this can be used to identify pain points of the users and make paper prototypes in a new iteration round.
In our project, we used all wireframes to map four use cases of the app, which were tested in six UX tests. Collected feedback was then categorized and translated into Paper Prototypes in a new iteration. These were again translated into wireframes before moving on to the next step of high-fidelity prototyping.
High-Fidelity Prototypes
In contrast to the low-fidelity versions, high-fidelity prototypes now include the final design, authentic content and realistic interactions. Thus, this version reflects the real product to a certain extent and is ideal for the final presentation to stakeholders and for passing on for development. In fact, based on the feedback from the UX tests, the structure and layout of the four main screens had changed.
This process shows how important the low-fidelity prototypes are as a basis for a final design. Anything that can be identified as negative feedback in this process no longer needs to be experienced by final customers when the finished product is released. Even if screens are more visually appealing in the final design, they are deliberately not intended as initial deliverables in the concept phase.
Are you interested in more information about this project?
Feel free to contact us!
business (at) uxma.com
