Merchant Warrior is a platform that provides global payment processing solutions for merchants, financial institutions and corporate organizations that enables them to have state of the art payment features whilst reducing compliance and costs.
Discovery & Research
When I joined the merchant warrior team, it was my first time working on a payment related product so I didn't know anything about the platform and how it works and that's when I started my research, with the help of MW team, I set up several documents on Dropbox Paper to cover the different aspects of the research including:
- platform goals and the problem it solves.
- identitfy our users and their goals aka 'personas'.
- current main pain points.
- current user flow and how it can be improved.
One of the problems I faced at the start of the research phase was the misunderstanding of platform-specific terms which lead me to create a "glossary" for the platform. In the glossary, we defined every term used, for example, "transaction", "virtual terminal" and "batch payments". This made it easy to clear confusion and bring every team member to the same level of understanding.
Along with the insights I gathered from the research phase, I did a UI/UX audit of the current platform, reviewing different aspects starting with the user flow, hierarchy and navigation, also, the user interface aspectes like typography, icons and colors. The audit led to several main conclusions that should be solved to improve the user experience of the platform:
- the current style looks old and doesn’t suite modern design trends.
- unclear navigation made the product looks more complex than it really was.
- there is no consistency in the patterns used across the platform.
After I finished the research and discovery phase, I had all the insights I need to start sketching solutions. I started with pen and paper but I don't like presenting that to the client as I think it's not that effective (unless you're working within a team), so, I used that just for me but when discussing it with the client, I presented low-fidelity wireframes for them to get feedback.
I did the wireframes on Sketch and shared them with the team through Marvel. The wireframes were presented on a series of rounds, in every round, I would get feedback from the team, improve and iterate until we come up with a final prototype that we are satisfied with.
Okay, now we have our prototype and it's time for the UI design phase, I experimented with different styles and directions with the aim of being simple and professional because, at the end of the day, it's a payment-solution product. I started with an experimental landing page and a dashboard page to get validation on the direction. Once I got the confirmation from the client, I started working on the product in the same direction.
As I mentioned, one of the main problems of the platform was consistency so I made sure to build a style guide covering all the components and elements of the design (color palette, typography, icons, etc..) so that the platform can scale easily as it grows.
The Merchant Warrior project is one of the best projects I worked on because of the team behind it so shout out to Raky (the founder) and the team, they were very helpful and understanding.