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