JUNE 2018

QFC Client Portal

An client-exclusive e-services and marketing portal for Qatar Financial Centre.


QFC firms are using two separate portals. One portal for marketing updates, news and events, and another for e-services. The two portals have very different user experiences as they were designed by two different service providers.


Additionally, users are required to login to both portals with different credentials.

The client requested to merge the two portals into a new user friendly design and fresh interface.


E-Services Portal

Marketing Portal

the challenge

 To design a responsive e-services web portal for a business and financial center.


The new portal would allow potential leads to apply online. It would also allow existing licensed firms to process their paperwork and fees online as well as receive news, events, contacts and various marketing material.







Visual Design

Through a series of closed meetings, I worked with the client to prioritize their business requirements.

"We want to create a single point of entry for potential clients, to do so, we think it's best to do it online"

"We want our clients to process their requests and receive their updates on the go"

"Some of our online forms are quite complex, we want to make it easier for the client to comprehend and follow through what they are filling"

we confirmed that we need to merge the two existing portals into one unified platform.


E-Services Portal


Marketing Portal


E-Services Portal


User Types

Licensed Firm Employee

Employees of already licensed firms can access the marketing portal to receive news, events, key contacts, discounts, etc.

Single Point of Contact (SPOC)

Each licensed firm nominates one employee to be a SPOC. This employee is in charge of processing all the service requests on behalf of the other employees. Only SPOCs have access to the e-services portal.

New Applicant

Prospects who are looking to license their firm under QFC. This user only has access to the registration & licensing section under the e-services portal.

User Personas

I mapped out the new portal structure.

I wanted to make sure that the portal is accessible on the go so I followed a mobile first approach.



iPhone X



iPad Pro



16 x 9


login desktop.png
Header + User Profile.jpg
Form - 02 - 1 Undertaking.jpg
Form - 02 - 2 Activities.jpg
Form - 03 - 2 Conduct Of Business.jpg
Form - 02 - 3 Applicant Contact Details.

The QFC Brand

Primary Colors

QFC Purple

QFC Purple 2


80% Black

60% Black

40% Black

20% Black

10% Black

Secondary Color Palette

Red Shades

Green Shades

Blue Shades

public website.JPG
public website 2.JPG
public register.JPG
public register 2.JPG

Brand Application Patterns


  • A lot of white space

  • QFC Purple for major elements

  • Secondary colors used minimally for emphasis



  • Helvetica Neue 75 Bold

  • Helvetica Neue 45 Light

  • Helvetica Neue 46 Light Italic

Button Styles

  • Primary vs Secondary

  • Breadcrumbs

  • Upload / Download


Icons for Actions



  • Wizard style walk through


Final Design

login page desktop.png
login page mobile.png
desktop copy.jpg
tablet copy.jpg
mobile copy.jpg
desktop menu.jpg
mobile copy 2.jpg