Designing the New XFP Form Builder: First Steps

As Product Designer for the XFP team, it’s my job to ensure every aspect of our software is as user-friendly as it can be. Since joining the team at the beginning of the year, we’ve been heavily focused on making the software you use every day much easier

These past few months in particular, you may have noticed some exciting new features and refreshing interfaces within your Control Center, aiming to simplify what might have otherwise seemed like quite daunting tasks.

A few months ago, Andy Green (our Product Manager) asked me to start re-imagining the entire user journey for building forms, everything from how routes between pages are created to how those pages can be set up and used to a better advantage across the platform. My immediate thought was, how can I turn this into something our users can’t wait to use again and again?

I felt that the first key issue that needed to be addressed was with making the diagram that shows routes between pages in forms easier to understand, carry more meaning, and removing the need to repeat any routes that may have already been displayed.

branching diagram

The ability to build complex routes between pages within forms based on how a user responds to a question is one of the most powerful features of XFP. It can also however be quite a difficult concept to grasp, so we’ve made it our goal to simplify that. Due to the way our current branching model is visualised, it can become quite hard to understand what’s going on as more rules are added, and routes created.

Git branching

Those familiar with Git – a version control platform for software development – may have seen something similar to the routing diagram shown here, which helps to describe how changes to code make their way from one ‘branch’ into another until they reach their final destination – the main codebase (check out this page for a better explanation of the GitFlow ideology, it’s pretty interesting)!

With Git being so deeply embedded into our workflow here at Jadu, this was something I was used to seeing pretty much every day, and the more I thought about it, the more apparent the link between Git branches and branching in XFP became. Because of this, I decided to take influence from the Git routing diagram and create something in the same vein for our software.

As you can see from this proof-of-concept, the solution attempts to combine both the “Diagram” and “Table” view that XFP currently offers, which then allows administrators to see everything going on within the form without needing to switch between views. Not only that, but because the diagram is being dynamically generated in HTML, we can visualise fairly complex routes with relative ease “behind the scenes”.

With a sprinkling of CSS and JavaScript, we can even animate sections of the diagram to describe how a user might navigate between the pages of that form, based on the choices they make on each page; try hovering over (or tapping, if you’re on a touch device) each of the route indicators in the proof-of-concept to see what I mean!

Of course, this is just the beginning. Our end-goal is to turn XFP into something much bigger, with rich interfaces that describe themselves so well, that things like documentation and training start to become relied upon much less.

branching wifeframe

As with all new features we release, each interface is born out of a combination of wireframes that illustrate the various user journeys someone might take. Each journey is then implemented step-by-step, taking the same Agile approach we use across all Jadu products. This allows us to not only to test out our theories and iterate as we go, but also to ensure that once the feature is eventually released, it satisfies every goal that we set out to achieve in the first place.

XFP Mighty Form Builder v0

We hope you’re as excited about these changes as we are, and can’t wait to hear what you think. This is just one of many blog posts we intend to write regarding the new XFP form builder. In just a few days, you’ll be hearing from our very own James Manley, who aims to provide some much deeper insight into some of its amazing new features (some of which he’s even started developing already!)
Make a comment

There is no response to “Designing the New XFP Form Builder: First Steps”

Share this post


The official Jadu Blog (a peek inside). The musings and magic of the Jadu team and log of new web apps, customer super hero stories and mobile web marvels.

Recent posts