Building a Scalable UX Infrastructure for integrations
The Challenge
Using my experience with designing integrations, I quickly realised that for both the team and the Integration Editor to function effectively, we needed to simplify the way we designed them and build a solid foundation for all future Integration Editors. By doing this we would be able to solve the following problems:
- Lack of actionable errors
- Performance issues (eg. over one minute to load the initial payroll page)
- Many support tickets that keept growing
My role and responsibilities
- Gathered insights to help guide problem understanding
- Created comprehensive user scenarios and user journeys
- Collected and mapped out data and data naming conventions for existing integrations
- Facilitated co-creation sessions with various stakeholders
- Facilitated and conducted multiple moderated user interviews
The goal
To have a foundation for all types of integrations, that is easily implemented, requires minimal setup from users and fosters consistency in user experience
User scenario and structure
By mapping various business structures and user needs we could divide the different types of setups from a simple SMB to an enterprise solution.
In conclusion, regardless of the size of the integration, we can outline a universal flow for setting up integrations
Mapping out data
Following this we focused on mapping naming conventions between different systems, as well as the various layers of data and options to consider. I have attempted to illustrate these mappings in a table format. (For reference these are all POS integrations we have previously implemented)
The user journey
I used my knowledge to map out the user journeys, providing a clear overview of each step along the way, including all necessary requirements.
There are two main journeys:
Preconfigured Flow: The top journey is for users who only need to validate the data before it's synced, requiring minimal interaction.
Customizable Flow: The journey bellow is for users who want more control over their setup, allowing for more manual adjustments during the process.
Co-creation sessions
In the team we engaged in multiple rounds of iterations, diligently exploring methods to simplify both the backend and frontend process. For example, we focused on improving the user experience by eliminating the current friction users face when creating revenue units, which is essential for optimising their POS system to work with Planday.
We then used our insights to create a working prototype that could be used as a generic template which we tested with users.
Expected outcomes
In our initial trial for validating our approach we looked at the Xero Payroll integration and the way data was synced
Intuitive filters
In the previous version, the report preview and employee filters were applied all at once. In the new version, I've separated them into two distinct filters: one to filter the preview of the report and another to filter the employees. This allows for more intuitive control over what you see in each section
Improved error handling
The error handling experience is critical to the overall process, as it directly impacts the ability to sync payroll correctly. Errors should be clearly highlighted, easy to understand, and actionable. They should provide more context, and there should be an option to sort through them for better management.
Post release results:
97,57%
* The averrage time from it took from a Xero customer previews a timesheet they want to sync to the actual sync went down from 22,8 hours to just 33,3 minutes
6,25%
88,89%
Decrease in number of support tickets**
** We saw a progressive reduction in number of support tickets, going from af peak of around 36 per month to only 4 after the release