The team at Expedia is working with an agile workflow to enhance the platform features every single week. As a result a key requirement for the onboarding process was total flexibility to enable quick changes of the onboarding process without extensive development and design effort. The solution was the construction of a framework that includes simple form components as well as custom UI elements that can be reused whenever needed and simply align with the overall validation process.
Providing a highly flexible framework was challenging for the design process as well as the creation of a proper application workflow. In order to preserve agility, a flexible validation process and deeplinking, we’ve set up a backbone.js application and created a straight sequence of actions that'll be executed during the process of every single step and allow modifications and reordering of the steps within the blink of an eye.
Since the onboarding is just accessible for Expedia’s partners only you can get at least a brief glimpse of the process by taking a look at below.
Based on the framework of components a first version of the onboarding process was created for Expedia to start with. Working with the framework was the perfect proof for of concept and the best chance to perfect the work. A user flow showing all the loops and iterations of the process was used to align the data requirements with a good user experience and served as a guideline for the final result.
The accuracy of data is the key requirement for Expedia’s MICE platform to succeed. With the use of inline validation instant feedback for users about invalid or missing data was provided and ensured a high standard of quality for data that’ll enter Expedia's system.
Providing repetitive data inputs was a feature that the onboarding process required from the very beginning. A simple way to transform any kind of form input group into a repetitive and edible sequence was added to the frameworks functionality.
Since there will be lot of information asked for during the onboarding, conversional forms where introduced to evolve and pleasure the overall user experience.
Besides styling common form inputs like checkboxes, selects, buttons and text inputs, a bunch of custom components was added to the framework in order to meet the requirements of complex data structures and enhance the users experience by providing proper information.
Validation is probably the biggest pain point when it comes to user experience. A good validation workflow can simplify and pleasure the process of entering complex data remarkably. Additionally to the inline validation of form fields we’ve added validation notifications directly to the submit button of the form. While one to two errors will exactly tell you, where you need to revise your input, more than two errors just tell you that you ain’t ready to submit the data yet.
To truly deliver comprehensive flexibility to Expedia, we handed over a html styleguide where every single component was documented and ready to copy, paste and use. Besides serving as one instance in our testing workflow the styleguide helped us to ship a high quality and working code.