Website clients have expectations, and their experience of the internet versus the capabilities of the solution we provide might not always be in sync. This is where using in-browser WordPress website prototypes can help you avoid scope creep with your builds.
As a web designer and developer using WordPress as our core software, we make a LOT of WordPress websites.
Personally, I live, breathe and occasionally dream in posts, pages and the WordPress dashboard.
Setting up a site and knowing the difference between plugins, widgets and themes is so ingrained and second nature to me, it’s easy to forget that for most of our clients, they are hearing about this software for the FIRST time.
So when it comes to sending them out a proposal, we have to be really careful with our language and technical descriptions to make sure everything is meaningful and relevant to their needs.
Sometimes, though, no matter how much care you’ve put into explaining your solution for your customer, how thorough your deliverables are, and how explicitly your contracts explain the limitations of the service you’re providing, your clients might not understand what they’re paying for.
Let’s take a look at why you should use WordPress website prototypes to avoid scope creep so you can continue to deliver your projects on time, within budget and to your clients’ expectations.
What is a website prototype?
When we’re talking about preparing a prototype for our clients, usually as part of the discovery process, we’re actually looking to create a proof of concept for the functional part of the site. The prototype:
- Is “live” and revealed in the browser — it works like a website.
- Is black and white. It doesn’t contain ANY design components.
- Is self-contained, usually on your development server, and independent from any other website.
- Clearly shows how the site, or part of the site, will function.
- Is quick and light to load.
- Only contains the minimum amount of content required to demonstrate functional components of the site.
The purpose of the website prototype
The primary purpose of a WordPress website prototype is to communicate the functional components of the site and prove to your customer that the solution you have in mind for them will meet their desired business needs. It’s also perfectly positioned during the discovery phase of the design process, so if there are going to be any significant changes, these are re-engineered into the scope of work before any design and technically challenging development has taken place. And therein lies the beauty of a prototype:
If you discover that the solution you’ve proposed falls short of the client’s expectation early in the process, there is still time for you and your customer to mutually consider other options and rescope if need be. This helps you avoid unnecessary confusion or disappointment at the more time-critical delivery-end of the project.
In short, using a prototype to identify potential scope and solution changes before the design and development stage of your project allows a much easier pathway to negotiate and manage your client’s expectations.
Good cases for WordPress website prototypes
Not every website you build will require a prototyping stage. If you are building simple sites where a demo theme shows all the functionality the site has, then that demo is more than adequate. But when you engage in work with a client whose site has significant functionality requirements, lots of moving parts, or a complex user journey, then prototyping is the perfect way to communicate exactly how those differing components of the site will work — and gauge if the solution you’ve proposed is meeting expectations.
Here are some examples of where a proof-of-concept browser prototype is helpful:
WooCommerce or other eCommerce websites: No matter how much you try and explain the features and limitations of an out-of-the-box eCommerce tool, your client will likely not take notice until something doesn’t meet their expectations. With so many options, configurations and decisions to be made in the setup, personally, I will never develop an eCommerce site on WordPress without getting an approved prototype first. Shipping and payment solutions alone can be a nightmare, and negotiating that at the start of a job is a lot easier than two days before launch!
Membership site: Next to eCommerce, it is probably hardest to communicate the functionality of membership products without getting into the software and showing how it works. So even if your prototype is more of a demo, it’s still a great way to ensure your clients know how and what their chosen membership tool does — and prove that it will meet their needs.
Premium and new tool testing: If you’re using a new or premium plugin on your customer’s site, sometimes you only need to spend an hour or so with it to decide if it’s the right solution. Setting up a prototype where you can show your customer how it works is going to save time and money. Most premium software have a trial period, so if it doesn’t work, you can get your money back and move forward with your next option.
Complex user journeys: Often web design is reliant on solving the user journey, and this is better done without the clutter of aesthetics. In our business, we’ve encountered sites that have several audiences, and the needs of those audiences are different (e.g., members engaging in restricted content versus visitors who come to read a blog post), so using prototypes to confirm the ease of use is a smart and efficient way to test our theories and prove they work.
Sales funnel: Regardless of the final software or service you use, you can easily replicate the desired functionality of your sales funnel within WordPress. This is one of those things that is hard to communicate without a visual, so prototyping is the perfect solution.
Learning Management System (LMS): With so many on the market, showing how the WordPress options for an LMS stack up is pretty impossible without customizing it to your client’s needs and showing a demo. You can do this relatively swiftly as a prototype, and more importantly, learn just how fussy your client will be around this component, while actively promoting the discussion around the scope of customizations required. You can’t get that level of feedback from the software “features” list!
API and third-party integrations: Often the simplest looking parts of the sites we build end up being the most challenging. Using a prototype phase in these projects can often assist us in deciding if our solution is feasible or if further development work will be required.
Client has limited understanding of web tech: Frankly, sometimes they just don’t get it, and we need to show them before they’re willing to commit and move forward with the project.
Benefits of including a prototype in your design and development process
Why should you use prototyping when building websites? Here are just a few benefits:
- Clear communication to your designer of exactly what needs to be on the page.
- The ability to test functionality of “out-of-the-box” products and determine if they will meet your clients’ business needs.
- Prototyping is done early enough that it allows you to discuss or negotiate additional requirements before putting in too much work.
- You can avoid scope creep since your client knows and has approved exactly how their website will function.
- It gives a good jumpstart to the development of the project.
- The opportunity to test behavior and user journeys, and adjust where required.
- Efficient and easy proof of concept.
- You can itemize and sell a prototype to your client as a value add, even if they don’t wish to proceed with a full build (it’s a great product to offer as a website consultant).
Tools for making WordPress website prototypes
The best things about the process are that the prototype doesn’t have to be perfect, you aren’t distracted by the way things look, and you can make it “quick and dirty.” It’s a representation of the result, but it doesn’t necessarily need to be built as consistently or cleanly as your final code.
Below are the basics you’ll need to make a WordPress website prototype:
A sitemap
We usually use a simple visual sitemap and wireframe as the first step before prototyping. You can achieve these and get signoff using a traditional drawn diagram, simple in-browser tools (such as Slick Sitemap) or a more shiny package, like Slick Plan. From the sitemap, you can indicate which pages and components need to be represented in the prototype.
WordPress install
Keep it clean and isolated from other sites. Your development server is great for this — you don’t want to worry about using the client's server environment here. Just get it up and start building.
A blank/no-frills theme
In the past, we’ve used Genesis Framework with the Genesis Sample Child Theme, or even the Cobalt Apps Dynamic Builder to set the theme. Other options include Beaver Builder theme, Generate Press theme, Woothemes Canvas, or any other option you’re comfortable working through without distraction.
Your chosen prototype theme should have super-simple flexibility to create menus, headers, footers, widget areas, sidebars and multiple layouts on any page without fuss.
It should also be stable and reliable because you’re going to need to install functionality and plugins without added hassle.
Form tool
Forms are something that many out-of-the-box themes or plugin sets fall short on, but we create custom forms in almost all our builds, so it’s great to have a flexible tool for this. Our team uses a developer license of Gravity Forms, but there are other options out there, such as WP Forms, Formidable Forms and Ninja Forms.
A page builder of some kind
Love them or hate them, when you’re trying to achieve something quickly to prove a concept, you don’t have time to be worrying about performance issues or pure code. A website builder, such as Beaver Builder or Elementor, can get the job done quickly and fuss free. Remember, this build isn’t necessarily going to represent your final code.
You can afford to cut corners to build a prototype. The idea is to get functionality sign-off early so you can accurately prep your team for the “real” build.
Your favored toolset
This is an opportunity to create a repeatable turnkey process for your business. Prototyping might seem laborious at first, but once you have your starter prototype housed on your server, you can prepare others quickly and efficiently. Our starter prototype includes all the “normal” things we provide, plus a few plugins we like to have on hand for features that may not function the way we need them to in the builder, like galleries and sliders. We include a few premium theme add-ons that allow us to create prototypes with the functionality our clients desire quickly, without having to start from scratch each time.
Pro tip: Consider prototyping a business growth tool, not a chore
You can use prototyping as an opportunity to sell and persuade your clients you’re the expert consultant for their desired outcomes in any particular niche. For example, if your team specializes in setting up Learning Management Systems, creating starter prototypes for all your solutions means you can quickly deploy one for a current client, but you can also use those prototypes as demos for prospective clients.
Final thoughts
Once you harness the power of in-browser WordPress website prototypes, you’ll soon see the value, not just for your individual clients, but for your business as a whole. Adding prototyping into the discovery phase of your proposal helps you and your client identify any additional requirements or changes early on in your project. This allows for movement and flexibility to adjust timelines and expectations, eliminating the chance of scope creep and keeping your clients expectations in check.
Want to see a website prototype build in action? Check out the webinar supporting this article!
Have a colleague or two who would benefit from reading this? Share it!
