The making of the Posuda Tsentr online store templates

Overview• ProcessPrototype

Exploring the existing website and current advertising materials.

Designing key pages and assembling a clickable prototype.

Starting to develop the design concept.

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

Working on the product card.

The layout looks broken, tidying up.

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.

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!”

Hiding the assortment behind an intriguing button.

A couple more brushstrokes. Showing to the client.

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

Gradually developing and expanding catalog cards.

Devoting attention to the Add to Cart button.

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

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.

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.

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

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

Coming up with the 404 error page.

Polishing the details.

Finalizing the templates.

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

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.

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.

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.

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.

The client chooses the first design.

Testing and handing over the templates.