Celebrating exceptional ecommerce design

In March 2016, over 1,000 people landed in San Francisco for the inaugural Shopify Partner conference: Unite. With theme designers, app developers, agency owners, and over 100 “Shopifolk” in attendance, the conference discussed everything from the history of Shopify to how virtual reality will influence the buying experience in years to come.

Despite all the excitement, one strong theme emerged from the conference: designers have a huge role to play in creating the overall customer experience of an online store. Whether it’s purchasing online or buying in-store via a point of sale system, the manner in which a merchant represents themselves, and the experience their customers have while buying, is one of the key differentiators in our digital age.

From the visual aesthetic and branding of a store, to the copy used on product detail pages, to the tone of voice in email notifications, designers play a key role in the success of online retailers.

Exceptional design

During his Unite talk, “Exceptional Ecommerce Design,” Shopify Product Manager Kevin Ochal highlighted how even large, well-respected brands still produce ecommerce sites that have inconsistent user experiences for their online customers.

Some examples include:

• Multiple navigation patterns
• Section opening in new windows
• Each section having an entirely different “look and feel”
• Random overlays that obscure the content

Each of these add to a feeling of inconsistency, which can lead to frustration and confusion. The key takeaway: Don’t make it hard for your customers to give you money.

Setting context

One of the main issues with online stores is that the customer has no way of “feeling” the product—there’s simply no substitute for being in a store and seeing a product for yourself. That said, there’s plenty of ways in which designers can use technologies at their disposal to give a close approximation of the real thing.

3D renderings are now common on many online stores, and clever use of video and photography can help the buyer understand more about the product. The more they understand, the more likely they are to have trust in the product they are ordering. Even simply showing someone carrying a bag can help put the product into context.

Bellroy uses this technique to showcase their wallet range. By placing the items typically found in the wallet, they not only show how much you can fit in it, but also the size of the wallet. As most of us are familiar with a standard credit card shape and size, it’s easy to imagine how big the wallet will be in person.

While this is a simple example, designers can use their animation, video, and photography skills to really enhance the way products are displayed in ecommerce stores. We all know that great product photography is essential to help sell products, but there’s plenty of room for designers to use their creative skills to showcase products in new and innovative ways.

Of course, consistency doesn’t have to mean uninspiring design. In his talk, Kevin also highlighted how simple touches can delight customers and endear them to a brand.

Delighters

One great example is Great George Watches. Navigate to a collection page and you’ll notice that each watch displays the current local time, complete with ticking second hand. It’s a simple yet clever touch. These “delighters” go a long way in engaging with customers.

Store designers are also making great use of modern frontend technologies. For example, Berlin-based furniture and accessories retailer Nuts and Woods make clever use of hover effects. As you mouseover an item in their dropdown menu, the hero image changes accordingly. Of course, you can still click on the product detail page, but this nice touch allows you to quickly view their offerings in a seamless way.

Slipper brand Mahabis makes use of embedded video—albeit rather subtly. Visit their homepage, scroll past the main hero image, and after a short pause you’ll notice the slipper in the center of the page assemble. This 2-second video highlights the essence of the product both cleverly and directly.

Other online store designers are also making playful use of techniques many of us stopped using in the early 2000s. These Are Things is an Ohio-based company making wearable accessories and paper goods. Their site features both a scrolling marquee and stardust that follows your mouse movements around the screen. It’s another small playful touch that matches up perfectly with their brand.

Tone of voice

Copy is another vital ingredient for any online store, and it can be an important differentiator in the busy world of ecommerce. Good copy might get you a sale. Great copy gets you loyal customers.

An example of great copywriting can be found on the Chubbies site. Chubbies is an American shorts brand, and all of their copy is written in a friendly, cheeky way. 

Here’s how they describe themselves on their about page, which they renamed to “the manifesto”:

To us, pants are a necessary evil—built for the work week because your boss just doesn’t get it. You see a Chubster in pants or cargo shorts and he looks like a fish out of water; a radical fish that’s probably krumping on the beach, but nonetheless OUT OF WATER. But this exact passion for shorts is why Chubbies are so righteous. We don’t do pants. We don’t do cargos. We don’t do capris. We do shorts and only shorts. We have put painstaking effort into these shorts. We have engineered them for the toughest shorts critics—ourselves.

Words like “righteous,” “radical,” and “krumping” give the Chubbies brand a distinct personality—you can almost picture a laid-back surfer dude (wearing Chubbies shorts, of course) speaking these words himself. This kind of copywriting humanizes the brand and makes Chubbies seem like your best bud, rather than just another online retailer.

Another nice touch is the copy used on their customer service page. In place of the standard “customer service,” they have “chubstomer service.” And customer service representatives? They’re called “chubstomer service gods.”

Of course, this approach wouldn’t work for every store, but the people behind Chubbies clearly know their brand and their audience, and they cater to it accordingly.

Commerce everywhere

Another key theme to emerge was how the modern commerce experience stretches beyond digital to real-world settings. As much as we think of them separately, today’s brick-and-mortar stores work hand-in-hand with their online experience.

One example of this is adventurer brand Poler Stuff. They “make stuff for the roamers and seekers, gear that is both fun and functional and suited for everyday use in the city as well as your next trip into the wild.” (This is another great example of how copy adds personality to a store.)

When you’re browsing their site, you get a sense of what Poler Stuff is all about, but you also get a hint about what their brick-and-mortar store looks like. Their online store beautifully mimics the immersive and friendly feel of their offline offering.

As more “online-first” brands venture into pop-ups and permanent stores, web designers have a responsibility to bridge experiences and help retailers succeed.

Let’s be exceptional

As you might have imagined, we’re hugely passionate about design at Shopify—so much so that we even produced a t-shirt to tell the world that “design is at the heart of everything we do.”

Our love of design is also the reason we started the Ecommerce Design Awards. Each year, we celebrate exceptional ecommerce design and offer the winners a unique experience as a reward. We want to recognize the visionaries who are taking ecommerce design to new heights and redefining the way people sell and buy.

If you’ve built an original design for a Shopify store, this is your chance to win your way to New York City. We’ve teamed up with InVision and net magazine to offer a bigger-than-ever grand prize to 4 winners: a 2-day, all-expenses-paid trip to NYC to receive hands-on creative mentorship from industry-leading experts.

More ways to win

Winners will be selected based on the overall aesthetics, creativity, and usability of the site. Four grand prizes will be awarded to:

• The best overall ecommerce site
• The best homepage
• The best product page
• The best responsive site / mobile experience

We’ll also choose 10 honorable mentions to feature on the Shopify Web Design and Development Blog—which is also where you can find out all the details of how to enter. We can’t wait to see what you come up with in 2016, and we look forward to spending time with the winners in New York.