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.
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.
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.
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.
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.
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.
16 x 9
The QFC Brand
QFC Purple 2
Secondary Color Palette
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
Primary vs Secondary
Upload / Download
Icons for Actions
Wizard style walk through