Rapid Prototyping with WordPress

When we think of WordPress, most of us think of it as just a CMS platform. I am trying to show a use case of WordPress that very few people talk about while thinking of WordPress, ie Rapid Prototyping with WordPress.

Web application prototyping is generally done using tools and application like balasmiq etc, but do you know, you can create almost functional prototypes with WordPress without writing a single line of code?

The beauty of using WordPress as a prototyping tool is that you can work with real content, give your stakeholders a chance to interact with the prototype as if it is actual application and give real feedbacks. Most importantly leave nothing to imagination and misinterpretation.

High-Level Components

To understand how WordPress can be used to build a functional prototype rapidly, we need to understand that an application can be broken down into following five high-level components and all of them are easily available with WordPress to use.

1. Layouts: it is the visual part of an application, this is how your application shows the content and other data items from your applications.
2. Input Forms: Most applications will have some form of data inputs, ie they need to capture some data from their users. It could be as simple as a contact form to as elaborate as adding an e-commerce product.
3. Content Structures: All applications will need a way to keep that content which can be then be shown dynamically. Ideally, prototyping should involve thinking about the data storage, and most of the tools completely ignore them.
4. Users: Every application will have some sort of user authentication and based on user type slightly different workflows. This is another thing that almost all other prototyping tools miss and where WordPress rocks. You can give your stakeholders actual feel of how your users will feel when they use you applications
5. Workflows: Almost every web/mobile application will have some or the other form of workflow, for example when user filled a form, a mail should be sent to user as well as admin, this data should also be captured in a database so that it can be further assigned to someone to work upon. This is another thing that other tools miss out on when you prototype.

Mapping Components to WordPress

While we can create a rapid prototype in WordPress without writing any code, we still need to be logical and have the initial patience to learn to use a tool. So let’s see how each of these sections can be built using WordPress without writing a single line of code.

Layouts

Building layouts are something that every prototyping tool has native support for, as this is the first thing of your prototype that will be noticed by people. Depending on the tool, this could also be the time-consuming part. In WordPress, this becomes the easiest thing you do, and during prototyping stage, it frees you to focus on getting the messaging on the site just right.

Here are few themes and plugin that you can use to build just the right layout,

1. Drag and Drop Page Builders: WordPress is filled with all types of free as well as paid page builder that allows you to quickly and easily put content blocks on any page of your website. Page builder by SiteOrigin and Beaver Builder are the popular ones for you to try, but feel free to use the one you are comfortable with.
2. Shortcode Based Libraries: Plugins like Shortcodes Ultimate or catalogue section of Awesome Studio provide many more additional shortcodes and layout modules that can be used to create a layout in case you need something that page builders can’t provide.
3. Drag and Drop Themes: While plugins provide lots of layout components, themes like Divi, Make and Headway themes take the ability to quickly create layouts of an application to next level by providing predesigned page layouts and easily configurable colour schemes.

Input Forms

Every other prototyping tools are going to fail while creating the input forms for your applications, it is the most tedious process of prototyping. Once again in WordPress, it becomes a breeze, and not only that, with WordPress you can go one step ahead and create the backend handling of these forms.

You can write the copy of the emails that may go out on filling these forms, or activities that your application will perform and even handling the failure stages. One thing that most people ignore while prototyping is error states while filling the forms, like what happens if someone submits the empty form or provides wrong data while using WordPress you can spend time thinking and crafting these small messages that add to user experience.

Here are few plugins that you can use to create various types of forms without writing any code,

1. Ninja Forms
2. Gravity Forms
3. Formidable Forms

All the above plugins provide an intuitive drag and drop fields to create various types of form and also provide integration with many third party services like Zoho, Salesforce, Mailchimp etc.

If you want to be little more adventures than using bootstrap form builder and Awesome Studio plugin you can have even better control over the behaviour of your form submission.

Content Structures

When it comes to prototyping, another useful thing is to keep the content and images that are used in multiple places in such a way so that we don’t have to repeat ourselves. Creating the data structures early on allows you to quickly get your content team to start putting real content on the site, making the prototype even more valuable during demos, and can then even be used as MVP to get the feedback from all stakeholders.

In WordPress, most of the data is stored as either custom post or custom fields, while the relation between data is generally managed via custom taxonomies.

Here are few plugins that you can use to quickly create your content structures

1. Custom Post Type UI, it allows you to easily create custom post types and taxonomies.
2. Advanced Custom Fields, it allows you to create custom meta fields based on conditional logic
3. Custom Content Shortcode, it gives you ability to easily call your custom content based on your own logic

Users

WordPress excels in this area, by providing out of box support for user authentication and access control, it allows you to prototype the user flows as well.

Here are few plugins that you can use to quickly create your user flows

1. Profile Builder gives flexible way for you to customize the fields of user registration form and profile fields.
2. S2 Member Framework allows you to restrict access to content, pages or posts based on user roles, levels and gives an option to easily sell membership plans.

Workflows

Prototypes are created primarily for vetting the workflows and WordPress plugins provides many out of a box and common workflows, like say e-commerce, forums, social networks, events etc, but sometimes you need very specific workflows even in that case we have plugins that allow you to quickly create custom workflows without too much stress.

Here are few plugins that you can use to showcase workflows

1. Social: Plugins like BuddyPress and PeepSo provide full social flow, while we have tonnes of other plugins that integrated to other social media platforms.
2. E-Commerce: Plugins like WooCommerce and Easy Digital Download leads the pack with the plethora of add-ons for almost every type related activities.
3. Editorial: Edit Flow is one of the most used plugin for creating editorial flows of your content, providing you with calendar, notes statues etc. Post forking plugin allows you to create alternative versions of your posts and much more plugins that allow collaborations.
4. Events: The Events Calendar allows you to easily create and manage events and ticketing, you can always choose from the list of other event’s plugins in case this one does not fit the bill.
5. Custom Workflow: Sometimes you need to create a flow that is not available out of a box, in those specific cases you can use plugins like Awesome Studio and Toolset to give you the ability to build these flow using simple shortcodes.

If you have to build a prototype once, or you are a development agency that needs to make prototypes routinely and even if the final application is not built in WordPress it is better to learn and use WordPress as a prototyping tool to rapidly create complex prototypes of your application.

Let us know your thoughts and feedback about using WordPress for rapid prototyping of applications or if you have any questions here.