Sync Flow UI Redesign for Enhanced User Experience

Sync flow is a white label, onboarding and config tool that comes with our Sync products in our Embedded Accounting Automation set of products. It is essentially a mapping tool that our clients SMB customers use to map the data from their Commerce, Expense, Payroll or Payables data and categories into their accounting platform. The designs and research we did here is more specific to Sync for Commerce but it is and will be used for our other sync products, Sync for Expenses, Sync for Payroll, Sync for Payables.

Our sync products are B2B2B and therefor we have limited access to our end users as they are our clients customers.

Make sync flow easier for merchant users

Help merchants understand what they are doing

Improve merchant completion rates.

Simplify the screens so that users aren’t overwhelmed

Set sensible defaults where possible

Give the user more visual feedback

Automate as much as we can for the user as possible. 

I hosted a discover workshop inside Figjam where we had members from Product, Engineering, Client Experience and Support. In this session we spoke about:

In the discovery workshop we outlined some rough user personas but I wanted to dig into these a little bit more so we fully understood who our users were and why they were struggling with the current flow.

Very primitive conversion 'funnel' for Clover SfC Sync Flow UI:28% of companies that start the journey of setting up Sync for Commerce end up with an actual, successful, sync.

We loose 55% of merchants during Sync Flow UI. A further 18% end up with a config that's invalid (so we disable it after 31 days).This is why we have been prioritising work to make Sync Flow UI much, much better.

The current Sync flow Ui is outdated, clunky and was mainly thought about by developers, thats why a lot of the language is thought about in a technical way and presented as such, rather than being slick, easy to understand and human.

The current designs don't offer any pre populated information in the dropdown, or group together the fields to allow the user an easier, more simple setup, config flow. The flow UI is also quite busy and bloated with none useful information which confuses the users.

This Ui is also a white label product so our clients have the ability to customise it through their branding, colours and custom text. In the screenshots below this is a test version of the flow where some of the text has been customised and the colours have been edited. 

One of the key challenges we faced was creating a product that could seamlessly blend into the client's website while still maintaining the usability and components from Codat.

Without being too technical, we made an SDK for our clients to embed the flow into their products.

We wanted the Ui to be as flexible as possible and for our clients to be able to embed Sync flow into any of their products seamlessly. For this we have designed and built it in a way that would work across many different breakpoints, and container types depending on our clients application.

To further add to the customisability of sync flow, we added the ability to customize various areas of text and three levels of styling to the branding settings. This allowed clients to have their tone of voice shine through while still maintaining the integrity and UX of the Codat app.

The user can also make all of these changes with code by using our SDK and customising text, styles and the container.

If you add both of these together then you get a wide range of brands and software types that our Ui can now seamlessly fit into and replicate a cohesive experience inline with their own brand and design language.

We wanted the Ui to be super easy and informative for the user. Below i will show the new Ui in comparison to the old version of the Ui and speak through some of the key benefits and improvements of each section.

We removed the progress Ui from the left of the page as each of our clients would have their own progress components and steps inside their own products. This also allowed us to have a more simple screen for our main persona, the clueless merchant who isn't very technical literate, we want the ui to be as plain and easy as possible.

Sync schedule is essentially the user setting up when the sync takes place on each date and when the data is synced from. We found that the old designs (left) have very technical and hard to understand questions / phrasing, it also asks for information which we can pull from the users accounting and commerce data, rather than asking them where they are based, this would be able to be detected by the API calls we make.

To improve this page we have:

We have a sync setting that asks the merchant how they would like their data represented in their accounting platform. Our old Ui for this was again very Dev-talk and doesn't make sense to commerce merchants who are doing their accounting.

To improve this page we have:

The main chunk of what sync flow does it creating a mapping of Commerce categories to Accounting accounts, in the old ui this was a very lengthy process which everyone had to go through, even if they weren't very confident with accounting or technology.

Because of this the conversion was failing for two reasons.

The user didn't complete the flow

The user didn't set up the config/mapping correctly

To improve this flow we have:

We are currently waiting for the data to come back on the new designs from being in use and some of the work to be completed however the data that we have seen so far has lead to more syncs being set up, and completing more successful syncs which means the designs have been a success, however the data is still not in a place to share.

Our clients are also super happy about the customisation they have access to and the embedablility of the flow.