The making of the Alfa Mobile iPhone app

Overview• Process

We start by studying the current version of the application and analyzing competing services.

alfa mobile process 01

Coming up with ideas for the future application.

alfa mobile process 02

Formulating main tasks.

alfa mobile process 03

Exploring the structure of the client’s banking products and writing down customer expectations.

alfa mobile process 04

Making the first sketches.

alfa mobile process 05

Starting to work on scenarios.

alfa mobile process 06

Creating first drafts of primary screens.

Developing a prototype to demonstrate mechanics of the application. Adding small animations.

alfa mobile process 08

Presenting to the client.

The client takes some time to think and comes back a year later with new information.

The work continues.

alfa mobile process 11

Holding a survey among studio employees about how they use mobile banking apps.

alfa mobile process 12

Carefully reading the responses and drawing conclusions.

alfa mobile process 13

Creating a set of widgets for the main screen based on the survey results.

alfa mobile process 14

Moving on to interface design. Starting with the main screen and everything related to it.

alfa mobile process 15

Putting together sketches for the first conversation with the client.

alfa mobile process 16

Diving deep into interface design and prototyping core scenarios of the future app.

Bringing in the second designer.

Coming up with authorization scenarios and drawing diagrams.

alfa mobile process new 01

Starting to assemble the prototype of the future app.

alfa mobile process new 02
alfa mobile process new 03

Holding regular meetings and discussions with the client as we go. Adding all important details to the charts.

alfa mobile process new 04

Simultaneously starting to think about the design concept. Gathering samples of existing mobile interfaces, deciding on the general style.

alfa mobile process new 05

Making an attempt at the main screen with widgets.

alfa mobile process new 06

Drawing the rest of the screens.

alfa mobile process new 07

Bringing the concept to life by assembling mock-ups into a video.

alfa mobile process new 08

Presenting the concept to the client.

Getting the client’s approval and starting to prepare the prototype. Thinking about user scenarios, talking to testers.

Bringing the style of the prototype closer to the approved concept.

alfa mobile process new 10

Sending the prototype for testing. Getting results back, analyzing and drawing conclusions.

alfa mobile process new 11

Starting to finalize the concept. Improving the visual style, fixing all the weak spots in the interface.

alfa mobile process new 12

Inviting everyone involved to actively discuss the project.

alfa mobile process new 15

Getting the client’s final approval and starting to draw clean versions of the mock-ups. Creating animations.

alfa mobile process new 13 01 alfa mobile process new 13 02 alfa mobile process new 13 03 alfa mobile process new 13 04 alfa mobile process new 13 05 alfa mobile process new 13 06 alfa mobile process new 13 07 alfa mobile process new 13 08 alfa mobile process new 13 09 alfa mobile process new 13 10

Thinking over visual details and design subtleties.

alfa mobile process new 14

Ultimately getting 198 screens.

alfa mobile process new 16

Handing over the source files.

alfa mobile process new 17