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.

final design

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

desktop sketch

Mobile

mobile sketch

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.

add item

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.

product lightbox

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).

shop dock

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.

mobile shop dock

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.

product slider

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).

mobile navigation problem

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.

mobile navigation button

60 Comments

1 2 3
  1. Craig Smith
    Apr 16, 2012 @ 5:53 pm

    I like the quick shopping cart experience. I have been playing with opencart and I believe they have the same ajax driven feature with their cart as well. Way better process than the traditional shopping cart website.

    Reply

  2. magazin
    Apr 30, 2012 @ 12:53 pm

    This does look like a great theme.

    Reply

  3. Aquaster webdesign
    May 1, 2012 @ 8:33 am

    This is a great step in usability in webshop carts. The only thing you could think about is delete 1 item of 2 of the same. This is not possible at this moment in the webshop. Nice webdesign!

    Reply

  4. DiegoQ
    May 5, 2012 @ 4:44 pm

    Great strategy.
    There is a way to decrease the page´s weight, recognizing the user screen size, using javascript; I think this should be done, because of the size of images; if u are on a mobile could be hard.

    Reply

  5. طراحی سایت
    May 8, 2012 @ 12:43 am

    Thanks dear. usefull

    Reply

  6. Kamil - plywanie
    May 12, 2012 @ 6:09 am

    Damn, I’m a backend programmer. I envy you for your frontend skills.

    Reply

  7. ch kwok
    May 24, 2012 @ 11:42 pm

    great… hope this theme is free …. :)

    Reply

  8. Carl Samuelsson
    Jun 7, 2012 @ 7:53 am

    Great work! May I ask what your experience is with systems like Magento or Opencart?

    Reply

  9. Drupal Web Designer
    Jun 9, 2012 @ 2:24 am

    This will be a great theme for the stores and it will help them sale easily and fast.

    Reply

  10. Nathan Giesbrecht
    Jun 15, 2012 @ 2:15 pm

    Thanks, this is helpful. I’m about to embark on a redesign of a network of e-commerce sites, with responsive design being the main reason of doing so. You’ve given me some great ideas, thanks!

    Reply

  11. Meleny Swanson
    Jun 22, 2012 @ 5:23 pm

    Really great to see behind the scenes; most people don’t know all the work that goes into a successful site!

    Reply

  12. Grapic Man Ricardo
    Jun 22, 2012 @ 5:31 pm

    Conversion optimization at its best in the real world. So many people get so involved in the science that they forget about the impact of aesthetic appeal overall. Nice work on the navigation toggle. I would have tried to do the same.

    Reply

  13. Kenzie
    Jun 22, 2012 @ 7:23 pm

    Shrink, Share & Get Paid!

    Post your Links on Facebook, Twitter, Blogs & Websites!

    Go To http://http://netfly.co/V to get paid for your posted links!

    Reply

  14. Kenzie
    Jun 22, 2012 @ 7:38 pm

    Shrink, Share & Get Paid!

    Post your Links on Facebook, Twitter, Blogs & Websites!

    Go To http://netfly.co/V to get paid for your posted links!

    Reply

  15. Rak
    Jun 30, 2012 @ 4:26 pm

    I just love the simplicity. Thanks for sharing.

    Reply

  16. Alquiler yates Ibiza
    Jul 30, 2012 @ 3:18 am

    I have been playing with opencart and I believe they have the same ajax driven feature with their cart as well. Way better process than the traditional shopping cart website.

    Reply

  17. shauraj
    Aug 24, 2012 @ 12:59 am

    can u tell me plz, how u add price filter slider in the 3rd image above….

    Reply

  18. shauraj
    Aug 24, 2012 @ 1:01 am

    or atleast tell me the website link dat whr i cn find that runing shoping cart,including price filter…
    thnks..:)

    Reply

  19. seo
    Aug 30, 2012 @ 2:59 am

    This will be a great theme for the stores and it will help them sale easily and fast.

    Reply

1 2 3

Leave a Reply