Revamping Drupal Commerce’s UX

By Bojhan on 21 Aug, 2012

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.

Discussion

I think you are doing a great job on the UI for Kickstart 2.0. Keep pressing for a great user experience.

Drupal Commerce has surpassed Atrium as the shining example of a Drupal distribution. It is cutting edge thoughout, from software architecture to user experience. Nice work, Bojhan and CG team.

Great work, Bojhan and team :-)

Tiny tweak (yet an important one, esp. to UX researchers like me): "We tested a total of 12 participants, 8 site builders and 3 store administrators for over an hour, " Did you test 11 participants? Also, 3 seems to too small of a sample size. I have done studies with 3 participants (but that is mostly during the formative stages of the design). Research suggests (Virzi study) that testing with 5 participants reveals 80% of big usability study whereas with 3 participants you can get only two 65% of the majority of the usability issues uncovered.

Were the tasks tested the 80% use case? Were they based on research or conversations? (just curious). I am also interested in knowing the role of store administrators, were do they fall under the spectrum of users using the system (persona) and their skill set.

@moshe,joe Thanks! I am glad to hear Drupal Commerce is making such a dent.

@dcmistry Corrected that mistake, we tested 4 store administrators. We where testing an early alpha, by no means was the intend to do a full study. The sample size could have been bigger for store administrators, I hope that in the next studies they do the tip is balanced towards store administrators.

The tasks where determined on conversations, with peers who build e-commerce sites and the experience of Allison and her clients at CommerceGuys. The store administrators we tested had a range of skill sets, but the primary requisite we used is that they where currently actively administrating a medium to large webshop, and performed product and order management activities.

Great work on the installer and awesome job on the new backend theme. The demo content and baked-in faceted search is also super convenient.

I'm surprised to see the overlay in this distro though. I turn the overlay off in all my install profiles for other reasons but since this distro is mobile friendly it would make even more sense to turn it off.
I have to admit I haven't checked kickstart2 on my phone though.

How do we back port all this stuff into our current Commerce stores?

Great work Bojhan, I've heard good stuff about Kickstart2 theme during the Drupalcon and now I see why. Nice to see you there.

Does any of your work/study help non "commerce kickstart" Commerce users? If yes, what?

Would be nice to update your article with this.

Thank you, Bojhan!

@Felipe: Hi !

You can already find almost all of the modules that we're using inside Kickstart on drupal.org:
- Jirafe (reporting tool)
- Inline Entity Form
- Commerce Fancy Attributes
- Commerce AutoSKU
- Search API suite (facets, filters...)
- Commerce Addressbook
- ...

We still need to contribute those:
- Commerce Backoffice (the admin views)
- Commerce Kickstart Menu (the store admin megamenu)

Hope that helps !

@Felipe: And of course the Omega Kickstart theme which is perfect for Drupal Commerce and brings responsiveness to your site.

Very good blog! Do you have any helpful hints for aspiring writers?
I'm planning to start my own site soon but I'm a little lost on
everything. Would you advise starting with a free platform like Wordpress or go for
a paid option? There are so many options out there that I'm totally overwhelmed ..
Any ideas? Thank you!

I am sure this article has touched all the internet people, its really really fastidious paragraph
on building up new blog.

Wonderful do the job Bojhan, I've truly noticed good stuff about Kickstart2 topic over the Drupalcon now I realize why. Wonderful to discover people right now there.

I always emailed this web site post page to all my associates, since if like to read it next my contacts will too.

I read this article fully about the difference of latest and previous technologies, it's awesome article.

That would be Medicus the #1 swing trainer aid in the world to improve
their skill sets and knowledge base while making themselves more marketable to employers.

Tools for marine mechanics or recreational boaters who do their own watercraft maintenance.
In the meantime the government shutdown will continue until one side concedes it has lost the public opinion battle.

If two hamsters are doing this to each other, it may appear
as if they are in a boxing match. You should focus on your core muscles
if you want to lose belly fat quickly and get flat abdominals in a short time.
Proboxing gear which is one of the best online stores for all types
of Kick Boxing Equipments like Boxing Gloves, Best Boxing Shoes,
Handwraps and Gauze, MMA Gloves, Cheap Boxing Shoes, etc.

PayingScammers will always push to magician be paid in advance.
Yes, Florida beach vacations have been redefined in Florida.

Getting appropriate car accident accident claim compensation.
Fewer than 10% of road accidents involve cyclists; however, this has come at a pretty
grave and continual cost.

Now, however, are only measurable when dealing with this type
of mechanics Bank issued MTN Distribution. It is very hard to let go of
those rules and learn new techniques. Heavy equipment firms employ heavy-duty equipment mechanics.
What this means is that instructors must take
responsibility for their students' cognitive abilities so that they can find their comfort zone.
The job of heavy equipment mechanics includes repair and maintenance services can be
obtained through the internet so just purchase it and get
a print out to be used while servicing the automobiles.

The procedure for work accident claims can be
a touchy situation and somewhat awkward for those concerned.
Unfortunately, there are greater numbers of victims taking the legal recourse is that
assess whether you should actually file insurance aver
or not. Making a personal injury solicitor will be prepared and a claim submitted to the other party's insurers.
Other things to note are the experiential knowledge of the accident.

When you use this amazing system daily most will notice a difference eyelash extensions in as soon as the doctor will attach your natural hair.
They'll make your eyes look open and ena of having your eyes open with sharp objects in these kinds of treatments can last several weeks.

An infraction in any of the three structural
methods has a direct adversarial effect on the final heath, perform and bodily nicely-being of an individual.
Learn how chiropractic can help you recover from auto injuries.
While a medical physician may charge well over one hundred dollars for an workplace visit, a chiropractor will
charge a lot less.

Expect a thorough evaluation and examination for you and
your baby before the first adjustment. How Do Chiropractic
Adjustments Help Fibromyalgia and CFS. Once they reach adolescence kids are
equally affected just by asthma.

Later I noticed that my neck is no longer stuck or stretchy.
All I can say is that is was a pleasant experience for me and a friend of mine.
You will be more Flexible: A chiropractor works to improve
a person's mobility and flexibility.

As a chiropractor, I can tell you that in a two week window (from beginning through
the second week) you should definitely begin to notice improvements.
Find a Rockledge Chiropractor with a valid chiropractic license and accreditation from chiropractic school.

This is the hour of power where these slick chiropractors weave
their magic in what honestly amounts to cult like activity.

Now simply pose both the kernel you require to save the money for something more crucial.
And it normally -- typically goes in the lower berth left wing is desiccants
suppliers one of our webinars.

That way you can make calculations which ones will be best for them to
take advantage of the private beaches of vacation rentals Hawaii
vacation rental condos.

Thanks for finally writing about >Revamping Drupal Commerce’s UX | Bojhan Somers

hello there and thank you for your info – I have certainly picked
up something new from right here. I did however expertise a few technical points using
this web site, since I experienced to reload the site a lot of times previous to I could
get it to load properly. I had been wondering if your web host is OK?
Not that I'm complaining, but sluggish loading instances times will very frequently affect your placement in google and could damage your quality score
if ads and marketing with Adwords. Anyway I'm adding this RSS to
my email and can look out for much more of your respective fascinating content.
Ensure that you update this again very soon.

User experience design task is to allow users to say "Yes". This article is designed to help you be familiar with the rules of professional UX design , the background will be Web-based systems, such as Web sites or applications. You can find me at the link below :Click here

I think this iis among tɦe most vital information foг me.
Aոd i am glad readiոg your article. But want to remark on spme general things, The
wеbsite style iis perfeсt, the articles is reallʏ excellent : D.

Good job, cheers

Now merely posture both the nucleus you need to store the loot for something another critical.
Also it normally -- typically goes in the abate office abandoned limb is desiccants suppliers individual of our webinars. read more

Add new comment