2013

Step-by-Step Instructions for the Proper Development of an Online Store

We have already mentioned, the stages that take place in the creation of a website. In this article we will share the phased creation of web stores by using of one of our projects as an example - children's clothing store "Kadabra". The results of the development can be seen at http://kadabra.com.ua

So, what is your first step in developing an online store?

STEP 1. Analysis of customer request

When a client satisfied with negotiations, that we have provided in a preliminary business proposal, we go to work. The first discussion consists of the overall architecture and functionality to be implemented in the future online store.

We assess the required functionality – what features would be useful for a children’s clothing store? Let’s start with the basic functionality of the customer view of web store:

  • Goods catalogue, separated into categories.
  • Ability to purchase through the store.
  • Information about purchasing, shipping and payment terms.
  • Additional topic information (don’t forget about future online store evolvement).
  • Purchasing history for registered customers.

Next we discuss additional functions that could be useful according to the market:

  • The ability to bookmark goods for future reference. A very important factor is ease of bookmarking. The bookmarks should be available for both registered or nonregistered users.
  • Express purchase – even without registration, just by leaving a phone number. This feature is very useful for customers who are not experienced internet users and want to discuss all the terms with the web store manager.
  • Register and log in using social network APIs (children growing very fast, so the customers will return to the web store again and again).
  • Inside information about additional purchases made by other users.

After the client agrees to the current functionality of the website, we begin the admin panel discussion. Important elements to consider are:

  • Ability to manage orders with ease.
  • Ease in maintaining the catalogue.
  • Having the ability to administer sales and discounts within the web store.
  • Sales statistics system.
  • Provide inventory kits – to allow admin to assign complimentary goods to each other.

After determining the general web store concept, we can draw the approximate website structure:

Separately, we determine catalogue structure:

STEP 2. Development of technical specifications

After determining the website functionality we can begin the development of technical specifications for online store development. This document consists of every feature and every page of the project. The correct technical specifications allow us to avoid problems and save time. Technical specifications – are the documents which regulate all future interaction between client and web development professionals. It reflects all specific details in regards to the layout and functionality of the website. It organizes and strategically explains the framework of the project development.

STEP 2.5. Development of pages mock-ups

The development of technical specifications mock-ups take place simultaneously. We develop the mock-ups of every page so they can be used by the designer in developing page layouts. This stage is very important from for usability purposes. While developing mock-ups, aspects the every button location, notification format, and resource reaction are being discussed.

STEP 3. Layout development

According to the mock-ups, general topic of the website, and client wishes, we develop layouts of all the project pages.

For the featured project, the choice was light stylistics with blue elements. We also worked out all graphical information needed such as notifications, button conditions, and links conditions necessary for the next step of development.

STEP 4. Convertion of PSD to HTML

The next step is to convert all the graphical information into HTML code. In this stage we consider how to best help the website evolve in search engine ranking. There is the need to place headers, texts and links correctly. For example, the name of a category on the page with the list of items from this category, should be set as a header, because it is this page which will be promoted for key words “jeans for boys” or “buy dress for a girl”.

STEP 5. Coding

We now further the development - we  transfer layout makeups and previously developed modules to the programmer. We developing new modules and creating code of the web store engine. In the store “Kadabra” we provided a few original solutions, for example: for better positions in search engines, all the text downloaded to the top of the page, and then moved to its place using JavaScript. We also implemented a comfortable shopping cart module that allows the customer to make an order in 3 clicks and only to leave a phone # for order confirmation.

STEP 6. Testing

The next extremely important step – is website testing. The proper testing allows us to avoid problems in the online store work in the future. The proper website testing process is described more detail in our article : “Proper website testing”.

STEP 7. Placing website on web server

After testing, programmers get the opportunity to upload the website to the web server. This is the final project set up. This is also the final stage of testing which allows us to check for any remaining bugs.

Result

Due to the right implementation of online store development our client receives a high quality project which works stable and executes all assigned tasks. We also get one more incredible project in our portfolio. In following the correct web development procedures, the final website is an exact reflection of the clients wishes. The final project was above and beyond the clients initial expectations

By the way, during the last stages of project development, our team and client made a decision to develop a browser extension in the near future. This extension will notify the manager about new requests. We will describe this functionality in our next article.