Fidelity & Prototyping22 min read

by Coe LacyJun 1, 2020Design, Web

Almost everything made today goes through some form of a prototype and fidelity process. To put it simply, a prototype is the intent of design and fidelity can be thought of as the resolution of that intent. Vehicles, food, art, toys, clothing, and much more start off as an idea and get refined through a process of evaluation and iteration until a finished product is produced. At DVS, whether it is a website, mobile application, marketing plan, video, or advertisement, all of our products and services are tried and tested through this process. Prototyping and fidelity are processes that help us create products that fit the needs of our clients and wow their customers.

The Fidelity Spectrum

Prototypes are often described as low fidelity or high fidelity programs, but the reality is more of a spectrum. At one end we have low fidelity, which is often rough sketches of the finished products. On the other end is high fidelity prototypes, which can often feel like a finished product. There is also a midpoint that balances design, speed, and flexibility. Each project can dictate a different level of fidelity for each step of the process, but a general rule of low fidelity to start then high fidelity as production begins is standard. Each level of fidelity has its own benefit.

Low fidelity prototype strengths

Rapid changes

Changes can even be done during meetings in collaboration with the client. Often, these take the form of sketches or whiteboard drawings, and decisions can be made rapidly with little commitment.

Focus on the big picture

This is where usability, base functionality, and needs are determined. Big structural decisions are much quicker to make, while minute details like UI considerations and page linking can cloud the overall purpose of the project. Video can be evaluated on messaging and composition without all the work of color grading and editing being finalized.

Accessibility

Much of the design, video, and engineering software used today takes years to master, but low fidelity levels the playing field. Everyone can draw (yes, even you) and mark up documents. This welcomes outside viewpoints, broadens the feedback for creatives, and expands the perspective of others for empathic design.

High fidelity prototype strengths

A tangible experience

Often, it can be hard to picture a final product without seeing it in context. Giving someone a clickable prototype right on their own mobile phone, for example, can help refine details and give a preview of the final product before production starts.

Allows for fine-tuning

Small details like button clicks and animations can be hard to evaluate in a static demo. With an interactive prototype, these items can be seen as they would in a final product, and feedback on interaction can be gathered.

Saves production time

Regardless of the medium, final product production usually is more time-intensive and less flexible. Video needs final editing and color correction, and web designs need ample time for development and bug squashing. Changes made to high fidelity prototypes take more time than low fidelity designs, but it still takes considerably less time than changes to final products.

DVS & Prototyping

Listening to our clients’ needs combined with an iterative design is part of what makes our websites, videos, apps, print materials, and more fit the needs of our clients perfectly. The process we go through to plan, design, and build a website is a great example of this process working effectively.

Start by Listening

Our low fidelity phase often includes sketching and working on whiteboards with clients. Big objectives can be established and valuable feedback can be taken straight from our clients. Large, undiscovered UX pain points often surface in these early process meetings. A question their customers might want to know the answer to could be hiding – and through discovery meetings – the answer is surfaced and it gets added to a sitemap.

Low resolution, high strategy

One of the next steps we take when creating a website to design low fidelity wireframes. This helps everyone look at a site for content and layout without being able to critique color, fonts, or images. “Do we need another image here” or “is the amount of content here right” are all common considerations addressed at this phase. Big content and structural changes made at this stage take a matter of minutes rather than potentially hours in later phases.

A preview of the finished site

Before we can pass off a website to our talented development team, high fidelity prototypes are needed to finalize design decisions. Here we often use Adobe XD for realistic mock-ups and contextual design. This allows us to place a prototype in a client’s hands and view it on their own devices and see how hovers, clicks, and swipes look in the browser. We can design in real-time for multiple device sizes and preview designs exactly as they will appear once finished. Once the design is finished, development starts and closely follows the guidelines set up in the design process. The result of which is an effective website that looks great and has had client input the entire way.

Our Process can Work for You, Too

Years of experience have given us a refined process that delivers print, web, and advertisement products that function as great as they look. We start by listening and creating rapid low fidelity prototypes and work hand-in-hand with our clients all the way to the final product. By taking the time to build a strong design foundation and strategic plan from the start, we ensure all of our products are created efficiently and with measurable goals in mind.