Application Prototyping

Concept Sketches

This phase usually happens on a whiteboard or sketch book. It’s intended to get a rough idea of the various views or screens the application will need and how things will be arranged on those views. The idea is to move fast and uncover as many issues as possible before moving into a digital tool.

The work session starts with a simple whiteboard sketch of the application concept. At this point we can talk through the various ideas of what information needs to be on screen, how big all the items should be, where to put various UI elements and controls, and other ideas about functionality and workflow.

At This Stage:

• Discuss rough ideas, workflow, and define the general layout.
• Appearance: Hand-drawn on whiteboard or sketchpad.
• No interactivity.

Low-Fidelity Wireframes

The first step into a digital product, the wireframe, is essentially a tool to formalize the sketches and make high-level decisions about how the application should function. We take what we agreed to in the sketch phase and create each screen showing the basic size and layout of the parts of the website or application.

This is when we discuss details about the information and content that should be on the screen, where it should be, and start mapping out interactions. Adding interactions is what transforms a wireframe into a prototype.

At This Stage:

• Define overall layout, content areas, and interactive elements. Refine layout and begin mapping out on-page and navigation interactions.
• Black and white. Some text, outlines, boxes, and other shapes as needed. Shades of gray help indicate the priority of elements.
• Minimal to no interactivity, just enough to move between screens at most.

Medium-Fidelity Prototypes

Things begin to take real shape and feel like a functional application. We start adding basic content and interaction to the wireframes so you can get a feel for moving between screens and how things will respond. We stay in black and white at this phase because we want to stay focused on functionality and the usefulness of the content.

At this point, most projects are ready to begin development. There is enough detail for your team to wite user stories and demonstrate to a developer what needs to happen and how things should work.

At This Stage:

• Discuss content placement and visual priority. Refine workflows and on-page interactions.
• Add minimal shading or color. Some text and image content to communicate details as needed.
• Minimal to no interactivity, just enough to move between screens at most.

High-Fidelity Prototypes

A high-fidelity prototype is essential for complex applications or established development teams. It will outline every detail of the interface including colors, font styles and sizes, placement of each element with precision, and describe all the interactions that should happen.

High-fidelity adds full-color, fonts, images, and many of the interactions needed to feel like a complete application.

The idea at this phase is to provide a very realistic idea of what the application will look like and how it will work to your users and executive stakeholders for validation and approval.

High-fidelity prototypes are also an excellent aid for developers to ensure they see exactly how the application should look and feel, leading to fewer errors and less rework.

At This Stage:

• Discuss details of colors, font styles and weights, images, icons, and other visual elements.
• Full-color with text and images. It should look and feel like a real application, without any actual functionality.
• Adds some complex on-page interactions and limited motion or animation if needed. Could feel almost like a real application.

Case Study

Validating Ideas at Circle K

Our team helped prototype and design proof-of-concept mobile app with a new workflow so people could shop the closest store and have their items  ready for pickup in store or delivery at the pump when they arrive.

Insights

Sprinting Like a Designer

 Incorporating user feedback and testing into the design and development cycle early on as things are being created means better insights delivered faster, and less time wasted on useless or unusable features.