JUNE 2018

QFC Client Portal

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

Background

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.

eservices-old.jpg

E-Services Portal

mcc-client-old.jpg

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.

 

Deliverables

 

Personas

Ideation

Wire-frames

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.

responsive.png

E-Services Portal

Non-responsive 

Marketing Portal

Non-responsive 

E-Services Portal

Responsive

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.

Site Archeticture.jpg

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

mobile_2x-100.jpg

Mobile

iPhone X

tablet_2x-100.jpg

Tablet

iPad Pro

desktop_2x-100.jpg

Desktop

16 x 9

Wireframes

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

White

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

Colors

  • A lot of white space

  • QFC Purple for major elements

  • Secondary colors used minimally for emphasis

fonts.png

Fonts

  • Helvetica Neue 75 Bold

  • Helvetica Neue 45 Light

  • Helvetica Neue 46 Light Italic

Button Styles

  • Primary vs Secondary

  • Breadcrumbs

  • Upload / Download

buttons.png

Icons for Actions

icons.png

Forms

  • Wizard style walk through

forms.png

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