— ROLE
UI Designer
UX designer (shared role)
Graphic Design
Branding (shared role)
Illustration
— DATE
01/04/2021
Responsive website for a B2B payments fintech startup.
I worked as the sole UI designer on this project and worked alongside an agency on the branding.
The brief was to create a site that highlighted the product concepts of money and efficiency savings. It needed to seem professional and trustworthy so companies would feel safe undertaking financial transactions, whilst also looking modern and tech-focused to give the impression the company offered a new and easier way of working.
Scroll further down for the mobile screens.
Desktop
Homepage header with easy to use menu and clear call to action.
Mini product screens show a simplified version of the interface to familiarise users with the product and not overwhelm them.
To entice customers, an interactive calculator allows them to see their potential savings. The sliders allow them to experiment without knowing exact figures.
This section displays the benefits and uses icons to break up the text and aid understanding. The take the user to other pages to learn more.
The globe is an interactive one which spins and shows live transactions around the world as they happen, further reinforcing the message of the product being a global trade solution.
Testimonials from existing users build trust in the product.
Accessing support via the help centre allows the user to self-serve where possible and reduces inbound.
Footer contains a newsletter subscription and links to all the site areas and legal information.
The ‘why our company’ section uses photography of normal people at work, to allow prospective users who are SMEs relate and see themselves using the product.
The leadership section shows cards for each person and upon clicking you can read a biography. Use of faces and biographies aims to build trust.
A close up of the biography.
The news section is designed to give impact and be easy to navigate by using large headings.
Breadcrumb trail allows the user to navigate back to the main news page.
Contents section on the right allows the user to jump to the relevant section of a long technical page.
Mobile
Top menu becomes a burger menu so it’s easily used at smaller screen sizes.
This is a description underneath your image.
The buttons have been replaced with a carousel on mobile so the screens can be switched between more easily.
Sliders are still easy to use on mobile and appropriate as they are for rough estimates rather than precise amounts.
This is a description underneath your image.
On mobile the opacity of the globe has been reduced so the legibility of the text isn’t affected.
Here the navigation chevrons have been replaced with easy swiping from left to right for mobile.
This is a description underneath your image.
Navigation of the footer has moved into a more stacked view, with menus expandable upon clicking, so the page doesn’t become too long.
This is a description underneath your image.
This is a description underneath your image.
On mobile the large spacing around targets prevents mis-clicking.
This is a description underneath your image.
