Websites:   Main   German  

1.0   2.0   3.0  

The making of the Gazprom website 2.0

Overview   Process  

Realizing that since the previous version of the website was launched, the interface has become incapable of coping with the tasks at hand while new devices on the market have provided opportunities for additional enhancements.

Studying the visitor statistics and analyzing user behavior scenarios. Making the first humble approach.

gazprom site2 process 01

The result follows the current design closely and solves only the most immediate support tasks. Replacing the designer on the project.

gazprom site2 process 02

Same thing. The art director asks to change the angle and try to follow a more modern path. Playing with typography, experimenting with information blocks.

gazprom site2 process 04

Art director: OK for a start. We need to make sure the columns are of different width and use less strokes. The menu is barely visible now, it’s very bland.

Trying to play with the header.

Still, the result is weak and introduces only superficial improvements. Changing the designer again.

The task is to approach the website with radical changes in mind.

gazprom site2 process 06

The art director accepts the approach given that the layout will be further developed and tested against current tasks and development plans.

The manager asks to think about various information blocks and their principles of operation. The designer stands his ground.

gazprom site2 process 03

The layout gradually evolves.

Trying to write various headlines and considering the dropout social networks block.

gazprom site2 process 08

Suddenly the designer decides to leave the studio and the project changes hands again. Carefully exploring the relationship between elements and its correlation with key indicators.

An idea comes up to explore visitor statistics and analyze user behavior scenarios. Studying the data.

gazprom site2 process 09

It turns out that initially many accents were placed in the wrong places due to the fact that the majority of visitors go to the website’s main page without looking. The website has always been more oriented towards journalists, while in reality the bulk of visitors were looking for jobs or investment opportunities. The art director asks to present the new vision of the website backed up by data analysis to the client. The client agrees to review the accents and asks to make some corrections and think about information blocks.

The approach fails to deliver. Suddenly we get a new idea: to make a more bold attempt based on the results of our research. We don’t have enough time to properly capture the visitor’s attention. Abandoning the long page and making large colorful banners using a mix of current news and Gazprom’s largest projects.

The art director approves the idea and asks to elaborate it further and make a quick prototype. Creating a working scrolling version with banner sliders.

gazprom site2 process 12

Deciding to fill the large banner slider only with the most important events, largest projects and new articles from the knowledge base. Analyzing the current contents of the website and coming to the conclusion that we should use different block types depending on the content.

gazprom site2 process 13

Using the smaller slider to show the latest news and photographs from the slide show. Coming up with several block designs similar to the main slider.

gazprom site2 process 14

Presenting the new approach to the client based on our research.

gazprom site2 process 15

The client likes the approach. We get the suggestion to test the concept in different screen resolutions by using real content. Doing so.

gazprom site2 process 16

The website’s interface should fit in a single screen and adapt to any screen resolution without scrolling. Trying out various principles of adaptive design.

Parsing current news and events of the live website and using them in the prototype, drawing conclusions about design and size of information blocks.

gazprom site2 process 18

The client is convinced. A decision is made to typeset everything with real content and use the layout for a while. Preparing a mock-up and writing guidelines for the technologist.

gazprom site2 process 19

Various block types require different designs. For example, when designing banner backgrounds we decide to place a semi-transparent gradient on top of the photo or use a colored backing if a photo is not available.

gazprom site2 process 20

A problem with a stylus that refuses to scroll the banners comes up and is easily solved.

gazprom site2 process 21

Preparing real contents and launching the website.

gazprom site2 process 22

Order a design...