The making of the 4Tochki online store templates

Overview   Process  

Starting to plan the user interface. The main tire purchasing tool has traditionally been the tire size helper. Studying how it usually looks.

4tochki process 01

Assembling a prototype based on a two-step scenario: first we select the required parameters in the helper on the main page, then we see the search results in the catalog and make our selection.

4tochki process 02

Thinking of ways to make the helper more exciting and easy to use.

4tochki process 03

Planning the overall website usage scenario.

4tochki process 04

Why do we need a separate catalog? Combining the tire size helper on the main page and the search results together.

4tochki process 05

This leads us to a new scenario of choosing the tires.

4tochki process 06

Building a functionality matrix.

4tochki process 07

Assembling other pages.

4tochki process 08

Making the first attempt at the design concept.

4tochki process 09

Thinking about the helper user interface.

4tochki process 10

Making it slightly simpler.

4tochki process 11

Drawing the shopping cart and the product page.

4tochki process 12

The client approves the concept. A new designer joins the project and decides to make everything even more streamlined.

4tochki process 13

The shopping cart looks overloaded. Breaking it down into several steps.

4tochki process 14

The client approves the changes. Finalizing the main page.

4tochki process 15

Drawing the graphics.

4tochki process 16

Assembling the entire order flow.

4tochki process 17

Designing the form for making a tire fitting appointment.

4tochki process 18

Drawing the mock-up and thinking over the mechanics behind it.

4tochki process 19

Now the tire calculator.

4tochki process 20

Drawing other pages.

4tochki process 21

On the 404 error page replacing the zero with a car wheel.

4tochki process 404

Working with the client’s comments.

4tochki process 22

Testing the website.

4tochki process 23

Sending the templates to the client and watching over their implementation.

Order a design...