Ahmed Magdi
Product Designer

Payers Merchant

Taking you through my process - back in 2018 -for designing the look and feel for an evolving fintech product in MENA and How I upgraded the visual identity to meet today's requirements for a modern design system!

Project Background

Payers Merchant is an important part of "Payers" a fintech product that aims to replace western union, PayPal, and the traditional way of transfer money across boards in MENA

As a part of the complete project redesign, I take the responsibility of designing the look and feel for the Merchant part of the system

The target audiences are merchants, company owners and those who deal with a huge amount of transferring money every month

Project Goals

  • Reassure the main message that this is a trustable brand.

  • Cover all different states for screens and interactions.

  • Simplify flow and lower the cognitive load causes

Payers Merchant - Web APP IxD

Main Challenge

"We have only a Logo! It's a completely new identity"- this is the sentence that summarizes the main challenge for this project, there was no prior usage for the visual identity in such a situation

My Responsibilities

  • Design the complete UI for the Web Version

  • Create a starting point for the style guide

  • Illustrate needed visuals for the different screens and scenarios

  • Deliver the High-FI UI

  • Creating microcopy needed for UI elements, Buttons, Labels, Titles... etc.

12
Illustrations Created
76
Screens
35
Ignored Try
+1500
Microcopy Words
Payers Merchant - Web APP IxD
Discovering the look & Feel to extract initial style guide

What are the constraints and where the freedom starts?

Some visual identities aren't appropriate to be adapted - as it exactly - with user interfaces, some are great! After all, it's about what we are allowed to adjust, edit and suggest by the brand guidelines and the acceptance from stakeholders.

I did some workshops with the main stakeholders to understand those constraints and to discuss the possibilities needed by the nature of the web medium...

Then I moved to create the initial palette starting from the Brand Colors, Colors to be considered, and then Layout Colors ...

Testing colors with UI elements ...

Exploring layout color and typography separately will not make me take the decision to move to the next stage, so I needed to examine it with a real UI components, content and complicated UI elements ...

Payers Merchant - Web APP IxD
Illustrations & Unique Iconset

Reflect trust, simpleness and intelligence values to a unique illustration language

With the main brand values in mind, I started to illustrate needed visual bits and illustrations as a supportive asset in the main screens ...

These are some illustrations for main tasks: withdrawn, send and deposit money and other various illustrations ...

Payers Merchant - Web APP IxD
Payers Merchant - Web APP IxD

Illustrations for "Activate your account" wizard

You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.

3 different Iconsets to communicate the distinction between information groups

The Information Architecture for the product's navigation system distributed in 3 global groups: Product Main Tasks, Company Related Sections and User Account Settings

Main Screens
System Emails Content and Design

Email clients have the supreme word

When it comes to design for emails, there is a lot of limitations, for example, the @font-face CSS attribute - which indicates support for Webfont rules - isn't supported by the major web, mobile and desktop email clients, which means that we can't use the main font family in email, and I needed to adapt the design with all this type of limitations.

Also, I did help in writing the content itself in those emails.

Demo prototype for selected interactions

inVision Prototype

Check the full prototype for Payers Merchant directly on inVasion.

Demo Video for mockup in action

This is a demo video generated from the inVision prototype to demonstrate how the interactions look like on multiple screens...

Process Documentation

This small time-lapse video documents some of the design stages I went through ...

Thanks
Payers Merchant - Web APP IxD