The new generation
bank app.

National Bank of Kuwait was founded in 1952 and is the #1 bank in Kuwait, as well as one of the top banks in the Middle East. It has a long rich history rooted in Kuwaiti culture and prides itself in being 'The bank you know and trust'. However, digital transformation was coming.

To ensure their future, there was a need for developing a new customer base focused on Young Kuwaitis, students, and first jobbers, becoming their everyday banking partner. The question is - how to develop an app that will be widely used?

The target users

Young, modern people from Kuwait - younger Millenials and Zoomers. We discovered that they’re self-assured in their Kuwaiti values and appreciate the opportunities available to them, value aesthetics as much as development & financial independence is important to them, but they’re interested rather than invested in it. We called them Protective Progressives - a generation who wants to experience the world around them but not with the cost of their cultural values.

My Role

I joined the project when the UI was in the process of taking shape - my role was to create and implement a motion system, working & flexing the brand to define an interaction style, develop moments of delight & point interactive possibilities for the future. I also worked with the development team to ensure we get the best results in the end product.

The Motion System

The system is based on branding - it reflects the brand focuses and expectations - it's also divided according to Wayey values. The whole system is split into two main chapters - Product & Brand. I defined the motion specs and unified the animation across the whole product, producing a ready to use, complete system to use for designers and developers - the benefits are immense starting from cutting dev time drastically.

Motion System is based on only 4 types of motion - Position, Colour Change, Scale and Opacity. All the types are defined by duration, easing, offset and value.

Every UI component is described and specified in the Motion System - that informs designer and devs on how to use it and what is possible to do with it.

Transcripts are timelines that show specific movment of the element - it cuts dev time drastically.

Illustration

Wayey illustration moves away from the funny and quirky style of the current illustration trends and focusing on a more elegant and stylized approach - making the people/objects seem more realistic with more lifelike proportions & adding in more detailed features and expressions

I developped two kind of illustration animation styles - different by how they enter the screen and if they touch the edge. The egde-touching peices thend to be more important / full page that's why they animate as an already build solid, while the centre focused ones animate form 'nothing' using tracking lines.

Pictograms

The icons' purpose is to symbolise tasks and responses in a unified and neat way, reflecting the brand both visually and in motion. The animation rules I proposed focus on keeping the spirit of the signature brand 'twist' - the green parts of the pictograms use fluid reveal movement, while the rest animates as a simple line.

Prototypes & the Journey

We thought through many scenarios - I focused on creating & pushing interaction possibilities further, to set a fresh industry standard and redefining what can be done technologically. The whole app feels intuitive and always moving - every action produces an appropriate reaction.

Transitions and other pieces of interactions are difined in the Motion System - creating a unified and cohesive matrix of movment.

Transferring money becomes a easy and beautiful moment - the brad 'twist' is used as a visual device to show action. The process is controlled by users pulling their finger up and enriched by a heptic response.

The same visual device is used to showcase voice controls.