Usually the start of a new projects/initiatives. I also do discovery work when testing concepts, prototypes and/or revisiting an existing / older projects to assess and identify problems for potential improvements by gathering and analyzing data and/or user feedback and insights
Output: Fleshed-out and validated problems, insights, sorted feedback, forms of documentations that will help in ideating & design strategies
Using the output from discovery work, I will start ideating different options that will help the users solve and/or achieve their goals. This is also the time to strategize how will it be implemented in the execution phase by collaborating with product managers / owners, stakeholders and engineers
Output: UX flows or customer journeys, strategy (MVP & ideal solutions) timeline estimates, user stories / jobs to be done, metrics of success
After planning what and how things needs to be done, execution phase is usually the step where the fine details are put in to make it a real feature / product
It may require close collaboration with engineers to ensure the quality and accuracy of implementation
Output: High fidelity mock-ups (or static/front-end html/css files) for engineering implementation
This section is still a work-in-progress, redacting info(NDA) and synthesizing raw notes
Due to NDA, I can only share partial/redacted version of the UI design and information about the project
Goal: Create a tool that will enable the company to streamline its processing to all account related tasks and issues, tailor-fit to every stakeholder's requirement
Problem / opportunity: Most accounts related tasks such as processing KYC, refunds, payouts and the likes are manually managed through 3rd-party tools that costs millions of pesos (thousands of dollars) a year. These tools enabled PayMongo to process accounts without having to build anything at first, and focus more on its own features for payments processing, but as the number of registered merchants increased, more stakeholders involved and internal processes evolving, PayMongo decided to build its own tool to accommodate its need that these 3rd-party tools cannot.
Interviewed all stakeholders from different departments with different responsibilities who is relying to get some of their tasks done on a 3rd-party tool
After synthesizing the gathered information, I started working on ideas on how we should design the tool
After pitching, discussing with stakeholders, I started turning the agreed low-fidelity designs to high-fidelity mock-ups using Figma
As internal tool needs to be secured, we designed the login page to use the Sign in with Google. This saves time and effort both in engineering as only allowed employees with PayMongo email can login. (Redacted)
One of the pages in greenhouse where Finance team can manage upcoming payouts with extracting and marking details 1:1. There are also part of this page that is automated using Coins API (Redacted)
We use the framework of Atomic Design System for our components management, which had helped us maximized Figma's variant features when building molecules and organisms
For faster processing, we need the tool to be able to batch process changes for multiple accounts (Redacted)
Here's one of the written JTBDs for the fraud and risk team, including some of the interview questions that I asked him (Redacted)
It was challenging to worked with multiple stakeholders with different requirements but it got easier eventually when the workflow has been finalized (Redacted)
Goal: To create a design system for PayMongo product and engineering team
Problem / opportunity: One of the reasons I got hired in PayMongo is my experience in building a design system. Which I immediately started as I joined the team. The most common problem that a design system can solve are consistency, scalability and efficiency in collaborating with software engineers
The first thing that I did was to audit what is already used and existing, understanding the purpose of every component that is used. Before this, PayMongo engineers used ANT design
It is always a challenge when it comes to implementing a design system. Without proper collaboration with engineers, it will be impossible to create a design system.
I used Figma as a source of truth and component management. This is also accessible to all engineers who will be working on implementing designs as their reference
We use up to 6 different variants of buttons with its own use. Primarily green for success/complete actions. Red for delete and dangerous actions. Gray are secondary buttons that can be used more than once in a page (like pagination), Blue for next steps and submit, Orange for actions with pending tasks or blockers and Violet for accent, optional actions
We used up to 6 different variants of buttons with its own use. Primarily green for success/complete actions. Red for delete and dangerous actions. Gray are secondary buttons that can be used more than once in a page (like pagination), Blue for next steps and submit, Orange for actions with pending tasks or blockers and Violet for accent, optional actions
While using different colors for button is one thing, I also specified specific sizes for buttons usage
One thing that I did as well when I was building the first versions of the design system is to create a library of the old components (pre-design system) so that I can use it when I'm working on new designs without having to do it over and over again
I also proposed a mobile navigation for the dashboard back in v0.0.1, I noticed that PayMongo's dashboard was not optimized for mobile devices, hence the proposal to start working on it since my early days
For form elements, as I audited the forms that we use in our dashboard, I only created what we usually use instead of adding new ones immediately
For better transparency on the status of a transaction and payouts, we use specific colors per tag
Specific use cases per label. We're still using Graphik font family that time which was replaced by Manrope, a more UI-friendly font
While I can use the "style" library, it's not as easy as updating text elements, but the downside usually here is that actual text can disappear
Added the calendar component when we're working on a feature that can reschedule the payout. This is a tricky one as we all know that calendars don't stay as is, specially if you'll create prototypes
Also one of the most used components in the dashboard as this creates transparency for users on what happened/didn't happened
Goal: Redesign the first version of the website to accommodate the needs of the company
Problem / opportunity: By the time I joined PayMongo, The first version of the website is already outdated both in content and in visual appeal
The team started auditing the content with marketing strategy in mind. As PayMongo already secured its first funding, it is inevitable that visual branding appeal needs to be stronger and more credible to attract more merchants to be a customer
Using the analysis and feedback in mind, we decided to use a more straightforward approach as we wanted to focus on "Getting paid without the hassle". As payment providers that time requires a lot of things and getting paid isn't as easy.
I facilitated a team collaboration mainly on how we will approach the information architechture. After careful consideration of 3 different options. We decided to decide on 3 main pages.
The redesign effort took 2 weeks to have all visuals ready and 2-3 weeks more to code. We launched it ahead of the 2 month target
We printed all the wireframes per section, per page and decided how we should arrange it, what to add/remove to it before jumping to designing high fidelity mockup
This is to illustrate different payment methods are accepted to any store
We added all icons of the payment methods that we support to emphasize the point of getting paid without the hassle. We wanted to make sure that we get the visitors attention and encourage them to continue browsing the website
To lessen the intimidation and wrong notions, we stated that PayMongo is open to all businesses, no matter how small. This is also usually one of the concerns of merchants as they see that the size of their business may not be supported by this kind of services
One of the challenges that time as PayMongo is still very young is credibility and by adding logos of the biggest brands that PayMongo serves, it immediately caught the attention and convert those who are skeptical about PayMongo
To quickly established the difference of PayMongo amongst its competitors, we added a feature section in the homepage to emphasize PayMongo's strength over others
The upper part of the pricing page is the matrix of how fees differ from each other
The lower part of it has the pricing calculator and preferential rates offer on the side. Both answers one of the frequently, specific but repetative asked questions, allowing users to self-serve
Goal: Create a micro tool that will help merchants calculate for pricing whenever they accept payments through PayMongo for the 2nd version of the website
Problem / opportunity: Before the tool, there will be inquiries solely related to the pricing and its calculation. This is a time-consuming, repetative work for the customer support team.
Around March 2020, the start of lockdown in the Philippines had been implemented due to the COVID-19 pandemic. This had forced a lot of merchants to adapt and continue their businesses online.
With this, the amount of registration and inquiries regarding pricing, though stated on the first version of PayMongo's website, it didn't answer specific questions of "how much exactly are we going to get if we ask customers to pay for X amount of pesos".
Since we are also redesigning the website that time, We brainstormed what can we do to help the customer support team lessen these repetative but specific inquiries without dismissing them
Since pricing depends on the payment method used, I designed the pricing calculator to a tab like behaviour where the calculation changes depending on what payment method is used
After several sketches of how to approach the calculator, we decided to go with this one
This was the first version of the pricing calculator which later evolved and stayed as one of the main features of PayMongo's website
Goal: To create a design system that will help me serve 3 product teams composed of 3 product managers and 14 software engineers
Problem / opportunity: Around May 2018, the design workload became challenging as roadmap targets / new features and software engineers grew in numbers. While 2 designers are working together, my co-designer eventually decided to leave after a few months. We were doing the typical approach that time where mock-ups are done using tools such as Sketch, Adobe XD and Figma. Being the sole designer of the team, I have to find a way to streamline my process and be able to accommodate more design demand as usual, if I continue to follow the typical design process.
As I worked on the design system, I kept collaborating and shadowing some engineers to understand how long and what's their process when implementing designs. It turned out that one of the common problem is consistency not only in visual but also in code(css). This is a problem that creates more problem and can be solved if there's a unified component library with proper documentation.
As it was already decided to create a design system, the strategy on how to implement it is the challenge. This was the first time that I was creating one so I have to understand things from scratch.
I didn't used any CSS framework for this project but I used mostly BEM methodology to make it easier to scale and modify
One of the critical parts of a design system are the guidelines & written principles to help scale and maintain consistency across implementation
For easier modifications and reading, we use HSLA (Hue, Saturation, Light, Alpha) while still providing hex codes for reference
One of the component pages that includes implementation guidelines both in design and in code
One of the component pages that includes implementation guidelines both in design and in code
One of the component pages that includes implementation guidelines both in design and in code
February 2020 - October 2023
April 2017 - December 2019
April 2015 - April 2017
November 2008 - September 2014