As the first fulltime designer of PayMongo (2020), I spearheaded the work and created the first versions of the design system of the company which is still being use today. I used Figma as my primary tool and had worked closely with engineers to implement each component with accuracy in Storyblok.

I applied the popular methodology of Atomic Design System making it easier to maintain and scale as the design system and the design team grows.

As a SaaS company. Our users in PayMongo uses forms on a regular basis as they use our services. With consistent UI across the system, it'll help create a subtle psychological impact to our users that our system is reliable and secured, given that we are a payment processing company, this is a critical aspect of designing the UI.

We use message toasts to send an immediate feedback to users based on their actions without disrupting the UX flow. We use five different variants based on the scenario.

Blue are used to inform with an on-going action. It's possible that the user already completed the action needed from them, but still needs verification on our side. To subtly managed their expectations, we don't use a green toast as it is still being processed.

Red are used for errors. Errors are either due to incomplete requirements from the user or a system error has occurred.

Green are for success and completed actions.

Orange are for pending actions that is blocking us or the system to complete a certain task or request.

Gray are used to share non-critical information.

Here are some of the designed screens using the design system.