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
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
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
, 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
for store owners, but an owner considering more advanced features may want
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.