• Websites
  • 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...