Design Process of ShopDock 70
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.
great chance to learn professionally website planning process
I love the theme. It works very well and is very clean.
Very inspirate to me. I like the article like this.
Many thanks.
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!
Great design.
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
Very simple process…
I like it
nice theme. keep going
Liked it :)
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.
Nicely explained!
Thanks a lot.
Attractive blog. Using images are too much beautiful.
Wow, nice work there.
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.
WoW, a great and attractive work.
Vielen Dank für diesen wunderbaren Beitrag. Bewundern Sie die Zeit und Mühe, die Sie in Ihrem Blog und detaillierte Informationen bieten.
Beautiful work. Apple has inspired the whole world.
I also liked the attention to detail in every element of design.
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
no demo????
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.