1.0   2.0   3.0  

The making of the third version of Yandex Money

Overview   Process  

Starting to design the concept from the main page. Determining one of the payment scenarios. Drawing attention to the search by placing a search field on every page. Putting the list of last transactions and Favorites section to the central panel on the main page. In the Stores section, replacing text links with stores’ logos. Putting a top-up form on the main page.

yandex money3 process 01

Trying to simplify navigation across the sections and inside one operation. Adding bread crumbs and step-by-step layouts. Highlighting the most important features and hiding excessive elements.

On the final payment page, adding the options to add the transaction to Favorites and make it regular.

yandex money3 process 02

When making transactions, users need to enter a payment password. It is often confused with the Yandex password. Thinking of how to eliminate the confusion. Deciding to put the payment password form on a completely different background to make users think: “Different form—means Yandex Money password.”

Designing the password box. First making it orange.

yandex money3 process 03

Art director suggests an idea: when receiving a bank card, you get an envelope with a PIN number, and inside there is a list covered in numbers that hides the password so you can’t see it against the light. Embracing the idea.

yandex money3 process 04

Adding a golden lock and a frame to show that the service is safe.

yandex money3 process 05

Going back to the main page. Thinking how to incorporate hints and recommendations in the main menu. Putting stores’ logos in the scroll menu, categories—in tabs.

yandex money3 process 06

Experimenting with a colored background. Doesn’t work.

yandex money3 process 07

Deciding to make the main page customizable, with links to the user’s most popular transactions. For example, those who give money to charity would see the top-up link, and those who use Yandex Money to pay for services would see the Favorites section.

yandex money3 process 08

Separating the Favorites section from the menu on the left. Now the main page contains only 10 positions, and the others can be found inside the corresponding sections. Adding icons for transactions. Moving all account operations to the left menu.

yandex money3 process 09

Adding a large section for new users describing the service’s functions and benefits. Benefits appear when a user opens the page. When clicking on the plus sign on the right, the benefits move to the left making room for new ones.

yandex money3 process 10

Simplifying the design and making it more minimalistic.

yandex money3 process 11

Finalizing the main page layout and starting to design other user scenarios, pages, forms and messages. Removing excessive details, thinking of the right metaphors, designing pages’ layouts.

yandex money3 process 12

Drawing out icons.

yandex money3 process 14
yandex money3 process 15
yandex money3 process 16

Preparing a final document—a guideline describing all elements.

yandex money3 process 17

Order a design...