• Mobile Apps
  • RN Bank
  • 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.