overview

FBNQuest is the unified brand name for the Merchant Banking and Asset Management businesses of FBN Holdings Plc, The FBN Edge an application was built for short-to-medium term investment solution with low risk and typically offers higher interest rates with income distributions made Quarterly.

client

ROLE

Interface Designer

Visual design, Prototyping, Interaction design,

Team

Ojieame Onimiya

Jan  2019

Design Goals

For the first concept we understood what would be vital for the user would be speed and ease of use , to aid in device use during a workout sessions, and also a way to easily track and view core device use statistics,

Simplified Process flow

Traditionally most of the core processes of mutual funds investing is done through multiple channels and paperwork a simplified part to finish process flow.

Brand Integration

FBNQuest holds the title of one the most unique brands in investment banking, creating a system of components that project the brand core values was required.

Interaction Design

Interactions would be used during the testing phase to gather feedback from users, and also to provide delight throughout the app experience driving customer engagement

Responsive Web

Although this feature was not intended for initial rollout , it was required that the designs be flexible and easily adaptable to all web platforms

Process Flow

One of the biggest design challenges we faced was to keep the experience simple and minimal regardless of the complexity of the flow. Building your flow isn’t a task; it’s an opportunity. With our flow we took a “no dead ends” approach essentially guiding individuals to make the best choices, increasing their confidence and success.

Branding Integrations

Our design process started with the brand sign ,The brand experience model guides the feeling we wanted to convey during an interaction. It’s easy to notice, and is consistent.

Signature-Linear-Clear space

The preferred clear space around the signature is defined by the height of FBNQuest icon – designated here as “X”.This is the primary brand mark, used in most applications.  The construction diagram illustrates the minimum clear space around the FBNQuest signature. The clear space area is defined by the height of the icon. The minimum clear space area is equal to 1 “x” tothe left and right of the signature and 1 “x” above and below the signature.

Color

Primary palette - is made up of (Blue, Platinum, White) The RGB values are used for all digital applications. Ensuring it is accurately calibrated to ensure that the colours are a true reflection of the Pantone® colours chosen when viewed on screen.
Secondary palette -The supporting secondary colours (Steel Grey and Black) will generally be used as text colours in print. Black for maximum visibility and the steel grey for a more subtle, prestigious look.Accent
The colour magenta - General usage includes in patterning, graphs, tables, bullets and rules, etc. in presentations and print.

Iconography

An icon style has been developed for FBNQuest.This set of icons should be developed further as and when required and follow the style established. The icons should always be in the solid blue or platinum colour on white or white on a dark background.The icons may be used in signage, web applications and collateral such as information posters

Typography

Speak OT is the primary corporate font for FBNQuest.

Patterning

Derived from the icon, a patterning theme has been developed. Based on this, additional patterningdesigns will be introduced in the future.The pattern graphic is a device that is very useful in building the overall brand environment but, tobe most effective, it should be used sparingly. The patterning, on dark blue or white backgrounds,

Design Components

We designed component in relationship to other components around it. size, type, elevation and color are our major players in hierarchy and brand. Primary components should feel the most branded — while secondary should feel below or at the same level as each other. In a light app, larger colorful / darker colors, bold type and a higher elevation are recognized as primary. Smaller components with muted colors, medium or regular type, and low to flat elevation are read as secondary

Our design system provides spec’ing symbols including spacers, centering, and tap targets to indicate how a component should be built and scale. State changes communicate the component’s status to the user. They should be visually similar and distinguishable from each other.

Interface Design

Derived from the icon, a patterning theme has been developed. Based on this, additional patterning designs will be introduced in the future.The pattern graphic is a device that is very useful in building the overall brand environment but, tobe most effective, it should be used sparingly. The patterning, on dark blue or white backgrounds,

Interaction Design

Very much tied to discoverability, effective use of signifiers ensures affordances -the possibility of an action on an object-are clearly indicated in the UI. Affordances define what actions are possible. Signifiers specify how people discover those possibilities: signifiers are signs, perceptible signals of what can be done. This way Users are kept informed about what’s going on. There is continuous information about the results of their actions and the current state of the product (system).

Responsive Web Alternative

A web app that is proposed to provide the same functionality for our users as the native app and giving the advantages of unifying the codebase, using React Native for Web. A simple web app reusing the native design components with React Native for Web by reusing modules and components to make them extendable and work properly in all platforms

whats next

Lets work together!

If you'd like to talk about a project you want help with or need an advice about product design, just drop me a message at nathan@ojieame.design
I'm currently Available for any design systems projects, dashboard designs or landing pages gigs.