Select Page

DATE

July – Dec 2019

Location

London / Dubai

Role spec

UI design lead
Design system (figma)
Prototyping
micro-interactions

Emirates

I sub-contracted at Jigsaw XYZ, a Shoreditch-based Open Banking fin-tech, to lead the UI design of E20, Dubai’s first digital business bank. The app is designed to help the region’s SMEs streamline every aspect of running a business – from delivering cashflow analytics to generating and sending automated invoices.

My job was to kickstart the design in the app’s initial 6 months of production, bringing to life the E20 brand and creating a scalable native design system (both iOS and Android), before handing back the reigns to our end client, Emirates NBD. We had a tight 6-month window to deliver a feature-rich MVP of over 400 screens, working back-and-forth between London and Dubai. All work below is my own.

The E20 aesthetic

Unlike the UK, where we have the likes of Monzo, Revolut, N26 and Tide, there are no digital challenger banks in Dubai. E20 was the first of its kind – and I wanted the design to reflect this. I aimed for a vibrant, playful aesthetic, to stand out against the sterile, corporate branding of our competitor banks in the region.

The E20 aesthetic

Unlike the UK, where we have the likes of Monzo, Revolut, N26 and Tide, there are no digital challenger banks in Dubai. E20 was the first of its kind – and I wanted the design to reflect this. I aimed for a vibrant, contemporary aesthetic, to stand out against the sterile, corporate branding of our competitor banks in the region.

Intelligent triggered offers

E20 allows its users to set rule-based, intelligent offers which are triggered once certain parameters are met – another step in automating business processes, so SMEs can focus on the most important things.

Helpful onboarding

E20 is a feature-rich app set to evolve beyond MVP, so an informative and engaging onboarding experience was critical. I designed the carousel (left) to sit on the login screen, visible to users every time they open the app, allowing Emirates to relay tips and tutorials and showcase new features with each update.

Helpful onboarding

E20 is a feature-rich app set to evolve beyond MVP, so an informative and engaging onboarding experience was critical. I designed the carousel (left) to sit on the login screen, visible to users every time they open the app, allowing Emirates to relay tips and tutorials and showcase new features with each update.

The E20 aesthetic

Unlike the UK, where we have the likes of Monzo, Revolut, N26 and Tide, there are no digital challenger banks in Dubai. E20 was the first of its kind – and I wanted the design to reflect this. I aimed for a vibrant, playful aesthetic, to stand out against the sterile, corporate branding of our competitor banks in the region.

Automated trigger offers

E20 allows its users to set rule-based, intelligent offers which are triggered once certain parameters are met – another step in automating business processes, so SMEs can focus on the most important things.

Helpful onboarding

E20 is a feature-rich app set to evolve beyond MVP, so an informative and engaging onboarding experience was critical. I designed the carousel (left) to sit on the login screen, visible to users every time they open the app, allowing Emirates to relay tips and tutorials and showcase new features with each update.

Helpful onboarding

E20 is a feature-rich app set to evolve beyond MVP, so an informative and engaging onboarding experience was critical. I designed the carousel (left) to sit on the login screen, visible to users every time they open the app, allowing Emirates to relay tips and tutorials and showcase new features with each update.

Design principles

My designs were centered upon a few basic but key underlying principles:

01

Design for people

We're Dubai's first challenger bank. E20 should feel 'fresh' and 'human,' in contrast to the sterile, corporate aesthetics of our competitors.

02

Make it mine

SMEs come in all shapes and sizes. The app should therefore be highly flexible – easily customised to suit each individual use case.

03

Keep it simple

E20's sole aim is to make life easier for SMEs. To reduce the user's time spent on day-to-day admin, boil down the journeys to their simplest possible form.

04

Timing is everything

Deliver information at exactly the right place and time for each of your users. Let business priority drive the design hierarchy.

05

Start big, end small

Particularly with app analytics – always give the user a choice, initially presenting a holistic data set, with the option to deep-dive to more granular views.

01

Design for people

We're Dubai's first challenger bank. E20 should feel 'fresh' and 'human,' in contrast to the sterile, corporate aesthetics of our competitors.

04

Timing is everything

Deliver information at exactly the right place and time for each of your users. Let business priority drive the design hierarchy.

02

Make it mine

SMEs come in all shapes and sizes. The app should therefore be highly flexible – easily customised to suit each individual use case.

05

Start big, end small

Particularly with app analytics – always give the user a choice, initially presenting a holistic data set, with the option to deep-dive to more granular views.

03

Keep it simple

E20's sole aim is to make life easier for SMEs. To reduce the user's time spent on day-to-day admin, boil down the journeys to their simplest possible form.

01

Design for people

We're Dubai's first challenger bank. E20 should feel 'fresh' and 'human,' in contrast to the sterile, corporate aesthetics of our competitors.

02

Make it mine

SMEs come in all shapes and sizes. The app should therefore be highly flexible – easily customised to suit each individual use case.

03

Keep it simple

E20's sole aim is to make life easier for SMEs. To reduce the user's time spent on day-to-day admin, boil down the journeys to their simplest possible form.

04

Timing is everything

Deliver information at exactly the right place and time for each of your users. Let business priority drive the design hierarchy.

05

Start big, end small

Particularly with app analytics – always give the user a choice, initially presenting a holistic data set, with the option to deep-dive to more granular views.

First to market

There are 375,000 small to medium-sized enterprises in the UAE. That represents 94% of the country’s companies. Despite this, there are no digital business banks to represent them. E20 addresses this underserved market, helping SMEs to Start, Manage and Expand their businesses.

Transaction categorisation

E20 offers its users full visibility of their company's finances, breaking their outgoings down by category (e.g. investments, taxes, transport) or merchant so they can get a clear picture of where their money goes each month. I designed a comprehensive set of colour-coded category icons (below, right) to cover all transaction types.

Below, left: Transaction authorisation is verified by SmartPass (Emirates' equivalent of traditional SMS authentication codes).

First to market

There are 375,000 small to medium-sized enterprises in the UAE. That represents 94% of the country’s companies. Despite this, there are no digital business banks to represent them. E20 addresses this underserved market, helping SMEs to Start, Manage and Expand their businesses.

Marketplace ecosystem

Our users' products, services and offers appear real-time to customers in the E20 Marketplace, creating an established exchange ecosystem.

Transaction categorisation

E20 offers its users full visibility of their company's finances, breaking their outgoings down by category (e.g. investments, taxes, transport) or merchant so they can get a clear picture of where their money goes each month. I designed a comprehensive set of colour-coded category icons (far left) to cover all transaction types.

Near left: Transaction authorisation is verified by SmartPass (Emirates' equivalent of traditional SMS authentication codes).

Transaction categorisation

E20 offers its users full visibility of their company's finances, breaking their outgoings down by category (e.g. investments, taxes, transport) or merchant so they can get a clear picture of where their money goes each month. I designed a comprehensive set of colour-coded category icons (far left) to cover all transaction types.

Near left: Transaction authorisation is verified by SmartPass (Emirates' equivalent of traditional SMS authentication codes).

Atomic design system

Tight deadlines meant speed was paramount, so I created a bespoke E20 component system using strict atomic principles to allow the rapid creation of screens with reusable modules – and Amazon Style Dictionary tokens to automate design-dev handover. The app conforms to AA accessibility at every point, and even boasts a dark mode.

My process

The E20 brand was conceived by Clay, a third-party US branding agency, but it was my job to bring that brand to life on screen. I designed the component system and app screens in Sketch, using Zeplin to handover these designs to our developers, Overflow to prototype the flows, and Principle to animate the user interactions.

Atomic design system

Tight deadlines meant speed was paramount, so I created a bespoke E20 component system using strict atomic principles to allow the rapid creation of screens with reusable modules – using Amazon Style Dictionary tokens to automate design-dev handover. The app conforms to AA accessibility at every point, and even boasts a dark mode.

My process

The E20 brand was conceived by Clay, a third-party US branding agency, but it was my job to bring that brand to life on screen. I designed the component system and app screens in Sketch, using Zeplin to handover these designs to our developers, Overflow to prototype the flows, and Principle to animate the user interactions.

Transaction categorisation

E20 offers its users full visibility of their company's finances, breaking their outgoings down by category (investments, taxes, transport) or merchant so they can get a clear picture of where their money goes each month. I designed a comprehensive set of colour-coded category icons (above, left) to cover all transaction types.

Above, right: Transaction authorisation is verified by SmartPass (Emirates' equivalent of traditional SMS authentication codes).

Marketplace ecosystem

Our SME's products, services and offers appear real-time to customers in the E20 Marketplace, creating an established exchange ecosystem.

Inspired by the technology that powers stock markets and algorithmic trading platforms

E20 offers detailed analytics across sales and finances, and uses machine learning and AI powered algorithms to predict future financial outcomes. With this information, businesses can make timely, informed decisions on how they spend their money.

Inspired by the technology that powers stock markets and algorithmic trading platforms

E20 offers detailed analytics across sales and finances, and uses machine learning and AI powered algorithms to predict future financial outcomes. With this information, businesses can make timely, informed decisions on how they spend their money.

“A massive thank you to Ben. His relentless dedication to the Emirates project has been incredible, and he’s pushed Jigsaw to step up its game in design production. […] We have travelled over 30,000 miles together over the course of the project. It’s been an absolute pleasure.”

George Drury, Senior Product Designer at Jigsaw XYZ

“A massive thank you to Ben. His relentless dedication to the Emirates app has been incredible, and he’s pushed Jigsaw to step up its game in design production. […] We have travelled over 30,000 miles together over the course of the project. It’s been an absolute pleasure.”

George Drury, Senior Designer at Jigsaw XYZ

More of the good stuff

Responsive web app, 2021

More of the good stuff

Responsive web app, 2021
Spec native mobile app & microsite, 2017