• Websites
  • Bank Saint Petersburg
  • The making of the Bank Saint Petersburg mobile website mock-ups

    Overview• ProcessAwards

    Opening various bank websites on a smartphone.

    bspb mobile process 1

    Going through the Bank Saint Petersburg brandbook.

    bspb mobile process 2

    Making the first attempt.

    bspb mobile process 3

    Not what we’re looking for. Looks like a traditional interface. Trying again.

    bspb mobile process 4

    Still too much graphics, excessive texts and lack of individuality. Right now this looks like a generic website of any bank, change the logo and you’re good to go. Also, the interface lacks convenient features. Trying to elaborate.

    bspb mobile process 5

    Simultaneously searching for images that would present bank products. Creating illustrations by combining images of things with watercolors.

    bspb mobile process 6

    Too old-school and illustrative, no visual core that we could single out and use in other media channels.

    Changing the designer and trying to think of a way to connect images of a bank, Saint Petersburg, watercolors and metaphors for products. What if we code the products with watercolor stains of different shapes, add relevant objects and tie everything together with the city by using the repeating patterns of ceilings, floors and walls of Saint Petersburg palaces?

    bspb mobile process 7

    Art director: The brush aesthetics absolutely doesn’t work as a way to illustrate loans and savings accounts. Although you can try not to make the connection with the product so rigid and come up with something more evident. Or you don’t have to separate them at all, I don’t know.

    Considering the visual language. Getting the idea to work with counterform. Quickly sketching.

    bspb mobile process 8

    Getting deep into avant-garde in the process. Replacing product covers on category screens with calculators that support the image of the product.

    bspb mobile process 9

    Art director: Too much shapes, too little content. Everything is too active. Reading the text takes a special effort. It’s because nobody’s writing the texts, so you introduce a lot of color to make up for it. Plus, the flat design is lifeless.

    Paying attention to the text, getting rid of the flat design, finalizing the calculators.

    bspb mobile process 11

    The art director suggests not to use counterform so often: users will get tired of it after a couple of screens.

    Starting to work on the remaining screens.

    bspb mobile process 12

    Working on the appearance of tables.

    bspb mobile process 13

    For the mobile version of the website we need to create convenient controls that would allow simple navigation. Coming up with a slider that would serve as a screen header and allow to quickly move through articles.

    bspb mobile process 14
    bspb mobile process 15

    Assembling a lorem ipsum screen.

    bspb mobile process 16

    Showing the animation for additional information screens.

    bspb mobile process 17

    Client: We don’t like the savings calculator. Its confusing, inconvenient and unwieldy. We feel this way because right now it looks like two cubes that appear disproportionately big on a mobile screen compared to other elements. Too much empty space that doesn’t work. It’s massive. That’s how we feel.

    Inventing a couple of other options.

    bspb mobile process 18

    We like the horizontally scrolling solution. Testing the dynamics.

    Choosing the third option. The client likes it.

    Unifying loan calculators.

    bspb mobile process 20

    Time to prepare final images for product covers. They are made of objects, patterns and watercolors. Choosing objects aiming for contemporary classics.

    Collecting images and sorting them by relevance.

    bspb mobile process 21

    The illustrator draws patterns.

    bspb mobile process 22

    Creating watercolor textures and turning them into Photoshop brushes.

    bspb mobile process 23
    bspb mobile process 24

    Assembling everything into pictures and testing them on screens.

    bspb mobile process 25

    After the test, moving the covers to the top of product screens.

    bspb mobile process 26

    Updating source files with the images.

    bspb mobile process 27

    Creating a detailed guide for developers. Describing principles for building the modular grid including locations of all elements on all pages with margins. Covering general typesetting rules and specific cases of mutual arrangement of elements. Talking about preparing technical graphics and the contents of user blocks. Making sure to include information about custom controls.

    bspb mobile process 29

    Sending the documentation to developers and getting back the first version of the website.

    bspb mobile process 30

    Watching over typesetting, pointing out required improvements.

    bspb mobile process 31