TB Metroz - flat design eCommerce drupal theme

This showcase is different from other showcases. Since the project is to create a generic theme that provide a concept design, high flexibility and easy customization ability to users; not for a specific business organization. We strive for a general method of building a site based on the predefined concept.
Drupal simply can do anything, from a news site, an education portal for your institution to an eCommerce shop. Drupal Commerce has been one of Drupal symbol being active used in 30,000 sites. Some of the big names can be called here: Cartier, Kenzo, McDonald.fr… And more can be viewed here: http://www.drupalcommerce.org/showcase
In 2013, flat design has been a trend. Most well-known products that have flat ui are: Apple iOS 7.x, Windows 8. Being a professional Drupal theme club, we’d like to provide a sleek combination of Flat design and powerful Drupal commerce module in TB Metroz theme.

Why Drupal was chosen: 

We have been through many web design projects (~ 20) using Drupal as the CMS. Hence we just choose what we can do the best.

Drupal Commerce is strong and its highly flexibility is considerable. Not to mention how scalable it is with Drupal Commerce & Drupal which allows you to upgrade your business online site with thousand of plugins/modules you can ever think of.
Once everything’s up, it’s so easy to push new content as well as manage customers’ orders for a non-technical manager.
Last but not least, Drupal is free, Drupal Commerce is too! How great you think it could be to save a vast amount of money on setting up a strong eCommerce site.

Describe the project (goals, requirements and outcome): 

The objective of the project is to create a general Drupal theme for building an eCommerce site, flat design, responsive ready, capable of heavy content sites and large traffic.
Although the project team is small, we use Scrum to take advantage of its fast development cycle and strong adaptability to change.
In order to satisfy the requirements, we came up with a set of features/designs that are necessary to implement:
- Clean & clear design: first and foremost criteria for a good eCommerce site - customers must know what and where to buy
- Drupal Commerce integrated: cart, checkout, product display, product search & categorizing… are some features we developed, solely for demonstration.
- Flat UI: catch up with most updated trend
- Multiple appearance forms of content: Carousel, Accordion, Slideshow, Quicktab...
- Responsive design: a must in nowaday web design since number of users using mobile & tablets has increased rapidly
- Multi-skin: 7 color skins with vivid and bright schemes that are suitable for eCommerce sites.
- Multiple content types & pages: Blog, article, forum, poll...
- User interaction: comment, item posting, cart management... are common features for an eCommerce site
- Homepage layout that is clear and well categorized. It’s important that visitors can easily get used to the site and utilize it to the fullest

Organizations involved: 
Why these modules/theme/distribution were chosen: 
  1. Nucleus (base theme): This is a solid and flexible Drupal base theme which is developed by us ThemeBrain team. This base theme provides a smart grid system, flexible typography, advanced block styling, and other useful theming features. These features save us ton of time to develop a new sub-theme.
  2. eCommerce: a complete eCommerce solution for Drupal.
  3. Views: one of the most powerful module in Drupal 7 community which provides ton of features to create dynamic and flexible pages and blocks.
  4. Views Slideshow: It is a very powerful module that can be used to create flexible slideshow of any content that can appear in a View.
  5. Views Accordion: This module provides a display style plugin for the Views module to display content as an accordion format.
  6. Superfish: One of the most popular modules which integrates jQuery plugin with Drupal menu to provide a user-friendly and stable drop-down menu with full of options to adjust animation, themes and other useful features.
  7. Webform: We use this module to achieve the contact form which is different from default contact form provided by Drupal.
  8. Quicktabs: A great module to create blocks of tabbed content.
  9. Similar By Terms: This module provides functionality to display a block with links to other similar content. Similarity is based on the taxonomy terms assigned to content.
Project team: 

Team & Timeline

As usual, our project team for creating a theme is lean. It consists of 1 css, 1 developer, 1 QA/QC (she was in charge of both job), 1 designer.
Time line: 5 weeks (Please find the diagram below)

TB Metroz project timeline
Responsive TB Metroz - eCommerce Drupal theme
TB Metroz homepage screenshot
TB Metroz product display screenshot
TB Metroz product filter