Insight

Prototyping Fundamentals

The following is based on interviews with Gorilla’s Manager of Design Technology, Doug Garofalo, and UX Architect, Tony Knaff. It is the first of a two-part series on prototyping.

An ecommerce initiative is often one of the largest investments a company makes, requiring a significant amount of labor, time and financial resources. For this reason, it can be difficult to secure buy-in from executives for prototyping, when work could theoretically go straight into development.

However, we've found that prototypes typically save time and money, and yield better outcomes by mitigating risk, validating ideas and inferences, and setting appropriate expectations.

At its most basic level, prototyping is the process of creating a lower fidelity representation of an end design. The early stages of prototyping involve open collaboration between our team and the client. We identify pain points, set expectations, and our team of user experience designers uses that information to create the prototypes. The prototype allows client and development ideas to come to life, and encourages testing of usability well before the site launches.

Our website prototypes are typically a mock-up or representation of how the final site will look and function. However, depending on the client and their goals, a prototype can serve many different purposes. The following chart illustrates various prototypes and their functions:

Prototyping chart

Prototypes can be anything from a paper sketch to an interactive HTML interface. For instance, in the beginning stages, it’s easy to draw out a simple sketch as a high-level vision for the website. This type of prototyping is considered a Concept Prototype because it is a draft of what elements, or pages, are necessary for an exceptional user experience.

The sketches are then used to create a wireframe that depicts the structure of the new site. The wireframes are considered both Concept and Feasibility Prototypes because they address whether a site will function in practice.

whiteboard whiteboard

Our UX designers and other members of the creative team often use InvisionApp to visualize the user experience. This is considered a Vertical Prototype because it demonstrates actual functionality of the new site.

Wireframes can also be built out into clickable compositions if a client needs to see a certain user scenario. For example, we created a clickable prototype using Just In Mind for a large B2B supplier to demonstrate how a customer would choose from a selection of products. The prototype featured a filter that shows which products are available depending on the company’s shipping locations. This is considered a Feasibility Prototype because it was built to test the viability of the concept.

whiteboard

Prototypes allow clients and project stakeholders to see how a final product will look and function before it’s complete and from the very early stages of the project. Prototypes help inform expectations and functionality based on scope and mitigate risk during the creative process, through launch and beyond.


Stay tuned for Part Two, covering implementation and how the prototyping fits into the overall creative process.