Prototyping

Purposes and Advantages

The spirit of rapid prototyping is making ideas tangible, putting them in front of people as soon as possible, and iterating them quickly – “fake it till you make it.” It’s common for designers to build prototypes to materialize a product vision, or bridge the gap between ideas and execution. Business also uses prototypes to pitch an idea, get market validation, apply for patent or license it.

• Proof-of-principle (PoP) or proof-of-concept (PoC).
• Help to develop, communicate, refine and evolve requirements. Through the use of a prototype, implicit or unconsidered use cases and glossed-over details are revealed. It also helps the designer to progressively nail down the details of user interactions, system behaviors, and how they are choreographed which would be hard to think through without building and playing with something tangible. In a longer term, prototypes help to evolve requirements.
• Accelerated learning among team members. Interactive prototypes are a great way to clarify complex user stories and requirements, and help the team develop user empathy.
• Wrestle with compromise.
• Connect with underlying materials and infrastructure. 
• Acquire user feedback for product concept and product use. Prototypes formalize assumptions and are used to validate whether the product will “solve the right problem” and “solve the problem the right way” for the end users, before the system is being built. In user testing, an interactive prototype can help the user walk through the details of a workflow that are otherwise difficult to speculate.
• Take ownership of UX solutions and specifications, instead of leaving detailed design for the developers to fill in while the software is being built.
• Reduce the development risks and costs. Prototyping can improve the quality of requirements and specifications provided to developers.
• Support system design and scale-up decisions. Proof-of-concept prototypes are used to test feasibility and support architectural decision before the system design and production start.
• Support front-end engineering. Despite its original intent (to be “thrown away”), UX prototyping code is often seen to be used as a starting point by front-end engineering in production.

Obstacles

• User confusion of prototype and finished system. Users may also have tacit assumptions about feasibility that actually needs to be validated or features that are actually demand extra development.
• Confusion of design and implementation. Prototypes built with certain technology stacks that are different from the ones used in production can sometimes pose challenges to the development, for example, certain features built-in in the framework used in prototypes have to be built from scratch when a different framework is used in production.
• Discrepancy between documentation and prototypes. 
• Expensive to build. It can be much cheaper to build several “throw-away” prototypes that demonstrate only certain aspects of requirements, by contrast, it’s usually time consuming to build one prototype that demonstrates cohesive user experience and evolves with the requirements over the development course.
• Hard to tailor to different communication scenarios: demonstration vs evaluation vs experimentation. The team may also have different expectations: some expect prototypes to be polished and good-looking; those who build prototypes just as a means of trial and error may accept them as being crude and limited in many aspects. The team may disagree about what to prototype.
• Solutions used in prototypes don’t necessarily scale up well.

Prototyping Tools

A variety of tools exist that supply a wide range of features to achieve the desired level of interactivity. The following tools listed here are commonly used to prototype enterprise software user interfaces. Prototypes generally fall into three main categories in terms of level of interactivity; visual prototypes, click-through prototypes, and functional prototypes.

Visual Prototypes

Prototypes of this nature allow for very rapid iteration and provide excellent material to do heuristic analysis of the visual design of a UI. However, they offer little in the way of substantial usability testing. Visual prototypes typically consist of multiple UI screens of varying fidelity that sequentially illustrate a given interaction. Due to their high-level and conceptual nature, such prototypes are good place to begin explorations on a new software solution.

Click-Through Prototypes

Click-Through prototypes are similar to visual prototypes, but offer much more in the way of testing interaction patterns and user feedback. Not only do they allow users as well as designers to have a more true to life experience of a design, they also provide a clearer line communication between the two. These prototypes typically consist of multiple UI screens of varying fidelity that sequentially illustrate a given interaction through the use of hot-spots that allow a user to interact with specific elements on one screen to dynamically navigate to another. Like visual prototypes, click-throughs can be rapidly iterated on and provide a good means of doing comparative A/B testing of designs.

Functional Prototypes

These prototypes, as the name implies, offer an interactive experience with a design that is dynamically detailed and close to, if not true to life, of the design. Functional prototypes can come in two forms, those made with prototyping tools and those by practical means(code based or physical). Prototypes of this level consist of multiple modules or features of a design solution put together in a single experience that can be explored dynamically and in detail. Though they offer the most insight into the usability and scalability of a design, functional prototypes are time consuming and, at times, complex to create. Despite this, practical prototypes – particularly code based ones – can greatly optimize the transition from prototype to development when made in conjunction with a design system of organized components. Using the same vernacular and code structure as what development partners would utilize makes communicating and translating designs to developers a more efficient and effective process.

Case Studies

3M Performance Matrix – Data Visualization

Top notch industry-standard data visualization supports a robust analytics solution.

Sterilization – Image Recognition

Proof-of-concept object detection with computer vision and deep learning.