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

Overview• Process

Starting by describing the functionality of the future application.

rnb process 1

Sketching the visual style.

rnb process 2

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.

rnb process 3

Trying to replace the cards with more interesting shapes.

rnb process 4

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

rnb process 5

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.

rnb process 7

Coming up with various designs for the deposit screen.

rnb process 8

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

rnb process 9

Assembling standard interface elements.

rnb process 10

Writing rules for positioning the elements on screen.

rnb process 11

Preparing a set of mock-ups for Android.

rnb process 11 1

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.

rnb process 12

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.

rnb process 13

Creating test renders and testing them in the interface.

rnb process 14

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

rnb process 15

Working out the mechanics of badge animation on scroll.

rnb process 16

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

rnb process 17

Done. Announcing.