Madison Ave. Collective

Abstract

The original Brand Name Pencils website was developed way back in 2005 — the heyday of HTML tables and server-side includes. Back then, the iPhone was a mere twinkle in Steve Jobs’ eye and responsive websites were years away.

While BNP’s international fame and product inventory grew over time, the website’s underlying code became severely outdated. Security issues were exposed, and user experience suffered — especially on mobile devices. Eventually, page views also started to drop — as did revenue from product sales. This was happening, in large part, because Google was penalizing the site for not adhering to best practices in mobile optimization and security.

Erasing problems like these wasn’t going to be easy. Our big goals: modernize everything, recapture lost market share, and make it easier for our client to manage products and customer relationships.

Challenge

Visitors are drawn to Brand Name Pencils not only by the sheer volume of artifacts on display, but also by the care and attention given to what’s considered by most people an everyday, ordinary object.

But brandnamepencils.com is no ordinary online collection. It contains more than 7,000 unique pencils manufactured by 190+ companies in forty different countries. On top of this there are scores of lead hardness levels and pencil categories. Plus, some pencils are left-handed, while others are right-handed. The new database and page templates needed to be flexible enough to handle all of these known variables as well as other attributes yet to be defined.

Additional challenges included:

• How to migrate thousands of pages of content to the new system
• How to display wide, horizontally-shaped product images on narrow mobile screens
• How to retain visitor traffic during the transition, while Google indexes the new site

Goals

Our big-picture aim for the website was to modernize the underlying code and improve user experience. The end result, if all went as planned, would be increased sales and revenue for our client.

Specifically, we set out to:

• Streamline the buying process with an integrated shopping cart
• Rebuild the code from the ground up using modern HTML/CSS and best practices in website development and security
• Ensure a quality experience on mobile devices
• Develop robust search and filter functionality to make it easier for customers to find what they’re looking for
• Modernize the site’s overall look-and-feel
• Capture email addresses and produce a monthly newsletter
• Improve customer communications and product fulfillment: Automated emails, branded packing slips, inventory tracking, etc.

Results

The new website went live in January 2019, and user feedback has been overwhelmingly positive. From Sweden to Cyprus to Australia, orders ‘round the world started rolling in. Profit generated through the site immediately hit an all-time monthly high, and the website’s international appeal was back in full swing. In fact, Brand Name Pencils was one of a handful of websites worldwide to win a coveted 2020 Webby Award, as well as a 2020 W3 Gold Award.

We made it easy for our client to manage every aspect of the front- and back-end, from featuring products and adding new categories, to streamlining customer communications, tracking inventory, and shipping orders.

Because a significant number of visitors experience the website using a mobile phone, we also developed a custom feature to align pencils on either the left or the right, depending on which end of the pencil is imprinted.

From a security standpoint, not only was the old site not taking advantage of SSL, we discovered critical security headers were missing that could open the door to malicious activity. We also enabled URL redirects and a custom 404 page to ensure we didn’t lose customers while Google’s bots crawled the new site.

Since BNP 2.0 was launched, we have continued to help our client evaluate design decisions and fine-tune accordingly. This includes monitoring website analytics, screen recordings, and heatmaps for both desktop and mobile devices to learn about user behavior and potential roadblocks.