Prototyping web development guarantees success

Web development is a highly specialized field where the technical side of a project can be difficult to both explain and understand. Small projects are generally straightforward, but larger projects may have a number of unique deliverables that require more than just discussion alone. If the technical side is difficult to understand and the client can’t “see” all of the programming and engineering that they’re paying for, how will they know what they’re getting in the end? Moreover, how does everyone know that all parties involved speak a common language during the planning process? This is where prototyping comes in. It provides clarity and direction for everyone BEFORE any actual development happens.

Preliminary planning

Prototyping includes a discussion of the sites' existing features (through workflow diagrams and existing documentation and assets), usability requirements, pain points, and any future requirements and functionality. All project requirements are documented and solidified in a discovery document, which serves as our understanding of the total project and the work to be done. This would take into account the overall data model, data feeds, existing systems, APIs for web services, dependencies and other considerations such as existing and supported modules, custom development and integrations. This is the traditional “paperwork” that should go along with any planning phase of a new web development project and is the prelude to a successful prototype.

Prototyping options

Once these plans are done being roughed in, it’s time to start prototyping. Prototyping can take two main forms:

1. Visual prototypes
2. Minimum viable product (MVP).

Visual prototypes

This first option is to make an interactive low-fidelity wireframe prototype (also referred to as a visualization). The prototype is a low-risk, hands-on, and cost-effective way to illustrate the feel and functionality of the project deliverables. It involves absolutely no coding and is created by a UX designer and software team, keeping the experience of the end-user paramount. The prototype is a detailed software model of how the software will function once completed. It’s an online “smoke and mirrors” draft of the project shared with all stakeholders via a web link. Our UX designers build prototypes using either Figma or InVision, you can learn more about it here.

The prototype gives you the opportunity to see how everything will work, it gives us the opportunity to confirm that we understand the project goals and deliverables, and it allows both parties to make revisions in a format that is quick and inexpensive to do. All in all, a prototype ensures both parties agree on the scope of the project and its direction. The development team can then move forward in building the actual functionality.

Why use prototypes?

• It’s an inexpensive way to plan out functionality, flow, integrations, and layout
• It’s a low-risk way to see and use what we plan to change
• No programming is involved, saving the company money and time
• It’s easy to A-B test ideas; adding, removing, changing, scrapping
• It’s hands-on — your company gets to help design what a user will experience and ensure that it matches your ideal business model
• It can show you anything; product catalogues, filters, checkout, fulfilment, account functions, registrations, display open orders, invoices, accounting, etc.
• It sets expectations for what your agency will be delivering in code at the end of the next phase of the project, and what you’ll be paying for.

What does a visual prototype look like?

I recorded a quick sample of what a low-fidelity visual prototype looks like. Low-fidelity means that there is no site design included, only the basic site layout and structure is mocked up to give context– it’s often called "ugly ware". In this example, the prototype is showing different catalogue layouts, a product “Quick Look”, and finally some features within an individual products page. None of this has been coded, it’s all still imagery that has been made interactive through software for the purpose of rapid prototyping.

Example of a prototype

Jeff Schaffner, an Acro Commerce alumni and host of the Exploring Ecommerce podcast,  recorded a new on-demand webinar titled Understanding the Elements of an Effective Discovery & Strategy Phase.

In this webinar, Jeff goes over what makes up an effective discovery and strategy phase for complex web development projects. It includes a more robust example of the prototype shown above.

Click the link below to check it out (the link opens in a new window). The prototype section starts at the 10-minute mark. In the video, it's also referred to as a visualization.

---

Understanding the elements of an effective discovery & strategy phase >

---

Minimum Viable Product (MVP)

The second approach to prototyping is to actually build out a rough version in code, executing a functional minimum viable product (MVP). We still want this to be fast so we don’t focus on creative design, look, feel or customizations; rather, spend time testing and configuring existing modules and features for the chosen software platform to create the outcome firsthand.

This approach to prototyping takes a bit more legwork, is slightly more expensive and is a somewhat more arduous path than a purely visual exercise, but the outcomes show you in actual code the potential to make the selected platform “work” for your needs. This can also give us a foundation for further custom development enhancements.

Some key questions to consider while developing a code-based prototype:

• How long will this prototype take to build?
• Will it be throw-away work once it’s done?
• I can see what the boxed modules and features can do, but what can I have built custom?
• Can I see the backend/administration area of this prototype site?
• Can I log in?
• Can you use my real products to populate this demo site so I can see if all of the options, attributes and ordering behaviour fit the mould?
• Will my real site use this as a base, or would we start again?
• What areas will we NOT be able to see in this prototyping exercise, and why?

Prototyping guarantees success

Often, through prototyping with either a low-risk visual prototype or the slightly bigger investment of a code-based MVP, all parties get to understand all of the details before committing to the larger build. Where the initial planning lets everyone put their best foot forward with ideas and goals for a successful project, the prototype or MVP provides the validation needed to move forward with confidence. Success is pretty much guaranteed before development even starts because a little extra time and energy were added in the beginning. For big projects, this can actually save a lot of time and energy in the long run.

Prototyping is something we like to do for any large or complicated web development project. It just makes sense for everyone involved. Would you like to see how prototypes were used within the scope of a successful project? Check out these case studies!

Read the TELUS Mobility case study >

How a forward-thinking B2C custom commerce architecture helped TELUS Mobility achieve 15% more iPhone 6S pre-order sales than the market leader.

Read the USI Laminate case study >

How a streamlined headless architecture and an integrated operational system increased UX experience, conversion rates, and average order value.