How Pencil by 53 Nails Site Navigation

The brilliance of e-commerce platforms like Shopify is that store owners with little (or no) web development or design experience are able to display their products on a clean, easy-to-navigate platform. But just because we don’t have to go the extra mile for our product pages doesn’t mean we shouldn’t. After all, the difference between “good” and “great” makes the difference between languishing in obscurity and being an award-winning press darling. Not to mention the appeal of a memorable site to a repeat customer.

So today we’re going to focus on a store that wins at site navigation. Pencil by 53 shows off a sleek and stylish product not only through excellent product photography and descriptions, but also via a unique, product-focused design.

53 isn’t new at sales; their design-award-winning app, Paper, has been available for the iPad since 2012. But the Pencil (or is it just “Pencil”?) is 53’s first foray into hardware. Pencil is an iPad stylus, specifically designed to accompany the Paper app. Described as “the most natural and expressive way to create on iPad,” the product costs $49.95 or $59.95 (for a slightly “heftier” model).

So how does Pencil’s site deliver an optimal experience, navigating us from page-loaded to product-purchased? Here are some of our favorite learnings from 53’s designs:

Design Navigation With A Target Audience In Mind

Pencil’s navigation style creates distinct “pages” as one scrolls down the site’s homepage, instead of requiring the user to click. One-page websites have been a growing trend over the past couple of years, and Pencil pulls it off well.

Scrolling down on the site, we flow through the following “pages”:

  • A “buy now” option
  • A thorough description of Pencil’s features, each about a page in depth
  • A breakdown of the tool’s insides (more on this later)
  • Product options (would you like the $49 model or the $59 model?)
  • Apps Pencil works with
  • Press clippings (Wired & Fast Company, among others)
  • Another “purchase now” ask

Yes, one-page sites are “in” right now, and that’s exactly the point. Pencil is a product for artists and creators, an audience that would most appreciate a sleek and modern site navigation. Even the video appears as a lightbox, instead of loading a separate page.

A single scroll page may not be optimal for a brand that sells more than one or two types products. (Can you imagine scrolling through a few hundred unsorted men’s, women’s and children’s clothing designs on a single page?) But our learning here isn’t “good site navigation must have a single page scroll design.” Rather, our lesson is that it’s important to factor in our target customer when developing site navigation, just as we consider them with copy and graphics.

Pencil uses an in-vogue design to appeal to designers. Other sites with different target customers may apply this principle by creating a more interactive navigation for a gamer audience, or by showing off photos of products “in the wild” to accentuate a lifestyle brand.

For another example of navigation designed for its audience, take a look at PureFix, which has a few dozen pages on its Shopify site, but manages to deliver a smooth, clean ride through its line of bicycles and incorporate a large header image of the product in its ideal environment. And check out Whipping Post , which manages to make totes and duffel bags as manly as camping and off-roading, by literally surrounding its products with branded images and video.

Know When to (And When Not to) Ask for the Purchase

Scrolling through Pencil’s page, I was surprised to see how infrequently “buy now” buttons appear. In a less-sleek version of this page, I can imagine conversion asks at every step. But this site only asks twice, and as a potential customer, I appreciated the light touch. (As a marketer, of course, I wondered if they’d A/B tested this approach).

On the one hand, the businessperson in us wants to capture every purchase impulse possible. But we also want our consumers to be educated enough about our product that they won’t back on out on the payment page.

Pencil’s “buy now” ask at the top is intended for repeat visitors—those who’ve already perused the site and are coming back with intent to buy. For new visitors, or for those who are still considering, 53 offers product features, press links and even support videos before a 2nd “buy now” button. 53 demonstrates a certain trust in their product, and in the site itself, by not offering a purchase button before the very bottom of the page.

Pencil’s minimal conversion points show us that well-planned shop navigation can confidently guide customers through the product before asking them to take out their credit cards.

Show Off Your Insides

The sales page shows us Pencil’s guts. Literally.

As we scroll down, the pencil unwraps into its formative pieces, each accompanied by copy that highlights its makeup and quality.

This is one of Pencil’s best site features, and turns its one-page scroll design from an interesting quirk to a utilitarian quality. It’s cool, well designed and informative, and it fits right in to the site navigation.

Our takeaway: navigating potential customers through a product’s “guts” can be a great strategy for showing off features in an authentic way. Small online businesses already benefit from artisan beginnings. They say, "Our products are often more expensive compared with store-bought competitors, but they’re well-made by a caring craftsperson." We can take a page from Pencil’s notebook and expand on this advantage, not only on a separate “about” page, but as an intrinsic product feature.

Use A Brand-Consistent Navigation

This is a quick note, as it’s more of a branding tip than a specific navigation tactic, but 53 also does an amazing job of developing a consistent navigation across all of its brand pages. From their hardware (Pencil) to their physical product (Book) to their app (Paper) to their social platform (Mix), 53 uses a consistent one-page scroll navigation, with across-the-board branding, fonts, etc.

Lesson here: whether we’re developing a blog, multiple Shopify sites, or another distinct branch of our brand’s online presence, keeping navigation consistent across platforms develops a cohesive presence for visitors and repeat customers.

For further reading on this technique, check out this blog post on the branding power of creating patterns.

Conclusion: Navigate To Sell A Product, And A Lifestyle

The underlying factor behind Pencil’s site navigation is 53’s consistent dedication to the lifestyle behind its product. From the one-page design, through its detailed demonstration of the product’s “guts,” Pencil’s site is a demonstration of the projects this stylus can inspire.

Keep in mind that advanced navigation development isn’t easy. Shopify offers excellent tutorials for store owners, but an owner considering more advanced features may want to consider hiring a developer. No matter what your design investment, understanding the successes of shops like 53 can provide inspiration for site navigation that will make your product shine.