Case Study: Full Site Redesign and Stencil Move for PtouchDirect

BigCommerce Customizations To Sell Technical Products

PtouchDirect have been in the ecommerce business since the 90s, way back in the days of Geocities. They sell a very specific, technical product: refills for label makers. In fact, their business is so targeted that the majority of their sales are for refills for a single model of label maker, the Brother P-touch (hence, their name).

The team at PtouchDirect know a lot about ecommerce. They wanted to move their BigCommerce site to Stencil (the platform’s newest and best framework) and get a design upgrade in the process. We gave them a site upgrade that kept their branding intact while making it more modern, and added customizations that helped customers navigate through their highly technical product base.

“PtouchDirect have been in the ecommerce business since the 90s. They knew exactly what they needed and we were able to use our BigCommerce expertise to give it to them.” -Zak “Ziggy” Uzupis, developer

Mobile Friendly BigCommerce Redesign

When it came to the site redesign, PtouchDirect wanted to keep the recognizable aspects of their brand. This is a common request from many many of our clients with larger or well-established companies. They want their site to look more streamlined and modern but they don’t want to disrupt the brand they’ve spent years building or confuse their loyal customer base.

We recreated the site design with a few upgrades like a user-friendly menu and more calls-to-action. Another major focus of this redesign was making the site mobile-responsive. Like many of our clients, PtouchDirect was still using a separate mobile template. While this was once Google’s preferred way of serving mobile users, they now prefer responsive design: a single, flexible site that works on any device.

Microinteractions On Menu

One of the most serious design flaws on PtouchDirect’s old site was their menu. It was cramped, with small text that was difficult to read. A hard-to-use menu is a problem for any site but when your Products have highly technical names (for example, TZe Extra Strength Tapes, TZe Specialty Tapes, and TZe Standard Tapes are all Subcategories), things can get really confusing.

We designed a menu for PTouchDirect that was far more legible and interactive. In addition to bigger text and more space between elements, our developer added animations that appear when a user hovers over each menu item.

Animation and other “microinteractions” are a great way to make your site look more modern. Microinteractions can be anything from a colored overlay on a photo to the icon bounce when you “like” a piece of content on Facebook. In the case of PtouchDirect, not only did these animations make the menu look better, they also made it easier to read.

Menu microinteractions

Animations on the menu make it more user-friendly.

Mobile Responsive Product Specifications Table

Displaying information in table form is a staple for ecommerce sites that sell technical products. But not all product specification tables are created equally. They can be hard to read on smaller screens and they aren’t mobile-responsive by default.

PtouchDirect had a number of spec tables on their site, including one on their homepage that shows which of their Products are compatible with the most common type of label maker (the P-touch by Brother). The table is really important: it leads customers directly to the Products they’re looking for and is responsible for a lot of the site’s conversions.

However, on the previous version of the site, the compatibility table didn’t look great on mobile. Our developer spent a long time making it mobile friendly. Instead of shrinking the whole table to a smaller size as the screen gets smaller – the default behavior for a responsive table – the table becomes scrollable on mobile. This ensures that the text remains legible, no matter what device it’s viewed on.

Mobile-Friendly table

Ptouch’s compatibility table looks great on any device.

“The responsive aspects of this site are what I’m most proud of, particularly that specifications table. The user is able to easily read and use it on mobile without having to pinch to zoom in.” -Zak “Ziggy” Uzupis, Developer

Shop By Model Dropdowns On Subcategory Page

PtouchDirect understood something important about their users: most of them come to the site with either the model name and number of their label maker or of the label refill. Letting them find relevant Products by model was therefore a crucial aspect of their user experience.

To meet this need, PtouchDirect’s site has dropdown menus for the various models on each of its Subcategory pages. So if a user knows they have a certain model of Brother printer or that they need a refill of a certain kind of Brother tape, they can easily find the relevant products. This feature was on both the old and new versions of the site and worked very well for them.

Dropdown Menus on Category

Customers can use dropdowns to find what Products work for them.

Since the dropdowns aren’t the typical or expected form of navigation, we also provided a more traditional navigation feature. We put a row of more conventional calls-to-action right below the dropdowns so that users who are looking for something more general can make their way through the site. This feature shows how, if you do it smartly, you can blend merchandising techniques to great success.

PtouchDirect CTA

The category pages also have more conventional CTAs

Add All Items To Cart At Category Level

PtouchDirect also has our Quantity/Add All To Cart At Category Level customization. This add-on lets customers add multiple Products to the cart at once without navigating away for the Category or Subcategory page. It’s great for bulk ordering, or, in the case of Ptouch, letting regular customers reorder.

Quantity/Add All To Cart On PtouchDirect

Customers can easily add items to the Cart from the Subcategory Page

Click here to check out Quantity/Add All to Cart At Category Level on the BigCommerce app store!

Even More BigCommerce Customizations

  • One Page Checkout
  • Free downloadable PDFs with email capture
  • Nextopia Search Bar Integration
  • Yotpo Integration

Get A Custom BigCommerce Website From The Experts

PtouchDirect are a decades-old, well-established company who knew exactly what they wanted. By partnering with IntuitSolutions, a development agency who are experts on their platform of choice, they were able to get the functionality they want on BigCommerce.

Have you been in business for a long time and need to find a developer who can work with – not against – your business practices? If you’re ready for a custom BigCommerce site from developers who can actually give you the items on your wishlist, then call us today!

Internal Resources and Marketing Specialist

Emma studied English in college, then later discovered the world of technology through her work in nonprofit marketing and communications. Inspired by the power of the web, she began teaching herself to code. She brings those skills, plus a background in content creation and an interest in human-centered design, to a role where she seeks elegant digital solutions to problems of all sorts. In a former life, Emma taught ESL and worked as a freelance writer on a variety of projects ranging from natural health newsletters to poli-sci textbooks.