The making of the security section of the Qiwi website

Overview   Process  

Learning that Qiwi payment system uses encryption methods and multistage security elements that will make some banks jealous. However, the current page on security does not even mention it.

qiwi process 01

Deciding to fix the situation by telling about the security measures in place. Estimating the order and the contents of the blocks on the page, thinking about the concept.

qiwi process 02

Generating ideas.

qiwi process 03
qiwi process 04
qiwi process 05
qiwi process 06

Inviting another designer to contribute.

Designer: Maybe an unfortunate hacker can tell us how he failed to gain access to the system?

qiwi process 07

Or how about stories of regular people?

qiwi process 08

Or money that turn into a cryptocurrency?

qiwi process 09

Art director: Not quite.

Combining the ideas of e-money, hacking and security systems.

Searching for inspiration in movies about the future.

qiwi process 10

Starting with hardcore sci-fi.

qiwi process 11

It’s easy to see that the concept does not work well with the existing website, the style is too different.

We get the idea to draw the visitors’ attention to the transition from the front page of the website to the backstage, home of program code and security systems.

Preparing two versions.

qiwi process 12
qiwi process 13

Merging the light and the dark parts and presenting the concept.

qiwi process 14

Opening a VFX editor and diving into the wonderful world of video effects.

qiwi process masha 001

Creating a clear folder structure to make further work easier.

qiwi process masha 002

Making the first attempts at achieving a fly through the Qiwi logo.

Finalizing the better variant and trying it on the website.

Getting the comments from the art director.

qiwi process 16
qiwi process 17

Simultaneously working on another effect, the heart of the security system.

qiwi process 19

The effect is OK, now let’s try to find the best colors.

Every once in a while it gets out of control beautifully.

The technologist faces similar problems.

Making corrections, choosing a format, rendering.

qiwi process masha 01

Drawing style elements.

qiwi process 22

Analyzing possible situations and drawing user interfaces.

qiwi process 23
qiwi process 24

Solving the issue of antialiasing contour illustrations.

qiwi process 25

Trying to add phishing text messages.

qiwi process 26

Deciding to drop distortions in favor of improved legibility.

qiwi process 27

Working with the shape of the cup.

qiwi process 28

Going to the café, using a real cup to make a proper drawing and adding a teaspoon for wide-screen monitors.

qiwi process 29

Thinking about user scenarios.

qiwi process 30
qiwi process 31
qiwi process 32

Working with the style of the icons.

qiwi process 33
qiwi process 34

Considering the concept of the main photograph.

qiwi process 35
qiwi process 36

Deciding not to spill the beans and simply go with a neat hand holding a phone.

qiwi process 37

Making corrections.

qiwi process 38

Working on interactive elements.

qiwi process 39

Fixing small bugs in typesetting.

qiwi process 40
qiwi process 41
qiwi process 42

Proofreading the text.

qiwi process 43

Correcting several more problems and uploading the website to the server.

qiwi process 44

Order a design...