DPCI helped The McCall Pattern Company (now CSS Industries, Inc.) launch six redesigned e-commerce sites using Drupal Commerce. Through the responsive design, McCall can provide a more engaging and dynamic experience for its shoppers. 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.
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.
- Shared shopping bag across four patterns brands with a single page checkout
- 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
- Discounts, subscriptions and product bundles including coupons
- Club membership for special pricing
- Recommended and recently viewed products blocks to offer a more 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
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.
McCall worked with DPCI previously to facilitate the launch of Vogue Patterns Magazine digital edition using the Baker Framework. That project had been viewed a great success so McCall management considered DPCI for the e-commerce project. DPCI proposed 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 DPCI met with McCall stakeholders to define wireframes and solution requirements for both the pattern and wall decor sites. Then, DPCI 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, DPCI 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, DPCI 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.
While DPCI's front end team was working on the responsive site themes, DPCI site builders and developers installed and configured Drupal 7 along with Drupal Commerce. DPCI 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. With Drupal Commerce, DPCI was able to configure various product types, such as patterns, books, products, catalogs, subscriptions, and have each product type have its own attributes, pricing and shipping rules, along with 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. To create the sewing pattern, sewing product, sewing book products and wall decor products in the new Drupal Commerce store, DPCI configured the Commerce Feeds and Feeds modules to import data from the old CMS into Drupal. 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, DPCI 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. DPCI utilized ImageCache along with ImageMagick 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, DPCI 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, DPCI 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 DPCI's 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. DPCI 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, DPCI 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, DPCI configured a collection of Drupal Commerce payment modules to allow 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.
"DPCI 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, DPCI 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."
With DPCI’s help, McCall launched the new patterns sites in March of 2016. Through the redesigned website, 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.
DPCI continues to support the McCall implementation of Drupal, has worked together with Commerce Guys to further extend features important to McCall such buy one get one and free shipping promotions and has recently helped launch two new Drupal Commerce websites for its wall decor brands, Wallies and Wallcandy Arts. In addition, DPCI will help McCall to enable the subsidiary offices in the UK and Australia to utilize the new platform. Those offices will have an instance of the platform that is based off of the US system, but provides foreign offices with options to modify the home pages, support other currencies and pricing, fulfill orders locally, and create foreign market specific sales and promotions.
"McCall’s existing ecommerce sites were unable to keep up with the demands of our business or the needs of our customers," said Jim Kingsepp, SVP, Technical Business Development, The McCall Pattern Company, Inc. "We could not offer the promotions or sales we needed to grow our business and, because our sites were not responsive, we were losing more and more smart phone and tablet customers each year. We turned to DPCI to help. Custom Drupal themes with a responsive design allowed us to maintain the identity of our four separate brands while a single backend meant that our web team did not have quadruple the work. We have since added our wall décor line to our family of ecommerce sites and we are happy to continue our partnership with DPCI with plans to leverage their work to markets beyond the US."