Paper to Pixel

this is a second part of “designing for e-commerce” series, part one is here

In my first post in this series I wrote about what you need to know to start drafting a scope of work for your e-commerce project. The next step then is to know what elements you actually need to design to make it all work.

I already mentioned in the last post one of my designer friends who was stunned how complicated e-commerce as a project is. As he had put it, it’s not just few pages and some text on them.

And that’s true. There is a lot more to that and the challenge is to know what you will need to design and what those key e-commerce elements are.

So, a typical online shop would be built of the following elements, starting with the obvious:

1. Home Page
E-commerce home pages can take various forms. Some look like typical website ones with only an indication of the shop. Others are a shops front window with promotions and featured products. But no online shop can exist without one, you simply can’t log into the shop itself straight away. Or at least it’s not a good practice anymore.

2. Product Listing
It can be a simple list of products in your shop or a complex one with ratings and comments. One thing is important though, it has to be designed in a way so the client will have no problems navigating between products and categories. So you have to cater for a lot of information to go onto this page.

3. Individual Product Page
You usually see this page after selecting a product on the listing screen. By standard it shows the product description along with some additional info on it and it’s pictures. Some advanced shops also allow for posting comments, reviews and ratings for the product.

4. Informational Pages
These could be any pages not related to products in your shop or the payment process. A good example could be your shops terms and conditions page or its FAQ’s. Or simply a page about the shop.

5. Shopping Basket
Every now and then your clients may want to see what’s in their shopping basket. Practically all e-commerce software allow them to do that via the basket screen. In general it simply displays what the client has put into his basket so far and how much he will have to pay for those goods.

6. Checkout
When it comes to checkout screen the situation is a bit complicated. Many online shops use only one screen for the checkout process although more advanced ones may have the process broken into a few steps.

In general a checkout is a screen on which you can review your order, input your personal details and then proceed with the payment.

7. Payment Page
Depending on your payment method you may have to design screen on which the user inputs their credit card information. Some online payment merchants offer an option to customize their payment screen. In Ireland, Realex allows that and as far as I know PayPal has an option for their US customers where they can customize their payment screen*

8. Search Listing
As in every shop we sometimes may want to ask a store assistant to help us find the product we are looking for. A search facility seems to be the online counterpart to a shop assistant and many of your users will want to use it. Search listing can look similar to a product listing. So depending on how you want to design that you may not have to create this element from scratch.

Some shops would also require:

9. Client Area
This section is not required for every shop although more advanced e-commerce systems would offer the option of setting up a client area.

Client area would generally comprise of a login/user registration screen and admin screen on which the user can manage their personal info as well as payment options and past orders.

Some advanced shops, again, may also offer various statistic tools, order tracking and extensive help system. The inclusion of those will largely depend on the size of the shop you are working on though.

In the next part of the series we will look how all those elements work and the usability of e-commerce projects, common issues and solutions.

* this is unverified information. That service is definitely not offered in Ireland so my statement is based on what I have heard, not seen.