The McCall Pattern Company Drupal Commerce Implementation

Drupal consulting and development services to redesign and launch six e-commerce websites using Drupal with Drupal Commerce.

Drupal Commerce Pattern Sites
Drupal Commerce Responsive Design
Drupal Commerce Product Quick View
Drupal Commerce Shopping Bag
Drupal Commerce Product Details
Drupal Commerce Responsive Design

The McCall Pattern Company. Inc. (McCall), a subsidiary of CSS Industries, Inc., is a worldwide company that designs, manufactures, and sells sewing patterns under the brand names of Butterick, Kwik Sew, McCall's, and Vogue Patterns, through fabric retailers and on the company's websites. McCall also publishes a consumer magazine, Vogue Patterns Magazine and sells wall decor products such as peel-and-stick vinyl wall decals, chalkboards, and more for home decorating and crafting through the company's two home decor brands, Wallies and Wallcandy Arts.

Highlights

  • Shared shopping bag across four patterns brands with a single page checkout (Drupal Commerce)
  • Stock management and back-in-stock notification
  • Custom pricing, taxes, checkout and shipping rules
  • Responsive design with various breakpoints to adapt to any screen size and any type of device
  • Club membership, discounts, subscriptions and product bundles including coupons
  • Recommended and recently viewed products blocks for personalized shopping experience
  • Welcome splash with coupon code
  • Quick view as a lightbox to show abbreviated view of product information
  • Product Wishlist
  • Newsletter signup
  • Integration with order entry and inventory back office systems

Services Provided 

  • Project Management
  • Solution Requirements Definition and Wireframes
  • System Architecture Design
  • Premium Visual Design Services
  • Custom theme development for 6 sites
  • Multi-site Drupal implementation with Drupal Commerce
  • Bi-directional integration with back office systems
  • Content Migration
  • Training
  • Support and maintenance

 

McCall envisioned a modern and interactive web experience to better engage the company's loyal shoppers, generate new customers, and ultimately increase online revenue. The current web platform was limited with regards to page layouts and design elements that often required development resources for simple changes. Though the platform got the job done, page loads were slow especially during peak times when big sales and promotions were in place. In addition, the look & feel did not appeal to the younger audience that the company was looking to reach. McCall sought a partner to implement a new e-commerce web content management system as a replacement for its current web platform. The company was looking to redesign each brand's web presence while providing content creators with web-based tools to administer the sites and create or update content and pages without development or coding experience.

TrazerEdge implemented the Drupal web content management system with Drupal Commerce, sponsored and maintained by Commerce Guys, to meet the needs for new e-commerce web platform.

To kickoff the engagement, our team met with McCall stakeholders to define requirements and wireframes for both the pattern and wall decor sites. Then, we worked collaboratively with McCall stakeholders to turn the wireframes into visual designs unique to each brand. Once the annotated wireframes and the visual design comps were accepted by McCall, we developed technical specifications and then implemented Drupal 7 with Drupal Commerce as the underlying web content management system and store for the new multi-domain e-commerce web platform.

Following front end development best practices, our front end development team translated the visual design into a base theme for the sites and then created sub-themes for each brand. By creating a base or common template, changes made to one theme can be applied to all the themes which provides consistency while simplifying development and maintenance. The responsive design was implemented such that all icons, logos, and images render crisp and sharp regardless of screen size or pixel density and the various breakpoints allow the website to adapt to any screen size providing a consistent user experience across devices. 

TrazerEdge Acquia-certified site builders and developers installed and configured Drupal 7 along with Drupal Commerce. Our team selected and configured a variety of available Drupal Commerce modules to meet McCall requirements for products and attributes, pricing, discounts and coupons, preferred member licenses, wishlist, stock management, shared shopping bag, line items, orders, shipping, tax, checkout, invoices, notifications, and payments including credit card, PayPal, and check. Drupal Commerce easily supported the various product types, such as patterns, books, products, catalogs, subscriptions, each with its own attributes, pricing and shipping rules, and a product-specific display. The four pattern websites share a single shopping cart and checkout process, so devoted sewers can shop from all four brands at one time. Commerce Feeds and Feeds modules were configured to import data from the old CMS into Drupal to create the sewing pattern, sewing product, sewing book products and wall decor products in the new Drupal Commerce store. McCall staff can continue to use the feeds importers to load new products in bulk with each new season.

To help McCall showcase products throughout the websites, we configured a combination of dependable and trusted Drupal contrib modules, such as Panels, Fieldable Panel Panes, Royal Slider, and Owl Carousel, to provide McCall with flexible page layouts and reusable elements. ImageCache along with ImageMagick was utilized to provide the high quality images for the various product image displays throughout the website so that McCall staff no longer needed to manually create multiple sizes of each product image. In addition, we implemented an expanded main navigation menu site-wide that helps improve the shopping experience. 

For improved site-wide search performance and to support the McCall multi-level taxonomy for product categorization, browsing and filtering, we integrated Drupal with the Apache Solr search platform using the Solr Search API module. The site search allows shoppers to refine their search results with facets based on taxonomy terms such as category, brand, designer, collection and size. When a shopper runs a search or browses to a category page, such as misses dresses, they can view product thumbnails in small or large sizes and they can see the price along with any promotions under each thumbnail view. For even more information, they can open a simplified view of the product using quick view, or click to view the full product details.

To help sewing enthusiasts with purchase decisions, the product details pages include a photo gallery with zoom and full screen options, price and size information, links to size charts, and the option to either add the product to the shopping bag or wishlist. They can also view more information such as lineart and yardage tables organized in a tabbed area on the same page. Shoppers can quickly share a product by email or Pinterest and then quickly navigate back to other products they looked at from the recently viewed block.

Using Drupal Commerce stock management modules, shoppers have the opportunity to request notification when the size of a product they are looking for is out of stock. When the inventory is replenished through integration with the McCall inventory management process, the shopper receives an email alert that the item they were looking for is now available. Registered users can create personal profiles, save billing and shipping addresses, and view their orders online. With Drupal Commerce wishlist, shoppers can save an item for later either from the product page or directly from their shopping bag. Then from the wishlist, they can move the product directly to their bag when they are ready to purchase. Our team configured a selection of promotions for McCall using Drupal Commerce discount and Drupal Commerce coupon modules so that McCall marketing could continue with their regular fixed price and percentage off sales that the company offers to its new and repeat shoppers. To support some of the intricacies of the McCall promotional offers, we also contributed several enhancements to the Commerce Discount Extra module.

When a customer is finished shopping, they can view their shopping bag to adjust quantities and estimate tax and shipping. They can then proceed to checkout, where they have the option to continue as a guest or sign-in as an existing customer to access saved billing and shipping address information. For the final checkout step, a collection of Drupal Commerce payment modules allows customers to submit payment through credit card, PayPal, or check. Once the customer receives a confirmation email, they can view the status of their order online by viewing the order history available under their account menu.

"They did a great job documenting the project and managing a diverse group of stakeholders," said Ryan Szrama, CEO, Commerce Guys. "They helpfully incorporated user experience design from the beginning, using wireframes as a visual guide for us to discuss requirements with the client and surface their hidden expectations for how an eCommerce site should function. Ultimately, they architected a very complex multi-site store with some of the most advanced merchandising features I've seen in any Drupal Commerce project. My team was able to deliver some key improvements to Drupal Commerce alongside them through this project, and we were excited to see it go live and perform well at scale."

The new patterns sites we launched in March of 2016. Through the redesigned websites, McCall can provide a more engaging and dynamic e-commerce experience for the sewing community. Each brand's unique and visually pleasing look & feel immediately engages the customer on any device while the intuitive navigation and expanded search gives customers quick access to the products they are looking for. The Drupal CMS provides McCall staff with the tools needed to run promotions and engage site visitors with eye-catching product previews. 

TrazerEdge continued to support the implementation of Drupal through 2019 and worked together with Commerce Guys to further extend features important to McCall such buy one get one and free shipping promotions and also helped launch two new Drupal Commerce websites for its wall decor brands, Wallies and Wallcandy Arts.