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!
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
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
"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
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.
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 ...
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 ...
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
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.
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...
This small time-lapse video documents some of the design stages I went through ...