The making of the RN Bank mobile app concept and mock-ups

Overview• Process

Starting by describing the functionality of the future application.

Sketching the visual style.

Deciding to use light shades with accents of the bank’s signature orange. Getting the idea to present each successful payment on a nice colorful card.

Trying to replace the cards with more interesting shapes.

At the end, deciding to introduce achievement badges that will be given to users for each month of timely payments.

Putting together a video presenting the concept and showing it to the client.

The concept is approved. Starting to think over the structure of the app’s main screen.

Coming up with various designs for the deposit screen.

Sending the mock-ups to developers as they become ready.

Assembling standard interface elements.

Writing rules for positioning the elements on screen.

Preparing a set of mock-ups for Android.

Getting started on the app’s main feature, the achievements. Searching for a style and thinking how we can make the variety of badges diverse.

Deciding to use several base shapes that will be broken down into segments in various ways and apply different materials and colors to them. Defining the shape set.

Creating test renders and testing them in the interface.

Preparing the complete set, sending it over to the developers.

Working out the mechanics of badge animation on scroll.

Testing the beta version of the app, fixing small bugs.

Done. Announcing.