2016

2016

Commerzbank

eOnboarding is a client on-boarding platform for the investment banking division of Commerzbank, Germany’s second largest bank. The portal had become somewhat dated and required fresh input in order to leverage its full potential for the benefit of both new and enabled clients. 

I worked on defining the visual design while supporting the IA in interpreting its complex system.

Commerzbank

eOnboarding is a client on-boarding platform for the investment banking division of Commerzbank, Germany’s second largest bank. The portal had become somewhat dated and required fresh input in order to leverage its full potential for the benefit of both new and enabled clients. 

I worked on defining the visual design while supporting the IA in interpreting its complex system.

CB_hero

Challenge

This project was divided into two parts, firstly the redesign of the client facing web portal, followed by the internal facing admin system.

Both had lacked any development or design input over an extended period. The challenge was to not only bring the designs up to date, but to also incorporate new functionality and ensure improved usability and client experience.

CB_img01
CB_img02

Phase 1

Updating the client facing portal required a responsive design and needed to meet existing corporate brand guidelines.

CB_img03

The sign up process featured new and unique components not covered in any style guide. I needed to analyse other brand entities and sites to get a better understanding of how to shape new patterns and elements.

CB_img05
CB_img06
CB_img07

Phase 2

The internal admin system was a much larger part of the project, needing more work to break down complexity. The old design had many layers added over time which the original structure was not designed to support. This caused a lot of usability issues

CB_img08

Each page contained a multitude of components, features and details that had no clear relationship or distinction between them. I began the approach by cleaning up the designs, paying close attention to type, colours and alignment.

CB_img09

With a cleaner design I could get a clearer idea of hierarchy and dynamic on each page. I could then pick out important elements and components to be used as building blocks of a new design system.

CB_img10
CB_img11

Design System

To create a system I needed to first take a step back to focus on structure and layout. I started by looking at navigation as an anchor point which would later lead towards improved usability.

CB_img12
CB_img13
CB_img14

I then identified key components and removed clutter and unnecessary features. I took the opportunity to inject brand that would help further define and distinguish.

CB_img15
CB_img16

With a design system I had a top down approach in place. I refined the design by working on details to help emphasise features and create better relationships between components.

CB_img17
CB_img18
CB_img19
CB_img20

Other projects

OpenGammaUI & Brand

CommerzbankOnboarding Portal

LinedataFintech Solution

Transport for LondonResponsive Website

WattpadVisual Language

VodafoneWeb Product