Why Drupal was chosen: 

Under.me delivers a unique, exceptional shopping experience, combined with common store features. The client required a system that would allow them to implement their carefully crafted user experience, and found that Drupal gave them the desired flexibility with good security, performance and front-end development. Linnovate was chosen to do the job.

Completed Drupal site or project URL: 

Under.me is the online apparel store and fashion line of Bar Refaeli, one of the world's top models and London-based David Balsar, also a highly visible model. Bar Refaeli has been featured twice in Sports Illustrated swim edition.

Under.me sells great looking casual underwear of outstanding quality and design, at an affordable price. The website was built and designed to reflect these values. The partners behind the venture were focused on building a slick shopping experience. They were never short of ideas when it came to marketing and building additional features - so they looked for an infrastructure that could scale with their imagination.

Describe the project (goals, requirements and outcome): 

Front-end

UI/UX guru Eyal Shahar set a goal to create a simple and pleasing shopping experience for a very specific scenario - a small, semi-impulsive purchase of a few individual products by non-techie users. This use-case gave rise to this profile:

We don’t need a feature-rich store. Instead, we want a well-defined, simple experience that will suit most of our visitors.
We want visitors to find the products they want in as short a time as possible.
We want to keep waiting times to the bare minimum.
We want the simplest checkout process possible.

This definition lead to the creation of a single-page collapsed catalog with the minimum of clutter, right below the introductory slideshow.

With some jQuery magic the catalog is hidden behind a two-way sliding gender selector. From here, the product panel will replace the now-collapsed gender panel. After clicking the product icon, a product panel will appear over the promotion boxes. We believe this presents a strong first impression and a simple and straightforward shopping experience. At no stage will you find more than one product on display, which results in a very clear focus.

Closing the last product every time you open a new one can also have devastating side-effect on a single-page catalog; you have no way of easily finding the last product you viewed because there is no specific path. We dealt with this problem and solved a few other annoying issues (e.g. product permalinks) by implementing the great BBQ jQuery plugin (included in Drupal 7’s core). With BBQ we could push changes to the URL so that visitors can use their Browser's Back and Forward buttons. BBQ also allows bookmarking and sharing of links for specific products - this kind of URL will locate the correct product and navigate (animate) right to it. An additional bonus feature of this technique is the ability to link from the main slideshow to the same product in the catalog. So, if you see Bar wearing something you really like, you can click it and take it to the checkout simply and quickly.

One of the most important goals we set was to shorten load times to the bare minimum (pun intended!), so that the website is rapid and fun to use. We didn't want potential shoppers waiting for content to arrive or for pages to load. This is the main reason we chose to employ a single page catalog. It does, however, carry a risk in that a very heavy page will take a long time to load, which is bad for everybody. 

In this regard, the most expensive assets on the website are its images, and while loading images on-demand is not difficult, this may create a situation where a user needs to wait for the images to load. This is especially true on slower connections, and may be more impactive on the UX than a very long initial load time. To counter this risk we had the first image of every product load in advance. So, when a user opens a product panel the default image is already in place, while others (different colors, back images) are loading. This way we initially load only a minimum set of images (short loading times on page load) while the rest of the images are loaded on-demand right before they are needed (no loading time when product opens).

All-in-all, Under.me is not only showing human beautifulness, but also Drupal theming art. It uses the wonderful flexibility of the theming layer in Drupal to create a sophisticated overall look.
(Kudos to @tsi and the theme dream team!).


Back-end

On the back-end of Under.me sits the shiny Drupal Commerce Kickstart distribution. Unfortunately it happens that "shiny", in our case, was at times due to the sun hitting our sweaty foreheads, as Drupal Commerce is indeed an amazing package, but not, bug-free... and for a demanding website such as Under.me, we stepped in each and every hole in the way.

(It should be noted that Drupal Commerce itself was not the source of all the issues we encountered on our journey. Peripheral sub-systems such as Rules and Entity API also challenged us during the development phase. Those issues were fixed thanks to the efforts of the Drupal community.)

Multi-currency

One of the biggest challenges was building an international website using four currencies (USD, GBP, EUR and ILS), seven shipping zones, and multiple shipping methods. Imagine the matrix... everyone expects to be able to make a purchase in whichever currency they choose and have that product shipped anywhere in the world. If you have ever dealt with such a scenario, you realize the complexity. Again, Drupal was there to facilitate the task.

The site uses GeoIP to sniff the origin of a request and set the currency accordingly. This creates a performance problem because we couldn’t cache the catalog page as it changes per request origin. However, the site needs to hold thousands of concurrent users. Is that a problem? Yes it is!

The solution we implemented was to cache per currency. The front page is a view of all the products we cache the generated HTML result of the view, with a currency prefix. This allowed us to pull the right HTML per currency. Problem solved? Not quite!

Caching posed another problem. All of the products are displayed using Ajax forms. Now, Ajax in Drupal is added via the Drupal.settings JavaScript object which gets built when the forms get built (i.e. it doesn’t get cached).  So, we had to cache them separately and add them again before serving the cached HTML. ESI (Edge Side Includes) may be another way to attack this problem, but there are downsides to this method too. We encountered this Drupal 'feature' in other projects as well, and we learned how to bypass it. We can now cache pages with dynamic forms as well. Do try this at home!

One more challenge came from the fact that our design omits two common commerce pages - Cart and Order Review. At this point we realized just how important it is not to re-invent the wheel when it is clear that generations before us use rounded wheels. A commerce site workflow is very boring: add products to cart, look at your cart, deal with shipping, coupons and gifts, review and proceed to payment. Under.me tried, and succeeded, to step out of the normal workflow, but not without a paying price, as described below.

We had to modify the cart block so it would be all Ajax and would allow the user to add or remove items inside the cart block, without refreshing the catalog page. The omitted Order Review page meant that we had to Ajaxify the checkout form as well. In the default Commerce setup, shipping details and coupons are added during the checkout submit. We didn’t have that because the submit action takes the user straight to PayPal. In other words, the user reviews the order only when entering the shipping destination and coupon details. All done on the same page, with no reloads.

Shipping was even more complicated - We could not add the shipping costs to the order because adding shipping, then deleting it and adding a different shipping method (as it works in Drupal Commerce) was a big performance hit. So we had to perform shipping calculations on the client side, only adding it to the order just before we build the form to submit to PayPal.

We strongly recommend planning international commerce sites in a way that allows complex calculations in a process apart, and not to try and do it all in one place. We proved this to be feasible, and that it can work well.

Why these modules/theme/distribution were chosen: 

Since this is 2012, a non-HTML5 theme was not an option. We also wanted to have a lightweight, semantic and solid base theme to build upon, and having a good base for a responsive layout was definitely a good thing to have for future mobile adjustments, if needed. Meanwhile, we were working on a theming tool-kit called Sasson for two other projects, so using it here was an obvious decision.

Several e-commerce systems were considered by Under.me prior to choosing Drupal, both open source and proprietary. However, given the challenging UI/UX, they finally chose Drupal for its limitless capabilities in executing a complex design, and we recommended using the new Drupal Commerce suite, which brings the same flexibility to store management. Together with Sasson, we were able to deliver exactly what the client wanted.

Community contributions: 

    Improvements to Sasson
    Fixes to Drupal Commerce
    Many bug fixes in various modules
    A special coupon for DrupalCon Munich! (details to follow)

The wonderful team at Linnovate, lead by Yaniv Aran and Tsachi Shlidor, is responsible for this piece of art. Thanks also go out to everybody else who contributed to the end product, including our amazing IT manager, Shai Weinstein, who made the site fast and secure!

On the client's side, we had the pleasure of working with David Balsar, Eyal Shahar, Amir Sher and Nir Ingbir.