The making of the Posuda Tsentr online store templates

Overview• ProcessPrototype

Exploring the existing website and current advertising materials.

posudatsentr process ad

Designing key pages and assembling a clickable prototype.

posudatsentr process prototype1
posudatsentr process prototype2

Starting to develop the design concept.

posudatsentr process koncept

Right now the website looks very vague and resembles yet another online store. Deciding to insert promotional videos in the header.

posudatsentr process header

Working on the product card.

posudatsentr process product

The layout looks broken, tidying up.

posudatsentr process vol1

Working on the catalog. In a household goods store the name of the product has almost no meaning: to determine whether a product is interesting, a customer needs to look at its picture and price. Emphasizing them accordingly.

posudatsentr process accent

Thinking how we can show the scale and diversity of the store’s product range. Why don’t we show the huge number of products right on the main page. Coming up with the idea of a microscale representation: “So much of everything, and it’s just a small part!”

posudatsentr process view

Hiding the assortment behind an intriguing button.

posudatsentr process button

A couple more brushstrokes. Showing to the client.

posudatsentr process vol2

The client approves the concept. Working on the next set of pages.

posudatsentr process pages

Gradually developing and expanding catalog cards.

posudatsentr process product_page_upgrade

Devoting attention to the Add to Cart button.

posudatsentr process buy_button

Working out all microinteractions. Making sure all elements behave as expected.

posudatsentr process interactions

Meanwhile the technologist brings the templates to life. The art director notices that the product grid falls apart.

The designer comes up with the next iteration of the design.

posudatsentr process vol3
posudatsentr process vol4

Art director: I have a feeling we need to increase density in areas with long product rows. Right now there is quite a bit of spacing there but that doesn’t help the products stand out.

posudatsentr process vol5

Getting the art director’s approval for the third iteration of the layout grid and starting to work on the product card.

posudatsentr process sales2

Suggesting a new format of promotion teasers. We need something that is easy to replicate and that conveys information clearly.

posudatsentr process vol6

Coming up with the 404 error page.

posudatsentr process 404_1
posudatsentr process 404_2

Polishing the details.

posudatsentr process details

Finalizing the templates.

posudatsentr process templates

The client doesn’t like the elephant and prefers the current logo. Since it looks a bit dated, it needs to be refreshed.

posudatsentr process logo 1

Keeping the overall composition, getting rid of excessive elements, redrawing the text. Making the logo more modern and appealing. Showing two variants to the art director.

posudatsentr process logo 2

The art director chooses the first one. Finalizing and showing to the client.

The client doesn’t like the bottom brace-shaped line. Trying out other options.

posudatsentr process logo 3

The art director chooses numbers 1, 3 and 6. Showing to the client. The client doesn’t like them either and asks to use the decoration from the original logo.

Trying to make it work.

posudatsentr process logo 4

The art director chooses numbers 6, 7 and 8 and points out that the text looks crowded and needs more air. Making changes and showing to the client once again.

posudatsentr process logo 5

The client chooses the first design.

Testing and handing over the templates.