Implementation of the DS on the Merchant Boarding Tool.
After the creation of the Beat Design System 1.0 (BDS), we decided that the Merchant Boarding Tool would be first product to integrate.
Merchant Boarding Tool (MBT) is an online and dynamic form used by merchants to apply for processing payments with Payvision. The questions vary based on the merchant’s industry, risk assessment, size, channel and so on. We choose MBT as the guinea pig for the BDS because it was a product that still had the old Payvision branding (the other products had a cosmetic branding before). Moreover, MBT was a standalone product and the less complex product making the perfect candidate to learn from.
This is the example of some screen of the Merchant Boarding Tool pre-implementation of the Design System. In order to work only in the implementation of the design system and leave as little work as possible for the development team of the product, we kept the structure of pages the same.
The planning:
The design system project started when I was working as the UX designer of the company. By the time we started the project for the implementation on the MBT, I was already the Team Lead and took over the project.
My team was in charge of the design system. We would work closely with the development team responsible for the online onboarding tool of Payvision. We had weekly meetings reviewing and discussing the components and its needs for this specific product. Everything that was related to a component our team would take care of, develop and document on Storybook and Invision. Everything else on the product would be developed by the onboarding team with the rebranded designs provided by us. We made minimal change on the structure of the product to make a more seamless implementation (and the UX was performing well with it’s users).
Merchant Boarding Tool redesigned.
The work never ends:
Like we suspected, being the first product to implement, we had numerous rounds of feedback, demos and a fair amount of management of expectations.
We also created a collaborative Kanban board shared with all developers in the project to raise features and bugs that would fill our sprints.
We quickly learned that the more collaboration the better but always making sure the project had a clear ownership in order to keep on going. You can read more about my design system insights in this case.
The onboarding tool is a behind login product but here you can see at least the login screen live :)
The Merchant Boarding Tool was designed by me and developed by Juan Carlos and Javier (with support from Javi, Carlos, Alex, Slawek, Duan and Alberto).