Logo   Website  

The making of Citilink online store templates

Process


Before we start, we analyze the existing website and use the statistics to put forward a number of hypotheses concerning presentation of products and their grouping.

citilink site process 01

To test these ideas, we create brand new catalog navigation and assemble a prototype.

citilink site process 02

Adding a style and presenting to the client.

The client has doubts and asks to make everything visually lighter.

Updating the prototype and presenting again.

Still, something is not right. Experimenting with contrast and accents.

citilink site process 05

During the discussion with the client we come to realize that we need to make the catalog easily extensible. The horizontal arrangement hypothesis is crumbling before our eyes.

Creating a new layout grid and making the design visually lighter.

The client approves the overall approach. Listening to comments and moving on to page mechanics.

citilink site process 07
citilink site process 08

Creating a scenario map of the website.

citilink site process 09

Finalizing the style and using main templates to test the chosen scenario.

Starting full-scale prototyping of all unique templates of the website.

citilink site process 11

Creating bottom panel animation.

As we go, the block for building your own PC and the block with sales information mutate slightly.

Finishing the scenario of making a purchase from a shopping cart.

Using a clickable prototype to go over the scenarios and the style once more and sending everything for typesetting. From now on we’ll be making changes to the assembled website.

citilink site process 15

The client has doubts about the placement of the panel with cart details. Persuading the client but taking time to find the appearance of the panel that pleases everybody.

citilink site process 16

Searching for a coherent style for advertising on the website.

citilink site process 17

Working on icons.

citilink site process 18

Finalizing various blocks with small graphic elements.

citilink site process 19

Writing bug reports as typesetting progresses.

citilink site process 20

Setting priorities for typesetting tasks.

citilink site process 21

Working on the search result mechanics.

Finalizing secondary pages.

citilink site process 23
citilink site process 24

Replacing the search result page with an advanced suggest module.

citilink site process 25

Fixing bugs.

citilink site process 26

Starting to work on the user account page.

Looking at the current account page. Everything looks complicated.

citilink site process 28

Making the structure simpler, getting rid of a lot of stuff.

Any visitor can become an expert in any category, this is what the expert panel is all about. It maintains its position on all user account pages. The order page shows detailed information about all orders.

citilink site process 29

A special section stores message history.

citilink site process 30

Finishing the user account page and sending it for typesetting.

citilink site process 31

Fixing more bugs and handing the templates over to the client.

citilink site process 27

The client launches the website in test mode. Comparing the result with our templates and writing bug reports.

citilink site process 40

Order a design...