Prototyping Web Development Guarantees Success

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 with certainty that all parties involved are speaking 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 discussion of the existing features of the site (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, API’s 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. Visualization
  2. Minimum viable product (MVP).

Visualization

Click to contact one of our ecommerce consultantsThis first option is to make an interactive low-fidelity wireframe. This working wireframe prototype is called a visualization. The visualization 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 visualization 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 visualisations using InVision, you can learn more about it here.

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

Why use visualization?

  • 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 catalogs, 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 visualization look like?

I recorded a quick sample of what a low-fidelity visualization 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 visualization is showing different catalog 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 visualization software for the purpose of rapid prototyping.

Acro Media visualization prototype example
Example of a visualization prototype

Jeff Schaffner, a senior business developers at Acro Media and host of the Exploring Ecommerce podcast, just 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 visualization shown above. Click the link below to check it out (link opens in a new window). The visualization section starts at the 10 minute mark.

Watch: Understanding the Elements of an Effective Discovery & Strategy Phase  Webinar

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; but rather, spend time testing and configuring existing modules and features for the chosen software platform to create the outcome first hand.

This approach to prototyping takes a bit more legwork, is a slightly more expensive and is a somewhat more arduous path than a visualization 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 login?
  • 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 visualization 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 visualization 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 was 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 visualizations 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.

Mike Hubbard
Contributed by

Mike Hubbard

, Frontend Developer
Up Next:

Ecommerce Inventory Management is Tricky, but not Impossible

Next Article
Get Free Widget

Fields marked with * are required.

×