The making of the security section of the Qiwi website

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.

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.

Generating ideas.

Inviting another designer to contribute.

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

Or how about stories of regular people?

Or money that turn into a cryptocurrency?

Art director: Not quite.

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

Searching for inspiration in movies about the future.

Starting with hardcore sci-fi.

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.

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

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

Creating a clear folder structure to make further work easier.

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.

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

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.

Drawing style elements.

Analyzing possible situations and drawing user interfaces.

Solving the issue of antialiasing contour illustrations.

Trying to add phishing text messages.

Deciding to drop distortions in favor of improved legibility.

Working with the shape of the cup.

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

Thinking about user scenarios.

Working with the style of the icons.

Considering the concept of the main photograph.

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

Making corrections.

Working on interactive elements.

Fixing small bugs in typesetting.

Proofreading the text.

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