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

ExoticKnight
Mar 22, 2012 at 11:45 pm

Inspiring!

murat
Mar 23, 2012 at 12:31 am

impressive and original.

Mindfree
Mar 23, 2012 at 1:28 am

Great jop! I love your design.

Norvik
Mar 23, 2012 at 2:10 am

I like your minimalistic and clean design! :)

Gary
Mar 23, 2012 at 2:40 am

Nick, the Ajax easy to use shopping cart integration is excellent. I’ve ‘played’ with ShopDock quite a bit and the speed and ease of use is excellent. looking forward to more ecommerce themes with this functionality :-)

Pepper Time
Mar 23, 2012 at 3:38 am

cool
thank you very much

The Vector Box
Mar 23, 2012 at 4:18 am

Great insight! very impressive.

MezoraDesign
Mar 23, 2012 at 8:22 am

Nice one. I like the simplicity of your design and the use of the white space as well.

william
Mar 23, 2012 at 8:40 am

非常漂亮,,也很简洁,适合用户操作。

hediye
Mar 23, 2012 at 9:01 am

good jop, very impressive.

Pawel
Mar 23, 2012 at 9:35 am

As stated above, very impressive and inspiring. In most of the shops when you add a product to the cart you are taken from the place you have been before, so it’s a bit of confusing.

NJ SEO
Mar 23, 2012 at 10:09 am

I absolutely love this design. Very user friendly.

Menj
Mar 23, 2012 at 11:16 am

wow!! thanks for this great idea! :)

Min
Mar 23, 2012 at 11:41 am

Nicely done!

Highersite
Mar 23, 2012 at 2:39 pm

It is impressive post.I am felling glad on this article.can you more share with me.I have many ideas about it.I will come back as soon.

Thanks for more sharing…..

website development Boston

RC
Mar 24, 2012 at 2:12 am

Simple and great Design

Prem Poonom
Mar 24, 2012 at 1:46 pm

Hi, You post a most important website designing article. I will be take your service recently.
Thanks
Prem Poonom
“website applications Boston”

Aaron Neville
Mar 24, 2012 at 7:28 pm

Wow. Great insight. Also, this degrades so gracefully sans JS!

Hassan
Mar 25, 2012 at 11:43 pm

Very Nice Done! Love it!!

Mark Roberts
Mar 26, 2012 at 3:13 am

Lovely slick design, only thing I would question is the ‘plus’ icons to add the items to the cart as i think intuitively this indicates an enlarged view rather than adding to the cart, maybe a cart or buy icon would work better?

ImpressionWebStudio
Mar 26, 2012 at 3:47 am

great chance to learn professionally website planning process

London website design
Mar 27, 2012 at 9:33 am

I love the theme. It works very well and is very clean.

custom icon design
Mar 27, 2012 at 9:13 am

Very inspirate to me. I like the article like this.

Many thanks.

Joe
Mar 29, 2012 at 3:14 am

Wow, I still have a long way to go before I come close to your level as a web designer. But thanks for the inspiration!

marcalow
Mar 29, 2012 at 3:48 am

Great design.

Melbourne web design
Mar 29, 2012 at 6:03 am

wow nice. did not know Ajax had such a component, (I am new to the Ajax word unfortunately), well you know what they say better late than never. Joe

Jasa Pembuatan Web
Mar 29, 2012 at 8:01 pm

Very simple process…
I like it

yudali
Mar 30, 2012 at 4:53 am

nice theme. keep going

Jat
Mar 30, 2012 at 6:46 am

Liked it :)

Tim
Mar 30, 2012 at 11:49 am

Great looking theme. The only problem is the cart location. We have done A/B testing where I work and very few people are going to see that little footer popup for their cart items. They are going to wonder how to get to their cart page to checkout.
I would HIGHLY recommend placing a link in the header for the cart. Actually, making that bar slide down from the top of the page is a much better solution that will lead to higher conversions.
Just passing along what I’ve learned designing ecommerce sites.

sampada
Mar 30, 2012 at 2:33 pm

Nicely explained!
Thanks a lot.

Angela Brown
Apr 2, 2012 at 5:27 am

Attractive blog. Using images are too much beautiful.

Gareth
Apr 3, 2012 at 12:54 am

Wow, nice work there.

Paul Weston
Apr 3, 2012 at 3:11 am

Thought this was a great article and one that will very useful to me in the future. I really like your thought process behind the site and the way you have planned is something I am going to take on board for when I approach projects like this one. I also really like the design of the site you have produced, it has very clean a fresh feel through the use of colour and layout for both the desktop and mobile versions.

Manual
Apr 9, 2012 at 7:07 am

WoW, a great and attractive work.

Tiffany outlet
Apr 10, 2012 at 4:01 am

Vielen Dank für diesen wunderbaren Beitrag. Bewundern Sie die Zeit und Mühe, die Sie in Ihrem Blog und detaillierte Informationen bieten.

quizzes
Apr 13, 2012 at 4:42 am

Beautiful work. Apple has inspired the whole world.

quizzes
Apr 13, 2012 at 4:43 am

I also liked the attention to detail in every element of design.

John
Apr 14, 2012 at 4:09 pm

Ektaah, a crowd-funding platform, is launching a design contest to determine our logo and web design. The winner will receive an Apple iPad!

For more information and to find out how to win go to http://www.ektaah.com/web3o/node/68

Chien
Apr 16, 2012 at 4:42 am

no demo????

Think360studio
Apr 16, 2012 at 5:44 am

Hi everyone. I heard about Ajax but i didn’t know how to use it in ecommerce theme. I really enjoyed this article and learns lot. Thanks for sharing this article.

Craig Smith
Apr 16, 2012 at 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.

magazin
Apr 30, 2012 at 12:53 pm

This does look like a great theme.

Aquaster webdesign
May 1, 2012 at 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!

DiegoQ
May 5, 2012 at 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.

طراحی سایت
May 8, 2012 at 12:43 am

Thanks dear. usefull

Kamil - plywanie
May 12, 2012 at 6:09 am

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

ch kwok
May 24, 2012 at 11:42 pm

great… hope this theme is free …. :)

Carl Samuelsson
Jun 7, 2012 at 7:53 am

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

Drupal Web Designer
Jun 9, 2012 at 2:24 am

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

Nathan Giesbrecht
Jun 15, 2012 at 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!

Meleny Swanson
Jun 22, 2012 at 5:23 pm

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

Grapic Man Ricardo
Jun 22, 2012 at 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.

Kenzie
Jun 22, 2012 at 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!

Kenzie
Jun 22, 2012 at 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!

Rak
Jun 30, 2012 at 4:26 pm

I just love the simplicity. Thanks for sharing.

Alquiler yates Ibiza
Jul 30, 2012 at 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.

shauraj
Aug 24, 2012 at 12:59 am

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

shauraj
Aug 24, 2012 at 1:01 am

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

seo
Aug 30, 2012 at 2:59 am

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

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.