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