JUNE 2018
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.
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.

E-Services Portal
Non-responsive
Marketing Portal
Non-responsive
E-Services Portal
Responsive
User Types
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.

Mobile
iPhone X

Tablet
iPad Pro

Desktop
16 x 9
Wireframes






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




Brand Application Patterns
Colors
-
A lot of white space
-
QFC Purple for major elements
-
Secondary colors used minimally for emphasis

Fonts
-
Helvetica Neue 75 Bold
-
Helvetica Neue 45 Light
-
Helvetica Neue 46 Light Italic
Button Styles
-
Primary vs Secondary
-
Breadcrumbs
-
Upload / Download

Icons for Actions

Forms
-
Wizard style walk through

Final Design






