This user experience design example is developed from a project that started as a process reengineering exercise. To protect client confidentiality I have omitted some details and reworked the designs to be more generic.

An events company had a delegate booking flow that stepped through 6 separate web pages. There was a high abandonment rate with prospects either exiting completely or completing their booking by phone. There was also evidence data quality was poor.

Within the flow there were some constraints. Most important of these was the firm’s desire to prevent consultancies and “service providers” attending events, managed by asking prospects to identifying their type of business at the very start of the booking flow and routing them accordingly.

UX Flow designed for the delegate user experience project

The UX Flow. (Clicking image opens full sized, complete version in new window)

Did we really need that field?

After mapping out the flows I mapped out the information needed to manage a delegate. As happens so often the information being asked for had accumulated over the years and no one had challenged it. Most telling was that while an option to “share personal data with third parties” had been offered not one person had ticked it.

Information architecture for a delegate webform

Eventual data field requirements. (Clicking image opens full sized, complete version in new window)

Creating the redesigned registration form

Armed with a focused information set I mocked up some sketched wireframes. I reduced the multi-page booking flow to a simple 3 page set – the booking form; the external 3-D secure for credit card authorisation; and the booking confirmation.

User experience designs for responsive web forms

Sketched webform designs showing progressing through the user experience. (Clicking image opens full sized, complete version in new window)

After agreeing a simpler booking form I then proceeded to more detailed designs. I opted for an approach based on Google’s Material design to simplify the effort required and accelerate the design process. The design was kept simple and clean to encourage users to work through to the end. All of the gimmicks that had been added to the existing forms were removed.

I also used logic embedded within the form to trigger the correct response to the delegate’s company type. Those who identified themselves as “Service Providers” were presented with a below-the-fold form that advised they were submitting an application, while everyone else received a credit card form. In the event Javascript was switched off I provided a “Next” button that would trigger either the application confirmation or credit card payment in a separate page.

Finally I presented the forms in their context (both mobile and desktop) to show the different treatments. To avoid the form looking “lost” in the middle of a desktop screen I allowed the fields to widen slightly and placed them on an indent.

UX designs for responsive delegate webforms

The final designs, showing them in both mobile and tablet / desktop forms. (Clicking image opens full sized, complete version in new window)

And finally…

The end result is a much shorter booking flow that collects minimal information and still meets the requirement of routing people correctly depending on their company type.

Share this on social media

Who is Ross A Hall?

I'm a freelance designer and writer. My clients have included Fintech startups, publishers and digital agencies. You can read more about my work here.

Follow me...