Drupal Commerce has seen significant user experience improvements in the last few months, mostly because there is now a focused installation profile called Drupal Commerce Kickstart that tries to provide a highly usable install for store administrators.

My involvement started in 2009, during an evening stroll through Paris – Mike’O Conner from Commerce Guys introduced me to the idea to build a eCommerce distribution from scratch for Drupal 7. It was a great opportunity for me, to learn how the patterns I was designing for Drupal Core are applied on a large scale.

The redesigned installer for Drupal Commerce Kickstart.

We quickly learned that doing all the technical work for such a large distribution and doing all the user experience work was nearly impossible. So the focus for Drupal Commerce 1.0 was to get all the major technical parts implemented and adhere to the new UI standards of Drupal 7.

Drupal Commerce 1.0, hard to use by store administrators

The first version of Drupal Commerce saw a lot of usage, and with that a lot of complaints that it isn’t quite usable for store administrators. With eCommerce solutions like Shopify people have high expectations for what an eCommerce package should offer in terms of user experience, and Drupal Commerce simply wasn’t hitting that level.

To get a clear picture what we needed to focus on, I performed a number of small usability tests with developers and store administrators. They were people I knew should be able to successfully use Drupal Commerce. The results were quite telling;

• Participants struggled to create a product, the step between product and product display is completely alien.
• Navigating around, the Drupal information architecture gets in the way of finding often used links such as “Store”.
• Participants were unable to find the product they created, because there are no clear taxonomy settings.
• Lack of common functionality is what people where most confused about; functionality like promotions is considered a fundamental part of an eCommerce tool.

However as Drupal Commerce saw more and more action, it was clear this could not be solved by doing small iterative improvements. Drupal Commerce is primarily a technical framework, and users are confused because they expect an out-of-the-box experience. This probably has a negative impact on the adoption rate.

Drupal Commerce Kickstart, a focused distribution

With Drupal Commerce Kickstart 2.0 the intent is to provide this out-of-the-box experience and really showcase all that Drupal Commerce has to offer. Commerce Guys has invested heavily in improving Drupal Commerce Kickstart and created a team that worked hard on building critical functionality and improving many of the problems that were found by community members, clients and in usability tests.

In July 2012 I collaboration with Allison Simmons to perform a number of usability tests on an early development version of Drupal Commerce Kickstart 2.0. We tested a total of 12 participants, 8 site builders and 4 store administrators for over an hour, where we performed common tasks such as creating a product, editing an order and creating a discount. People really loved the front-end theme that Kickstart comes with by default, but they struggled with:

• Participants consistently missed functionality; from the ability to bulk create product variations, filter and bulk update products, to incomplete store settings.
• Store settings are often overly technical and missing functionality required for medium/large sized shops.
• The “Getting Started” section was designed to help people get started using Drupal Commerce Kickstart, but actually helped very little and caused its share of confusion as well.

To follow up on these findings I worked together with Allison and the team at Commerce Guys to find solutions to these problems.

Mega-menu to capture Store settings.

We revamped the installation to give more brand identity to this process; the installation process goes through the normal Drupal installation process and then allows you to add demo content. The navigation also saw significant change, which is now much more focused on store administration tasks. Where admin_menu provides a very deep insight in the information architecture and toolbar a very shallow, using mega-menu dropdowns we where able to provide a good depth and overview.

Redesigned listings using Views.

The listings provided by Drupal core are not very usable, we redesigned the product and order listing pages to capture all of the filters/bulk operations that are needed in daily store administration tasks.

These are only a few of the pages we touched following the usability testing results, we where able to fix a large number of problems in creating discounts, navigating help, creating product variations, managing your shipping services and much more.

UX lessons in designing a distribution

Distributions that have launched in the past two years clearly focused more and more on providing a great user experience. Those that succeeded went beyond what Drupal provides by default and created a product with a clear purpose and audience.

Some the lessons I learned are;

• Seven has a lot of flaws: Create a sub-theme or create your own theme – to create a stronger brand identity and fix many of Seven’s usability problems.
• Review the UX of each contributed module you add: Many of them add overly technical help text or violate Drupal UI standards that end up confusing your users.
• Customize the information architecture to meet primary use cases: Although it’s a painstaking process because Drupal makes it hard, you can gain a lot just by providing a focused navigation.
• Add additional form styling to capture more complex forms. Drupal Core has very few tools to visually manage complex forms, don't be hesitant to introduce titles, sections etc.
• Take the open-design process for a spin, we did almost all of our design work in the issue queue and this generated a lot of valuable feedback from users.

I think the most important thing I learned is to be bold, although Drupal Core offers a lot of certainty in terms of established UI patterns - it also holds you back in providing a tailored user experience for your users.

Drupal Commerce Kickstart has a lot of potential in showing all that Drupal Commerce has to offer and truly providing a great out-of-the-box experience for doing eCommerce with Drupal. From a UX level it doesn't have the legacy and immense amount of complex features other eCommerce tools offer, but still has a way to go to make its features a delight to use.

*ComerceGuys asked me to write up my experiences, working on Drupal Commerce and Drupal Commerce Kickstart.