The making of the R-Bank mobile application design

Overview• Process IProcess II

The client is about to enter the market with an idea of a mobile bank. Thinking, researching the market, studying the competition and defining primary consumers of the new service. Discovering that the majority of money transfers take place between family members, close friends or colleagues. Suggesting an idea of a family bank.

rbank mobile process 1

The client accepts it. Starting to work on the implementation. Gathering information on how people give money to their children and how the children use it. Launching an internal survey at the studio.

rbank mobile process 2

Analyzing the market of mobile banking applications and defining main functionality. Dividing it into four releases.

rbank mobile process 3

Creating first sketches of the app’s dashboard and drafting possible routes from the App Store to the first money transfer.

rbank mobile process 4

The client approves. Moving on to the architecture. Using a card system to divide all entities into objects and functions. Defining their interactions.

rbank mobile process 5

Finding out what kind of people are going to be the app’s primary users and trying to imagine them as characters. Working out user scenarios.

rbank mobile process 7

Discussing the structure with the client. The first launch of the application is connected with a lengthy identification process that transforms into in-person verification at the bank’s office. We can’t give money to a child without identification, neither from the bank’s perspective, nor from a legal one. It’s thin ice.

Suggesting to rework the first launch scenario. Creating a virtual money transfer between a parent and a child, “promised money.” Now the application can be used right away.

rbank mobile process 8

Assembling interfaces created for the first version of the app into a prototype.

rbank mobile process 9

Writing use case texts and testing scenarios. Testing everything on real people.

rbank mobile process 10_1

Discovering minor problems during the testing and fixing them. Moving on to the visual style. The black replaces the green.

rbank mobile process 11

Sending the mock-ups to developers and drawing icons. Many, many icons.

rbank mobile process 12

Simultaneously starting to work on the Android version.

rbank mobile process 13

Thinking about the first launch of the application again. Sketching the registration process and considering whether we need a demo version of the app. Looking for something that would be connected to the promo website.

Cards acquire force.

rbank mobile process 14_1

Working through part of the scenarios. Testing, fixing errors. The most important scenario is the exchange of money between a parent and a child.

rbank mobile process 15

Looking at the first version of the app.

Writing down a list of errors and style mismatches and sending to the developers.

rbank mobile process 17

Thinking about microanimations and reactive animations as a way to add life to dry interfaces. Writing down detailed instructions for developers, including physical interaction with the app using fingers and the phone’s gyroscope.

rbank mobile process 18_2

Launching After Effects.

Working on each section and process individually. Writing detailed instructions.

rbank mobile process 20
Starting to work on the splash screen. Searching for the ideal animation. The triangles seem to be working. It would be great to have them activated by the gyroscope.

Meanwhile, the bank is getting ready to print the first cards. They should have a similar design in the app and be seen in different states.

rbank mobile process 22_1
rbank mobile process 22_2

Finally, starting a closed beta test of the application uploaded to the App Store.

While the first version is being brought to life by the developers, we celebrate and move on to designing the second release.

Part II