The making of the Tatneft bidding portal for construction projects

• Process

Starting with a document with the client’s vision of the portal. Digesting and creating a quick prototype that would allow us to study all possible scenarios and reveal potential problems.

tatneft process 01

Realizing that the complexity of the functional part of the portal and the fact that all users have several roles means we need to have a lot of mock-ups during the planning stage.

tatneft process 02

After deciding on the operation of the functional part of the website, moving on to developing the style. Creating a mood board.

tatneft process 03

Making the first approach based on a strong visual emphasis on monitoring price changes. We also get an idea of an expanding table that can be accessed from any page.

The art director approves the general approach, but suggests we decrease the noise and work on the graph to make it more functional.

The art director asks to play with the graph some more and consider a unified visual solution.

tatneft process 06

It’s a miss. It becomes clear that we need to make everything simpler and get rid of all the excessive parts. Making another approach.

tatneft process 07

The interface becomes lighter. We also get two viable ideas for visualizing price data. Adding some polish to the style and presenting to the client.

tatneft process 08

The client accepts the design. Starting to work on the remaining mock-ups. Going through the process of creating an invitation to bid.

Clearing up some details with the client.

tatneft process 10

Creating auxiliary pages.

tatneft process 11

Periodically going back to add some functionality to the price monitoring table.

tatneft process 12

Colors change several times over the course of the project. Ultimately, deciding to go with two corporate colors that match an emotion matrix. Green: the price of an item has increased or hasn’t changed. Red: the price has dropped.

Starting to work on the My Account page. Understanding user roles.

tatneft process 14

Assembling a quick prototype.

tatneft process 15

Simultaneously creating a page with all possible styles.

tatneft process 16

Making a rough draft of a menu for various roles.

tatneft process 17

Drawing registration and accreditation forms.

tatneft process 18

In the client’s database all bids are broken down into categories. Thinking about a list of categories that will be used when creating invitations to bid. Getting more details from the client: the list needs to have three or four nesting levels. Making adjustments accordingly.

The tree-like structure appears complex. Duplicating the final category list in a pop-up window for the bidding invitation form.

Starting to work on the notifications section. According to the client, the section should include system messages, bidding invitations and bid status updates. Creating an interaction scenario.

tatneft process 20

Realizing that we need to show all bid-related notifications in corresponding sections and use the notifications section only for system messages.

tatneft process 21

Moving on to the bidding section. Coming up with filters.

tatneft process 22

Drawing bid pages.

tatneft process 23

The background color is different for blacklisted companies.

tatneft process 24

Loading table data takes some time, we need a preloader animation. Deciding to make it based on the company’s logo.

tatneft process 25
tatneft process 26

By this time, the typesetting of the first part of mock-ups is finished and we can start the endless process of fixing bugs.

tatneft process 27

Making changes on the live website.

tatneft process 28

Anything that can’t be fixed right away is added to a task list.

tatneft process 29

Which starts to develop a life of its own.

tatneft process 30

Throughout the project, mock-ups are being constantly updated in a single prototype, which allows technologists to easily check their progress without disturbing the designers.

tatneft process 31

Watching the evolution of the main page over the project lifetime.

Order a design...