Our previous post on prototyping provided the “why” for prototyping. This post aims to give you the “how.”
Most companies do not consider prototypes as required deliverables. Therefore, it helps to be flexible with your prototyping process and tools.
The Ideal Project for Prototyping
Putting prototypes together for every page type is sometimes a possibility. The project might be internal or the client may have the time to allow for it. These types of projects often have the ability to incorporate complete prototypes using in-depth prototype software, and enjoy all the benefits of prototyping we spoke about in the last post. Unfortunately, there are few “ideal” projects.
The Typical Project
Typically there are constraints that keep teams from using prototypes. The project may have a small budget, your client may not understand the need for prototypes or you just discovered this “prototyping” thing and are knee deep in code.
There are ways around all of these excuses, and these are the types of projects I want to focus on. I’m going to explain some ways you can prototype, regardless of your budget, client, timeline or project phase.
Small Budget Prototypes
If your budget is small, you should be thinking, “it’s not in the budget to skip the prototype.” Only focus on prototyping pages or processes that are difficult to convey on paper (think transitions, animations, complex data entry, etc.) and pair that with the wireframes or designs. You can then use these prototypes as an enhancement of the wireframes to clarify those areas.
Communicating with Clients
Regardless of your business or position, selling to clients, users, or internal stakeholders is always a piece of the process. For lack of argument, I’m going to use “clients” to represent the group.
Clients that push back on our solutions usually do so because in their mind we aren’t accomplishing their goals. More often than not this is a communication problem. Functional prototypes can help sell clients on these “hard-to-picture” solutions, or give the consultant insight into their goals. With these types of clients, use prototypes to supplement your designs and wireframes. This way it isn’t a deliverable, but part of the design presentation.
We see this type of process in other industries as well. A great example of this is the show “Property Brothers” on HGTV. Two brothers are tasked with the job of convincing homebuyers it is more cost effective to buy a “fixer-upper” and remodel it than buy a more expensive one. The buyers are skeptical until they see the 3D prototype the brothers put together. This prototype doesn’t show every detail, but conveys the changes that are difficult for the buyer to imagine.
Rapid Prototyping
Prototypes can be extremely helpful as an internal process to help with discovery and requirements creation. This is particularly true for Agile projects, where requirements can often change mid-stream.
Try thinking outside the box, particularly if your project is mid-stream. If you can prototype a requirement in code quickly, do that. There are prototyping tools out there that can create useful prototypes quickly. Prototyping should be a “tool in your digital tool belt,” only used for designs, workflows, and clients that require it.
Useful Prototype Tools
Hopefully I have given you some inspiration to begin prototyping today. Remember that it doesn’t need to be a formal process or tool; anything that can help you demonstrate your ideas can be used as a prototype.
Below is a list of tools I have used to create prototypes.
-
- UXPin – This is a fantastic online app, which can be used for quick prototypes and full deliverables. This tool is highly recommended.
- Axure – I consider this tool, which is similar to an Adobe product. There is a steep learning curve, but it is a very powerful tool.
- AngularJS – Using frameworks to prototype not only provides the most realistic prototype, but it gives development a head start. Google UX also uses AngularJS to prototype and presented their process at ng-conf 2015.
- HTML5 – If you don’t need the power of a framework, whipping up a prototype in HTML5 and CSS can be pretty quick.
- Quick Time – Creating prototypes in code is great, but you can’t always rely on people having the same environment as you, and browser testing is a waist of time for prototyping. My solution is to screen record a demo of my prototype with Quick Time (free with every Apple computer).
I hope this has helped you get a better idea of how to prototype. Please add a comment and let us know what works for you!