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.
Visual design, Prototyping, Interaction design,
Ojieame Onimiya
September 2018 - January 2019
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,
Traditionally most of the core processes of mutual funds investing is done through multiple channels and paperwork a simplified part to finish process flow.
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.
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
Although this feature was not intended for initial rollout , it was required that the designs be flexible and easily adaptable to all web platforms
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.
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.
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.
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.
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
Speak OT is the primary corporate font for FBNQuest.
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,
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.
.png)
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,
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).
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
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.