A direct and predictable approach has been the most common framework for product page design in eCommerce. As technology evolves and the space becomes cluttered, companies are taking risks to find their place and catch the attention of potential shoppers.
Some may argue these unique designs contain negative user experience elements and principles. “This isn’t above the fold” or “the buttons aren’t where you’d expect”. It’s true. But let’s put that aside for a second and appreciate how straight up awesome these are! Bad UX causes frustration, however it’s human nature that we’re attracted to visually engaging experiences. Creating exciting and technically advanced designs portrays legitimacy, builds the cool factor and encourages people to share your product. As companies bend the UX rules, we’ll eventually find a nice landing place between typical simplicity and outrageous fanciness. Here are some of my favourite rule breakers for your inspiration.
Satorisan is a shoe company that’s always impressing me with their ever-changing website experience. One day I visited the home page and it was a custom illustrated interactive map with different cities and sections based on the essence of their shoe designs. Their ability to present their brand in unique ways allow it to appear cutting edge and keep users coming back for more.
The product page does an excellent job of showcasing the quality of their products through use of full width photography. They let their images speak for themselves, unobstructed with lengthy descriptions. The ability to navigate through galleries and information by moving up/down/left/right gives the page an interactive element. The purchasing information is always available along the bottom without taking the spotlight from the product. Even their size and quantity selectors have a unique drag and drop experience. Adding an item to your cart is simple and executed with elegance. They’ve created an unusual experience which is still easy to navigate.
2. Hard Graft
Hard Graft is an Austrian company based out of London specializing in luxury leather accessories such as pouches, bags, and wallets.
Their product page is all about showcasing the premium materials and exquisite hand crafted techniques behind their items. A lot of customers still prefer the in-store shopping experience because they have the ability to physically touch and interact with products. When selling high-end items it’s imperative that your photography accurately portrays the materials and features so they can rest assured they are receiving quality.
Their beautiful responsive photography creates desire while displaying every nook and cranny. The cart actions sit centered at the top of the page overlaying the images while you scroll. Although there are some readability issues, it’s obvious it’s there and easily accessible.
Ditto sells designer eyewear and specializes in finding the perfect fit for every face. They’ve identified problems within their industry – how do customers choose the right glasses for their face shape? And how do they know they’ll fit properly without trying them on?
Ditto has created a patent-pending virtual try-on technology, which uses a computer webcam to create a video of shoppers wearing frames in 180-degree views. From there users can compare styles side by side, send videos to friends, and seek advice from Ditto stylists. This has positioned them as thought-leaders in the industry and helped bring a whole new demographic of shoppers who never would’ve considered buying glasses online. They even have a nice little 3-D slider on their product page allowing you to rotate the frames to see each angle. Simply put… it’s super rad.
4. Anyi Lu
Anyi Lu is a luxury brand marrying beauty and functionality in the world of women’s shoe design. The designs are modern mixed with old-world Italian construction.
The product page has a good balance of unique design intertwined with excellent user experience. The first image whimsically displays the shoes every angle. Below you see the ordering information in it’s most basic form. The most important facts are up front and presented in an easily digested fashion. The next set of images show above the fold prompting users to continue scrolling down for more details. One of my favourite things on this product page is the looping video which plays half-way down the page. It’s unobtrusive (no audio) and gives shoppers a great sense of how the shoe looks on. As you continue down the page you see more images, other colours available, materials, and links to similar products. An additional ordering section is displayed at the bottom in case it took some reading to sell you.
5. Made In Days
Made in Days sell strictly handcrafted goods making it a small online store with limited SKUs. They focus on doing one thing and doing it well. As such they are able to dedicate their site solely to promoting their leather wallet. Having one product opens doors for explorative design.
The Sharpshooter wallet product page leverages parallax to create a scrolling story. It begins by reiterating their products individualism and creating desire with lifestyle photography. It then explains the premium materials and techniques used which set it apart from their overly produced competitors. The verbiage they use is friendly and sophisticated, but still short in length to ensure customers can skim through it. The use of icons, simplistic photography, and a warm colour palette make this a welcoming, high-class experience. Although I find their push to purchase a little weak (a simple “I want one” button at the very bottom), I still think they do a great job translating who they are and what they’re about.
6. Greats Shoes
Greats designs and manufactures classically designed sneakers and sells them directly to customers. Born in Brooklyn, they focus on cutting out the middle man so their customers can have the quality they want at a fraction of the price. Currently they have 3 unique designs with several colour and material combinations.
The product page is simple in layout and classic in design. The shoes hang from their laces reminiscent of how you would store kicks in your locker. Like Ditto, Greats has the three-dimensional scroll effect allowing you to drag your mouse and see all angles of the shoe. It effectively shows customers the true shape and details. Purchasing information is high on the page and you can buy a product with little thought and few clicks. As you scroll there is a short write up about how the shoe came to be followed by more images and a feature breakdown. They show each individual piece of material used to build the shoes from the soles to the leather toe cap. It really gives the artisan essence. Next they have a slider of images showcasing their shoes with different outfits and finally an Instagram feed showing real people wearing their products.
Some of their products are labelled as “coming soon”. Instead of the standard product page there is a large board counting down the days, minutes, and seconds until their release. This creates hype around the item having limited availability or being in high demand. It also captures customers emails interested in early access. Greats gets my approval on bridging the creativity and user experience gap.
Fitbit combines technology and health by building wearable products that help motivate people to meet their fitness goals. This includes wristbands, activity trackers and intelligent scales. Currently they have four different products and sell memberships allowing users access to trainers, nutritionists and more.
The Fitbit product page explains the technology and benefits in a friendly and engaging way. The top of the page has a moving gridded slider full of lifestyle images, icons, and bright colours. The product is explained in an easily digestible fashion using tiered icon design, lifestyle photography, infographics, and application screenshots all enriched with bright colours. Each main headline has large succinct copy allowing visitors to quickly scroll through the page and understand what the item does at a glance.
V76 by Vaughn sells men’s grooming products for hair, shaving, face and body. They have a sophisticated and classic American approach.
The V76 product page uses texture and rich colours to portray their rugged brand identity. Since their brand does not rely on detailed product photography, they have focused on selling the lifestyle and experience of a V76 user. The page is split 50/50 always displaying the purchase necessities on the left while the right half is reserved for photography, video, and in depth details. High quality videos fill the screen when clicked with styling tips on how to use the product properly. It’s not just showing how to apply, but also giving a mini hair styling tutorial! It really gives the customer the full experience of how the product looks in someone’s hair. Below the video they have a style profile of a successful gentleman who uses that particular item. It really connects the product with a desired lifestyle in a relatable way.
9. Icon Jacket by Leather Monkeys
Leather Monkeys specialize in rare and high-end vintage leather jackets. They feature a variety of motorcycle and sheepskin aviation style jackets with the finest of quality and history.
Leather Monkeys periodically promote new jackets with a parallax feature page using a less traditional eCommerce layout. Although the jacket is still available through their website, this page leverages the powerful trigger of photography with the most simplistic buy options possible. As you scroll the page’s transitions and hover effects consume your shopping experience while providing excellent details into the quality of the jacket. It’s an intriguing notion that retailers could create one parallax feature page and switch in new products seasonally without too much overhead.
Lush makes a complete range of fresh handmade cosmetics including soaps, bath bombs, shampoos, fragrances, and specialty products. They use natural ingredients like fruits and vegetables and are charitable, environmentally friendly and against animal testing.
Their product pages are infused with content and personality. The top of the page features a fully responsive video of their products in use with a simplistic overlay allowing shoppers to quickly make a purchase. As you scroll down the page you are presented with all the reasons you should be proud to purchase their all-natural products. The full ingredient list is close to the top with beautiful images of their fresh ingredients linking you to the history and health benefits they carry. They’ve included blog content by use of a fully responsive image and simplistic title which ties into the customer profile of someone buying this item (“top tips for natural hair”). They use their review section to their advantage, prominently displaying their high volume, positive feedback. Users seeing an overwhelming amount of feedback instills integrity in your products and gives them confidence they are making a good purchase. Overall, they’ve successfully explained how the product works, listed all the ingredients in a visually pleasing way, told their brand story, and made it easy to buy.
Want to do this with your product page? Consider this!
1. Know Your Audience
It’s extremely important to know the demographic visiting your eCommerce site. The younger generation of shoppers are tech savvy and more willing to surf a new layout with intrigue and confidence. Shoppers who are less tech savvy would likely find these unconventional layouts frustrating when they’re just trying to make a purchase. You must ensure you aren’t alienating your typical customer.
Related: Design Conventions Are Not The Enemy
2. Know Your Product
Generally speaking, this approach is more effective for high end items and limited numbers of SKUs. These designs are rich in content and technically advanced in development, meaning adding new products is time consuming and expensive. Customers are less likely to need a complex experience when buying low-cost items. These layouts are not conducive to impulse purchases.
3. Prepare For Hiccups
Not all companies that take these atypical approaches are successful. The first hurdle will be designing and developing your idea flawlessly. Using unpredictable design means you’re putting UX second so you must ensure all the moving parts are working properly. It’s important to find the right balance and keep in mind that doing things differently has high potential to affect usability and conversion. Ideally you can A/B test variations of your layout until you find the right combination to impress shoppers and increase sales.