Most Popular Reads

In 2016, successful online brands will need to properly execute on a multi-channel strategy in order to remain top of mind for consumers. We call the need-to-do list “table stakes” over here at Bigcommerce. These are the things that your brand must do in order to be competitive or simply to maintain the customer awareness and conversion you’ve already built.

In 2016, Bigcommerce will be adding even more channels through which you’ll be able to reach and engage with your customers. We will also be investing in world-class themes to ensure your online storefront is as impactful and successful as possible. After all, while a multi-channel strategy is necessary, so is the need to drive customers to your own site for checkout. Doing so allows you to own the customer experience, from browse to purchase, to delivery and long-term engagement.

One of the ways we‘re doing this is by partnering with Pixel Union, an ecommerce design firm that has powered the design for tens of thousands of online stores. This is the team who built Tumblr’s most-loved templates in the late 2000’s, when Tumblr’s site design was second to none. These are the same folks who created some of the most successful WordPress templates on that marketplace –– a highly competitive arena. Among their list of clients is the MoMa, Tesla, The Tonight Show, The White House and the BBC.

In the second part of this series, I sit down with Luke Seeley, Creative Director over at Pixel Union, to get his insight into ecommerce site design, current best practices and which brands are successfully implementing innovative industry trends.

Luke, to begin, can you give the audience a bit of background on your work?

Sure. I got into web design back in 2006 or 2007. I was studying computer science in university when I met Andrew Wilkinson, the founder of MetaLab. I started freelancing with him and was the first employee.

Pixel Union came out of Metalab as well. We started with a service called Tumblize, which was supposed to be custom Tumblr theme designs for $1,000. You’d get to pick a designer and they’d make this custom design for you and…it completely flopped.

So, we ended up designing a Tumblr theme anyway. It was a big success and helped us network and get a lot of clients who wanted custom Tumblr themes. Soon, Pixel Union became its own department within MetaLab, and eventually it broke off to become its own company.

I met Ben Moore, Pixel Union’s current CEO, years ago when he joined MetaLab. He left to found his own agency, but we kept in touch. After I left MetaLab, and he had taken over as CEO of Pixel Union, he reached out to me about coming on as Creative Director, which I quickly accepted.

Thanks for the background! Cory spoke last week about the importance of knowing your audience and target market before designing an ecommerce site. Can you speak to that a bit, too?

You bet. I think Cory described it as the difference between a Walmart-like site and a boutique site. With a Walmart-like site, people are looking to browse and see lots of items at once. They want to see prices right away and compare products with other, similar items. They’re looking for deals, and they’re looking for suggestions for items that are related or complementary. All of those advanced search, discovery and promotional site features are really important with those particular audiences.

For the boutique sites, though, like Cory said, it’s more of a curated gallery experience. A merchant might have a more limited product offering, and possibly a higher price point, so the presentation needs to be changed to support that, while still offering a great experience. As a customer, you’re not as likely to compare different items in a boutique store—you’re there to buy a single item or browse a more curated collection. You’re drawn to big, beautiful images. That’s what you want from those boutique sites. It’s a much different experience. And the same goes for other segments and audiences: different customer expectations require different user experiences.

How does that logic play into how someone at Pixel Union would design a site?

Any time we design a new site or theme, we start with a brief that clearly outlines which merchant segments that theme is being built for, what their target audiences are, and what considerations should be made to make sure there’s a good fit. That brief lives with the theme through our design, development, and QA process, so there’s always something the team can reference to answer “why” we’re making a particular choice.

So for example, if a designer knows they’re designing for businesses with large catalogues of, say, electronics, they know that focusing on large, full-cover imagery isn’t going to work. Merchants likely won’t have the right visual materials to support it, and customers want to be able to scan large numbers of products as quickly as possible to find the particular item they’re looking for.

If the theme is a higher-end merchant, something like a limited-run furniture designer, the considerations are completely different. In that case, a more gallery-like experience would do a better job of conveying that high-end feel, a more unique UX it would match the price point better, and the merchants are more likely to have well produced product imagery to support larger feature images.

We try to make any theme as flexible as possible — many different merchants in totally different industries will often use a single theme, just set up a bit differently. But having those target markets or audiences in mind helps us narrow the focus a bit for the design process so we know we’re making the right choices for the right reasons.

How do you think through the difference between a homepage and a product page?

Home and product pages have different goals. Homepages need to showcase the store’s brand and best products, and display any timely promotions. Product pages need to make very clear what the product is, why it’s worth buying, and how to buy it now; product pages need to be more functional than visual or aspirational. Their job is to give the right information and reduce friction so the customer hits the call to action.

And what design elements truly drive that “buy it now” conversion?

There are a lot of table stakes that drive that conversion, from the overall design of the site (placement of pricing, product information, calls-to-action) to incentives and marketing like free shipping, promotions and email newsletters. All of that plays a part in driving customer behavior.

A big thing that also helps is great product photography. I think for the most part, major brands are doing a good job of having high-quality photography that shows off products—and not just products on a white background, but products in a lifestyle situation. But we sometimes see smaller or mid-market shops neglecting that when it comes to their marketing. It’s one of the first things we recommend with our clients when we’re designing a custom theme: invest in a great product photographer and do it right.

Another thing is any kind of media that puts your product in context. Things like product videos, behind-the-scenes documentaries that promote your brand identity, and the lifestyle you want associated with what you’re selling. We see a lot of video being used on fashion sites, for example. Cycling through the product images, the final image will be a video of the model standing and rotating slowly. This gives you a sense of angles and how the clothing hangs off the body.

Things like that may not be table stakes right now, but we’re getting closer and closer as the technologies become more ubiquitous. I think the difficult part isn’t the technology—it’s the set, the lighting, the model — all that production takes a lot more work than just snapping photos. But businesses are realizing it’s a good investment, so we’re seeing more of it.

Are there any particular sites you think are doing all of this really well right now?

I think Warby Parker does a great job. The design is appealing, they use big, beautiful product photography, they’ve got smart browsing features, and they use some of that interactive context I was talking about. There’s a feature where you can move your cursor left and right over the image and the model moves their head to show you what the glasses look like at different angles. It’s a little gimmicky, but it’s helpful, and it keeps the customer interested longer.

There’s also an Amazon storefront called Canopy that I really like. You load the page and then there’s just a feed of cards. It’s similar to Pinterest in that sense. You can easily browse with infinite scrolling, and the storefront has search and filters to make that a bit more manageable. It definitely wouldn’t work for every merchant, but overall, the experience is just so nice.

Next in the series, we’ll be chatting with Ben Moore, CEO of Pixel Union. Stay tuned, and in the meantime, feel free to comment with questions, concerns and ideas below.

Leave a Comment
  • Paul Hackett

    Thanks for sharing your story! Love your insights, an agree that the site should be a direct reflection of the customers you want. And yes – flexibility is key because markets change and customer behaviors/likes/dislikes evolve. You focus a ton on design and designing for your audience, what tools do you use to track actual behaviors? It may be interesting to see which pages customers actually engage with, which they convert on and how long they stay on each page. Then you could create a trigger email (like this based on those page views or activity to engage them across multiple channels. What do you think?

Less Development. More Marketing.

Let us future-proof your backend. You focus on building your brand.