Merchant Warrior

Role Product Designer Date 2019
Industry Financial Services Location Brisbane, Australia
Merchant Warrior new dashboard
Merchant Warrior new dashboard

The Client

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.

Some of the douments made as a part of the research
Some of the douments made as a part of the research
One of the iterations of the User Flow
One of the iterations of the User Flow

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.

UI/UX Audit
UI/UX Audit

UI/UX Audit

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.
High Fidelity Wireframes
High Fidelity Wireframes

Wireframes

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.

Merchant Warrior Styleguide
Merchant Warrior Styleguide

UI Design

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.

Transactions page
Transactions page
Searching through transactions page
Searching through transactions page
Verify batch modal
Verify batch modal
Virtual terminal page
Virtual Terminal page

Finally,

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.

Next Project Transformd

Get in Touch

Have a project? Let's talk!