Starting by describing the functionality of the future application.
![rnb process 1](rnb-process-1.jpg)
Sketching the visual style.
![rnb process 2](rnb-process-2.jpg)
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](rnb-process-3.jpg)
Trying to replace the cards with more interesting shapes.
![rnb process 4](rnb-process-4.jpg)
At the end, deciding to introduce achievement badges that will be given to users for each month of timely payments.
![rnb process 5](rnb-process-5.jpg)
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](rnb-process-7.jpg)
Coming up with various designs for the deposit screen.
![rnb process 8](rnb-process-8.jpg)
Sending the mock-ups to developers as they become ready.
![rnb process 9](rnb-process-9.jpg)
Assembling standard interface elements.
![rnb process 10](rnb-process-10.jpg)
Writing rules for positioning the elements on screen.
![rnb process 11](rnb-process-11.jpg)
Preparing a set of mock-ups for Android.
![rnb process 11 1](rnb-process-11-1.jpg)
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](rnb-process-12.jpg)
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](rnb-process-13.gif)
Creating test renders and testing them in the interface.
![rnb process 14](rnb-process-14.jpg)
Preparing the complete set, sending it over to the developers.
![rnb process 15](rnb-process-15.jpg)
Working out the mechanics of badge animation on scroll.
![rnb process 16](rnb-process-16.gif)
Testing the beta version of the app, fixing small bugs.
![rnb process 17](rnb-process-17.jpg)
Done. Announcing.