DATE

July – Dec 2019

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. The project was fast-paced, with a tight 6-month window to deliver a feature-rich MVP of over 400 screens, working back-and-forth between London and Dubai.

Helpful onboarding

E20 is a feature-rich app set to evolve beyond MVP, so nailing down 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 (not just on their first-time use), allowing Emirates to relay tips and tutorials and showcase new features with each update.

Intelligent triggered offers

As a business, managing offers can be time consuming. The Marketplace allows SMEs 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 nailing down 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 (not just on their first-time use), allowing Emirates to relay tips and tutorials and showcase new features with each update.

Design principles

Our product 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 cluttered, corporate aesthetics of our competitors.

02

Make it mine

SMEs come in all shapes and sizes. The app should therefore be 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

Always give the user a choice – initially presenting a broad 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 cluttered, 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 easily customised to suit each individual use case.

05

Start big, end small

Always give the user a choice – initially presenting a broad 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 cluttered, corporate aesthetics of our competitors.

02

Make it mine

SMEs come in all shapes and sizes. The app should therefore be 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 broad data set, with the option to deep-dive to more granular views.

Intelligent triggered offers

Managing offers can be time consuming. The Marketplace allows SMEs 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.

Marketplace ecosystem

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

Helpful onboarding

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

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 and general brand animations.

Below: the E20 invoicing screens, prototyped in Overflow.

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. 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 and general brand animations.

Left: the E20 invoicing screens, prototyped in Overflow.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. The app conforms to AA accessibility at every point, and even boasts a dark mode.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

“A massive thank you to the Jigsaw team. Their dedication to the E20 project has been incredible, and they’ve pushed the app to new heights. […] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

Andrew Tarver, Founder of Jigsaw XYZ

Related Projects
Walking safety app (spec) — 2017
Graze, Digital Annexe & Photobox — ongoing
Website & rebrand — 2017