A Little Journey Through (Small And Big) E-Commerce Websites

Advertisement

People don’t spend their money online easily. Think about it: If you had to answer a long list of questions or struggle to navigate a website, how much money would you be willing to part with? Online shopping is about convenience and comfort, and those of us who have at least once ventured into the realm of online shopping know how time-consuming and unpleasant it can be.

The online stores that stand out from the rest are those that go the extra mile for their users. We’ll look here at some small and big e-commerce websites that create pleasant online shopping experiences. We’ll consider the experience from the very start to the very end, right through to the checkout process.

Interesting E-Commerce Websites

Bonobos
Bonobos’ shopping experience is smooth. Good typography and subtle colors help focus on the products and features, with all distractions fading away as you interact with the site. When a new item is added to the cart, it appears in a sliding sidebar on the right, prompting customers to either keep shopping or check out. The design of the checkout form is elegant and clean. The amount of data required is never overwhelming since it’s clearly separated in manageable chunks. And the most important bit: the favicon is a bananas icon! Now that is pretty cool.

bonobos-opt

Martina Sperl
Martina Sperl’s website is a lovely website. The shop features polished photography of her products, with a simple navigation panel fixed on the right side of the page. The hover effect is simple yet bold, showing the item number and price boldly in a large sans-serif typeface. You can, of course, click an image to view details about the product and get a 3-D view of the furniture (just a series of images). Buying a piece of furniture requires you to order by email. Again, bold full-width product images are used on product pages, and you can click on the “heart” icon to express your love for a product. Powered by WordPress.

Martinasperl

Evyi
Putting the shopping cart on the left, with the navigation, is a great idea. Because the eye starts from the top left of the page, the shopping cart takes precedence, making it more natural for users to keep track of the items in their cart and the running total.

Evyi

Banana Cafe
Banana Cafe is crazy. The 3-D hover effects of the site are consistent across the entire shopping experience. The blocks rotate in different directions, creating interesting movement throughout the website. It isn’t your ordinary online shop, but rather a collection of suggestions for your closet. The hover effects reveal a reference number that you would use in the contact form at the bottom of the page. Well, the audio and video in the background aren’t really necessary, but they do complement the unique experience on the site quite well.

Banana Cafe

MadeForFun
Well, this online shop could be made for fun, but fun was probably not the only reason to set it up. The experience on the site is, however, quite snappy indeed. You can quickly customize each product with features displayed using an accordion pattern. The shopping cart preview is visual, almost infographic-alike, rather than filled with quick-paced text. In fact, the shop even has rainbow-alike horizontal lines which still fit quite well into the design.

madeforfunmadesimo-opt

Indigo
Indigo’s shopping experience isn’t particularly extraordinary, but it’s a great example of how shops with a relatively large inventory can have a quite nice user experience. The number of navigation options on Indigo is quite overwhelming, especially the navigation in the sidebar looks a bit too complex, yet what’s interesting is the bar at the bottom of each product page. As you add an item to cart, the item is visually added to the shopping cart in the bar. Quite interesting is the fact that Indigo provides a discount for customers who are willing to invest some time into creating an account on the page. Clever.

joyandwonder-opt

Walmart
Walmart’s recent responsive redesign must have been quite an undertaking. The main navigation has been hidden behind the “Shop All Departments” button that triggers the off-canvas navigation on the side. The items are well-organized, the interface elements and the typography provide a clutter-free overview. The reviews of each item can be rated as being helpful or not quite helpful. As an item is added to the cart, a lightbox appears prompting customers to proceed to the check out or continue shopping. The checkout is well-designed across resolutions, and you see only what is actually helpful for finishing the checkout. Good information architecture, good layout, good redesign.

walmart-opt

Appliances Online
Although the overview of items per category is quite overwhelming on ao.com, the shopping and checkout experience is very pleasant indeed. On product pages, customers can compare the feature of recently viewed items next to each other in a table while many products have an embedded video review. The checkout provides a variety of options but it’s easy to follow the steps to end up with just what you need when you need it.

applicances-online-

Moomin
Sometimes you really don’t need to reinvent the shopping experience: it’s perfectly enough to provide a consistent visual style that guides the customers through the checkout. The typography, the shopping back icon, the way price tags are presented and the checkout itself fit well within the branding of the Moomin brand. Since there aren’t many products in the shop, each items is prominently highlighted; the breadcrumbs help the customer see where they are on the page at any given moment. Nice personal design that conveys an intimate atmosphere.

moomin-opt

GoMacro
If you are looking for a… different online shopping experience, GoMacro is an option worth checking out. Instead of having a simple grid overview of items, all items are grouped into colored item circles. The experience of adding items to the cart is very unique as you literally place bars into a cart. The checkout is also well-designed and quite simple to follow through although main navigation (“Back” and “Next Step”) are somehow hidden beyond the actual checkout lightbox. A unique design can work well as well, and GoMacro shows how it can be done.

gomacro-opt

Lost My Name
Alright, this isn’t really an online shop, but the checkout design is quite lovely. The design applies a soft touch of the visual design of the brand to the Web forms creating a pleasant overall experience. Probably the best adjective to describe the design is “friendly”. So is the experience of the checkout.

lostmyname-opt

lostmyname-opt-2

Indochino
Indochino’s shopping experience is the king of customization. Basically you can customize everything. However, this requires quite some interaction from customers’ side. Product images are prominently highlighted as background images. In suits, everything from jacket lapels to vents, buttons, pockets, lining and pleats can be customized. Before you check out, you are asked to provide detailed measurement data which takes just 18 steps. Well, if you’d like to provide many customized options in your shop, Indochino is a great example to learn from. The responsive design doesn’t quite work in some scenarios though, especially when it comes to pages with lots of available options.

indochino-opt

Ableton
Ableton’s website is just another example of how a vivid color scheme doesn’t necessarily interfere with a good shopping experience. The site uses many colors, yet they fit well together, creating a comfortable atmosphere on the page. Good typography, appropriate colors, with everything position just right. It was probably a nice idea not to use the “navicon” icon for navigation in the header of the page.

ableton-optjpg

Cocones
This shop has a quite remarkable user interaction. The snazzy hover effect swivels the iPad sleeve around for you to see what it looks like from the back. The large full-width photographs on product pages are a pretty nice idea to show the products “in action”. Another welcome feature is the little button in the header that tells you if an item has been added to your cart. The Web form for the billing details is short and simple, completing the pleasant shopping experience. The only drawback is the country selector that could be replaced with something a bit more elegant.

Cocones

Benj & Soto
Ben & Soto is a strictly functional website with a clean design. It has a quite unique interaction; you can decorate your own cube and then view all six sides by, well, actually rotating it. I really like the annotated elements, which add a kind of work-in-progress feel to it. Understandably, you have to create an account or sign in with Twitter or Facebook to create and save a design. A nice way of visualizing a product.

Benj & Soto

Motorola
Motorola’s responsive online shop is beautifully designed, displaying large photographs of products that dominate the screen. The flat design creates the impression that the products are a hassle-free experience. Motorola encourages its users to design their own look, and the website has a lovely UX, with large clear buttons. In a narrow view, filter and search are implemented using a fixed filter/search menu — it might be a good idea to consider using the “view mode” overlay instead.

Martinasperl

Ditto
One thing about online shopping is that you can’t try it on until you get it in the mail. Until now, that is! Ditto’s virtual try-on feature takes user interaction to a new level, as you can see what a set of eyeglass frames will look like on your face from the computer screen. The shipping information is fairly quick and easy to fill out, and the whole process is only two steps long. And the nice interaction on the front page with “opening” books is quite remarkable.

Martinasperl

Tsovet
Sophistication and elegance are words that come to mind when visiting this page. Tsovet has an interesting design, accompanied by beautiful black and white photography that sets the tone for the brand. The checkout process is relatively painless: All you need to do is fill out a straightforward single-page checkout form. The images scroll over one another, adding another interesting effect. It’s great to see how product pages manage to contain so much detail using a simple accordion pattern.

Tsovet

Canopy (currently down?)
Canopy is all the best stuff on Amazon, curated by those who know you best. You can see products recommended by your friends or make your own recommendations. Each link takes you straight to the Amazon store, where you can follow the familiar process. I like the minimalistic design of the website, and the layout has an open feel to it. The prices are clearly visible on each product, helping you to browse the website with ease. A very uncommon shopping interface that is used reasonably and properly on the site.

Canopy

Orlando
Orlando’s page has quite interesting transitions. As you click through the different categories, the preceding image fades away leaving enough space for the new image and the product details. However, you can’t actually purchase goods from the website itself; rather, you have to order by email which is quite surprising. The navigation is provided on the left side as an overlay. Also quite unusual for an online shop.

Orlando

Minimals
Minimals has a beautifully soft, minimal aesthetic. The website, which sells invitations for baby showers, is cute and friendly. It’s amazing how simple rounded corners within blocks can put you at ease. The hover effect is a bit inconvenient — the name and price fade away when you take the mouse away. In the cart, customers can select the country to which the item should be shipped and update the total price right away. A shop without bells and whistles, but with a unique, personal design. Powered by Bigcartel.

Minimals

Noodoll
Now that’s something a little different! Noodoll has a fun scrapbook feeling; cute page-loading animation are lovely as they create a bit of intrigue with the cut-out characters in the top-right corner. In fact, little animations are sprinkled all around the website, creating a playful and engaging experience. As you add more items to the cart, they appear in the left sidebar rather than in the upper right corner which is a bit unusual. Powered by Shopify.

Big Cartel

Le Col De Claudine
Le Col De Claudine’s website has an elegant design that showcases the fashion brand. Visitors are greeted with beautiful, soft photographs that act as a large header. The checkout is a five-step process, with no guest checkout option. There are not tricks or effects to detract from the subject matter. And the hover effect over the fashion pieces is bold without being too loud, although it doesn’t work on mobile phones of course. Interesting to see prices not being displayed by default, but only on hover.

Twelve South

Mujjo
The focus of the website is, well, the gloves. The ultra-minimal design is the perfect backdrop for them, and since the target market is smartphone users, all product images have an image of the touchscreen gloves with an actual device rather than the gloves alone. The search tool is hidden in the top-right corner which is not necessarily very convenient. On product pages, the product image can be zoomed in, but displayed on the right, next to the main image which is a bit unusual. The footer has quite some text which is not necessary and could be reduced, but the overall aesthetics is very pleasant.

Martinasperl

Greats
The responsive Greats’ online store is very well designed, with a lot of polish and attention to products. The online-only men’s footwear brand uses consistent typography and photography to present their products well. All items appear to be floating in the air, being shot from the same angle. The features of each shoe are thoroughly described and presented. Once items are added to the cart, you can preview the cart in a nice overlay. The checkout design is perhaps a bit too oversimplified, but it works well within the branding of the site. An online shop with products well-presented and the layout well-designed.

Greats Brand

Big Cartel
The photography on Big Cartel is strong and bold, with rich, earthy colors that grab the user’s attention. There are also no lengthy descriptions, but rather concise bits of explanation. This website has no guest checkout option (which is quite uncommon), but the entire purchasing process is only four steps long and all on one page, which keeps the process from feeling tedious and relieves the user from having to constantly click to the next step. The Web forms are also easy to use and beautifully designed. A nice example of a shopping experience that focuses on one major product item per page, and nothing else.

Big Cartel

Obey Clothing
Obey provides a smooth shopping experience, using consistent typography. Product pages provide fit and styling guides as well as a number of view for every item. The checkout link reveals a quick preview — an overlay with item,s, prices and the ability to remove or edit items from the shopping bag which is quite comfortable. The checkout is quite ordinary, yet what is missing is a progress bar that communicate in which part of the checkout process the user currently is. A nice touch is the red plus sign that means “add to shopping cart,” which is accompanied by the “Added one item to your basket” header that appears. In this case, the straightforward, no-nonsense design reinforces the brand’s image well.

Martinasperl

Früute
Früute’s website has a design that is consistent all the way through to the Web forms. The contrast could be improved a bit, but the flat aesthetic creates a soft yet down-to-earth feel that matches the brand. It’s interesting to see a mix of a common grid and large, prominent product images throughout the site. There is no guest checkout option, but you can log in using your Facebook account. It’s also quite unusual to see the “philosophy” section in an online shop which explain the passion of the company and the rationale behind its products. As an item is added to the cart, it appears as the lightbox in the right upper corner.

Martinasperl

Sew Sew
The simple grid layout and smooth transitions, along with the prices clearly displayed under each item, make for a user-friendly website. The shop is run by Claire Walls who designs everything on her own, and her personality shines through the website quite vividly. From the subtle color scheme to product photos to product descriptions, everything speaks one consistent voice. For independent online shops that’s probably the most significant quality to look after.

Sew Sew

Fiorly
The whimsical look of Fiorly is established by all of the different elements on the page: the typeface, the filter on the photographs, the color scheme and the expansive use of space. What makes this shop unique is that each product item has a dedicated story attached to it. On the product pages, you’ll find quick essays and videos about real people sharing their stories connected to the items (in that case, jewellery). A nice example of how storytelling can be embedded into the online shopping experience.

Fiorly

Conclusion

There you have it, some of the interesting online stores out there. Spending hard-earned cash is tough, so of course as a designer of an online shop, you want your users to feel as comfortable as possible. Whether you’re selling your own design services or a pair of designer jeans, it’s about a nice overall shopping experience and a quick checkout. Now if that’s not a reason to remove a couple of unnecessary checkboxes, add better typography and remove the unnecessary in the checkout, what is?

What interesting design/UX techniques for better shopping experience have you found recently? Or how have you optimized the checkout process of an online shop recently? Let us know in the comments!

We kindly thank everybody who submitted their links via Twitter and Facebook over the last couple of days. You are smashing, you know that, right?

(al, ea, vf)

↑ Back to top

Shavaughn studied Journalism and Media Studies, and specialized in Communication Design at the Rhodes University in sunny South Africa. She is interested in the way we interact with and are affected by the visual world around us and she’ll tweet such things at @shavaughnhaack .

  1. 1

    James Young (@welcomebrand)

    December 18, 2013 3:50 pm

    I know it’s promoting the eCommerce business I run but we do try and share a lot of the things we learn running our business at Cutting Edge Knives (https://cuttingedgeknives.co.uk) so I figure some of the blog posts on lessons we’ve learnt might be of interest to SM readers too :)

    - What stops you buying high value goods online? (How we improved conversions 25%) http://webdesign.tutsplus.com/articles/user-experience-articles/what-stops-you-buying-high-value-goods-online/
    - Rise of the tablets https://offroadcode.com/blog/1777/rise-of-the-tablets/
    - A conference talk about our business https://speakerdeck.com/welcomebrand/the-things-you-learn-when-youre-the-client

    Hope it’s of use/interest

    J.

    0
  2. 2

    I went through a lot of the e-commerce sites posted in this article, the majority of them seem to be over the top with feature sets that make them hard to use.

    For example Bonobos displays the cart on the right hand side when you add the product to the cart. It isn’t apparent what they are doing, it just looks cool. It took me about 30seconds to understand that the section that scrolled in was my cart and they were prompting me to continue shopping or checkout. In retrospect, unless I had brand loyalty and really wanted what was in my cart, I would have left – just because it confused me. This could be achieved so much easier with a modal guiding me to do that.

    Call me old fashion, but I love the simple elegant designs that don’t make me think.

    0
    • 3

      Completely agree with Jeremy. These are aesthetically pleasing sites, but they don’t look user friendly. You could have the most beautiful site, but if it’s hard to figure out, it won’t convert well. I guess I’m also old fashioned. :)

      0
      • 4

        Glad some others thought the same thing. I work on a huge commerce site 250,000+ products and it would have been good to see some massive storefront examples. These are all mostly small sites where it is way less of a challenge to please a visitor visually. Take into account site performance and cross-browser compatibilities when you have a million visitors a day from all corners of the world.

        0
        • 5

          Vitaly Friedman (editor-in-chief of Smashing Magazine)

          December 18, 2013 6:17 pm

          Good points, Jeremy, Stephanie and Sean! Obviously we can’t measure how successful these aesthetically pleasing sites are, but what we paid attention to were interesting ideas and design techniques that were used. So while the sites might be a bit over the top, perhaps you could apply some of the ideas featured here to your existing or upcoming projects at some point. It was actually the point of the post, and hopefully it explains why those specific sites were chosen. Thanks for your feedback!

          0
    • 6

      It’s funny you mention that, I was just showing the site to my coworkers the other day. When I first saw the (new?) design, I spent a good few minutes trying to figure out how to get to the “real” cart.

      0
    • 7

      I have to agree with Jeremy!

      0
  3. 8

    Frankly, all these e-commerce sites are over the top. For instance, bananacafe.com.br needs over 10 seconds to load (bad), the site is not responsive (worse) and when I used it on my iphone, the video in the background showed as “play” button, prompting a video player load when I tried to click any of the images to get an enlarged version (worst). If I was actually trying to shop, any of those alone would be enough to make me leave the website – all three together and I’m never coming back again.

    When it comes to a “perfect” e-commerce site, I’d upgrade the Apple iPhone 5s experience. I’d retain the scrolling site with huge images, change text to proper text (it’s images now), remove the forced scroll because it’s annoying and keep the floating header with a prominent “buy now” button. For best experience, I’d wrap it all up in a responsive design. User should always come first.

    0
  4. 9

    I’d like to see an article demonstrating and comparing good designs using popular ecommerce platforms like Zen Cart, X-Cart, and Magento. Most of the sites in this article seem to be using custom ecommerce engines, which is quite an expensive way to go.

    0
  5. 10

    Is this post just a xmas online shopping promotion!? Most of these sites are not very user friendly at all. Some of them aren’t even ecommerce site.

    0
  6. 11

    The two best online retail experiences I’ve had as far as design, payment and customer service have been fab.com and jackthreads.com.

    0
  7. 12

    Is it just me or is the Obey site supposed to open a new tab every time you click on a category? Took me a bit to realize it was doing this and just thought nothing on the site actually worked. Who the hell wants ten tabs opened for an e-commerce site? Fail.

    0
  8. 13

    Interesting post. I agree that online stores have become more and more creative the last couple of years. Take a look at a similar topic on my website: Most Creative Online Stores and eCommerce Websites of 2013

    0
  9. 14

    This post is really interesting and useful one. It’s giving the more details about popular e-commerce sites. Thanks for your information.

    0
  10. 15

    Good collection. keep em coming !!

    0
  11. 16

    Thanks for the post! You bring up some great points about e-commerce sites.

    0
  12. 17

    I totally AGREE – most of these ecommerce sites are not very userfriendly.

    Take a look at:
    FAB.com
    Fermliving.com (I did this site)
    Mrporter.com
    Netaporter.com

    And when it comes to their Mobile/responsive site, they could need some help too.

    0
  13. 18

    Some great examples here Shavaughn – the Moomin site is particularly adorable, fun and easy to use. With the rise of HTML 5 and more of an emphasis on design, ecommerce sites are certainly getting more attractive.
    However, for me, it may not have many (or any) bells and whistles, but Amazon provides an easy to use service and some nifty features.

    I’d like to see ecommerce sites tying content to their landing pages when products are bought – for example, once you purchase a new camera, the option is there to click through to a blog post about how to use it. I think it’d be a nice touch for customers, after all you do want them to come back again.

    0
  14. 19

    eCommerce is about convenience and the user experience. It’s becoming more and more accepted as an easy way to make a purchase with just a few clicks of a button. This year for Christmas I made all my purchases online without ever having to leave my favorite coffee shop – it was super easy and saved me all sorts of headaches dealing with long lines and traffic (not to mention the waste of gas driving around everywhere). I’ve been an active online shopper for years and have no doubt that the online shopping experience will continue to improve and online sales will continue to grow.

    Alex
    Isadora Design – Handcrafted Web Design Company

    0
  15. 20

    Amazing article! Very useful.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top