UI/UX Customizations
What can be customized?
A lot! We have created a powerful Customizations Engine, which supplies many customizations to the Borrower Hub and Lender Hub apps.
Some examples of what can be customized per partner or site:
Logos, header colors, shadows, layout spacing
Primary and Secondary color palettes
Fonts and images
Any piece of text in the app can be customized and/or translated to multiple languages
Custom javascript code for third-party services integrations (such as Google Tag Manager)
What Branding Materials Should You Provide?
When we setup your new site we will ask for your marketing website, logo, brand colors, background images and any specific instructions that you may have, such as a Branding Style Guide. After that our UI/UX team will brand the site and make adjustments as requested. We will work closely with your marketing team to yield the best possible results.
The best visual customization results turn out when clients provide us their Branding Style Guide.
Here is what you should provide:
Site Colors
Please let us know which option you choose:
Provide us with some or all of the following:
Your Branding Style Guide,
Your Primary Color in #HEX format,
Your Secondary Color in #HEX format,
Your website address.
Let us derive them from your existing branding - alternatively, we can use your logo and your marketing site colors to derive your primary and secondary colors. We will only need your marketing website address.
Logo Specs
File format:
👍 Preferred Option: Vector (EPS or SVG format).
👎 Acceptable Option: a PNG image format is acceptable if you absolutely cannot provide a vector logo. Note that PNG image quality may be slightly less than with a vector format. The image must:
have transparent background (white or other backgrounds will not work)
have minimum height of 150px.
❌ DO NOT SEND: JPG / JPEG files
Background: The background of PNG files MUST BE TRANSPARENT.
Aspect ratio: Rectangular! if you have several versions of your logo (one more vertical and one more horizontal) then provide us the one that is most horizontal. If unsure, then send us all logo versions that you have.
No White Space - the logo should fill the image completely. Do not leave white space between the logo and the image borders.
Other specs: If you request a site with a white/near-white header bar, then we need a color version of your logo (not black-only or white-only).
Which version of your logo to choose? It is important that you choose the version that will best fit in horizontal headers. The logo version that looks the most like a horizontal rectangle will work the best.
Avoid logos with additional slogans in smaller letters, and ones that have the logo elements stacked vertically.
Choosing the right logo version will ensure that your sites will look good and professional. See the examples below as a guideline.
Background images
Any background images for the welcome Start Page or Landing Pages should be:
File format: JPG or PNG
Orientation: Landscape.
Ideal Dimensions: Width 1920 pixels; height 1080 pixels.
Minimum Width: 1500 pixels.
Constraints: Areas of the image that you want to be visible must be away from:
Edges and corners. The user’s browser may crop the image based upon factors beyond Maxwell's control such as device screen size or browser size.
The center. This is valid only for the Start Page. The white area containing the welcome message and Start Application button will cover this area.
See the next page for an example that will help you visualize these constraints.
A Deeper Dive
This section is totally optional. It can be useful if you want to understand a bit more about some of the customization options.
Customizations Overview
The following PDF illustrates with examples the basic Borrower Hub and Start Page customizations:
Color Palettes
Here you can learn more about how our Design System uses your main and secondary brand colors to create a set of darker and lighter shades of them, called palettes. These palettes are in turn used to automatically color the hundreds of UI elements that create the user experience:
Last updated
