Today I would like to share the design process of an ecommerce theme that I recently designed. Shopdock is an Ajax ecommerce theme where the user can quickly add/remove items to the cart with a single click. It is actually inspired by one of my sites, IconDock. The design process was quite challenging to make an Ajax shopping cart with a responsive design. I will explain why certain design directions are taken to handle the design challanges for both desktop and mobile.

Planning

As shown in the "Responsive Design in 3 Steps" tutorial, the technical side of creating a responsive site is very easy. It is just a matter of using media queries to reset the layout elements on specific viewport width. Planning the responsive layouts is rather more important. Each layout (break point) should be planned. In other words, you should plan out the layouts for desktop, tablet and mobile. Below are the sketches I made for the Shopdock theme.

Desktop

Mobile

Mockup and Prototype

Usually I only design a mockup for the desktop version. The tablet and mobile version is done with CSS while prototyping the templates. Because there are way too many devices and different resolution, it will take too much time to test the design with each device and resolution. I find the best way to test responsive sites is by resizing the browser window. Testing on the actual devices (iPad, iPhone, etc.) usually done at the final phrase when the prototype templates are completed.

Ajax Shopping Cart

One Click to Add Products

The user can add/remove items to the dock instantly by clicking on the add/remove icon. It makes the shopping experience much faster and easier compared to the traditional shopping cart where user had to click back to the shop.

Product Lightbox

If the product has variants such as size and color options, obviously the single-click add item will not work because the user needs to choose the selection. So a lightbox window with the product options will pop for the user to pick.

However, the lightbox solution doesn't work well on mobile due to the small screen. Instead of popping the lightbox window, it will direct the user to the product page.

Shop Dock

The dock is invisible initially or when it is empty. When an item is added, it slides up beautifully. It is in a fixed position at the bottom of the page so the user has an overview of the cart. When an item is added, the product thumbnail is placed at the beginning of the dock so the user is aware when an item is added. The number of items in the dock is updated instantly. The loader animation appears whenever the dock is processing (whether adding or removing items).

On mobile version, the product slider on the dock is hidden. But the cart total, loader animation, and the checkout button is still visible so the user knows what is in the cart.

Product Slider

On the desktop version, the product slider is set to display 4 items at the same time. But on mobile, it resets the visible item to 2 to maintain a good size of the product container.

Mobile Navigation

When creating responsive design for mobile, another challange is designing the navigation menu. If the site has 3 or 4 buttons, then it is fine. But if the site has more than 6 buttons, it often ends up with a unpleasant result where the buttons stack on top of each other (like the screenshot below).

To solve that navigation layout issue, an icon/button is used to toggle the menu. The user can toggle the search form and the navigation by clicking on the icon. This approach is widely used on many mobile sites.