A Case Study in Four 1Digital Agency eCommerce Redesigns
When laying out a modern eCommerce custom design, our experienced eCommerce designers take their cues on how to build a homepage from tribes of prehistoric hunter-gathers. Well… kind of. In 1999, two anthropologists by the name of Pirolli and Card developed the Information Foraging Theory while working for the PARC research and development center in Palo Alto, California. They proposed that web user behavior is not so dissimilar from the strategies adopted by our ancestors when hunting for food. Our brains are sensitized to our intentions, meaning that our perception is skewed to identify information related to our goals and filter out the information that does not pertain to those goals. In this way, it can be said that the user on your website is foraging for the information related to the product that they already want to purchase. They are using the same information gathering tactics that their ancient ancestor might have developed to forage for the species of berries which wouldn’t poison them.
Think about walking into a crowded bar to meet a friend who is already there. You know what your friend looks like. He is male, tall, skinny, wearing glasses and has dark hair. As you scan the crowd, you are already unconsciously discounting everyone your eyes pass over that does not have those characteristics, and focusing in on everyone who does, to check them further. This process of selection is Information Foraging. Your brain is automatically zeroing in on a few options out of many based on what you know your intention is.
It’s our goal, as eCommerce designers, to give every store, no matter the industry, a strong Information Scent. Information scent describes a clear path of cues within the design elements that signal to the user that they are moving closer to their goal. In this case study, I’ll use four examples of 1Digital’s eCommerce custom redesigns to illustrate the two major types of eCommerce design, Product Heavy Design and Experience Heavy Design, how each of these types of sites should be laid out, and how information scent is used in both categories to create highly effective eCommerce custom design.
Product Heavy Design
Product heavy design is used when the client is a volume business. These companies are often B2B or sell to a consumer market which is price conscious and not brand sensitive. These are usually items which can be bought from any number of retailers and the customer will make their decision quickly because there is little disparity between what different retailers are offering. Customers shopping on a product heavy sites are not browsing. They usually know exactly what they are looking for and want the site to make that item easy to get. The goal of a product heavy design is to provide a very clear information scent that leads from category, to product, to cart with as few intermediate steps as possible.
Office Replacement Parts
Office Replacement Parts is a mostly B2B dealer of parts for office furniture. Their target audience is facilities managers, furniture dealers, installers, and small businesses. They are a perfect example of a business that needs product heavy design. When a facilities manager lands on the site, they know exactly which parts on their chairs are broken and what they need to order to replace those parts. When Adam and Sam from Office Replacement Parts contacted 1Digital to redesign their site, we knew that the new layout should prioritize getting those customers into the right funnel quickly.
Consider what the user first sees immediately after they land on the website, everything above the fold on the homepage. In the older version, the information scent is weak. The visitor is immediately confronted by a gaggle of products, but if one of those eight items doesn’t happen to be the one the visitor looking for, their next move isn’t obvious. They lose the scent and might simply leave to check the next option down the Google results.
In the redesigned version the user is immediately given a choice between Office Replacement Parts three most popular categories. Chances are good that if you’re on their site you’re looking for parts for one of these three items. The user can immediately self-select by the type of item they need to fix and see products related to that item. They have been put on a path of information scent from the very first moment. Once on that path, the user can specify even further by selecting a subcategory from within the main category. By continuing to take logical step after logical step, all the way down, the user lands naturally on the product page they had in mind when they first arrived on the homepage.
InkBed is another product heavy site where we took a slightly different approach. Patrick from InkBed got in contact with 1Digital to do a redesign for his store that sells patented, ergonomically designed tattooing chairs. Unlike Office Replacement Parts this isn’t a common widget you could buy from any retailer, but we still designed it as a product heavy experience simply because the unique product is the draw. We wanted to put users on a product path as quickly as possible.
You can see in the Before image that category and product selections are a bit jumbled on InkBed’s old site. Products are mixed in with categories, sitting above differently designed product listings, and next to differently oriented category listings. This confusion of placement and sporadic nature of design elements causes the information scent to be dispersed among many possible paths. The customer has a ton of options, but very few visual clues as to which options lead to what goals.
Compare that to the relatively slimmed down options presented by the redesigned site in the After photo. It presents InkBed’s four patented tattooing chair designs, the Electric InkBed, the Hydraulic InkBed, the InkChair, and the InkStool. Below them, you can see videos explaining more about each of the different designs. Most of InkBed’s visitors will find the product path they are looking for in this first section of the homepage. If someone is looking for more obscure accessories, they can always access any other part of the product catalog via the header which sticks to the top of the page.
These are two examples of product heavy designs working similarly and differently. Office Replacement Parts needs to put users onto the category they have come searching for, while InkBed can be a little more specific and lead customers directly to the product step. Both sites lead with their offerings right away and assume that customers who reach them have a pretty solid idea of what they are looking for already. With any new design, we try to learn what we can about how customers have shopped with a site in the past to determine if a product heavy layout is the right direction. If it’s not, we do have another option.
Experience Heavy Design
Experience heavy design is often used for businesses in which branding is a much stronger element of the sales pitch. It uses information scent to take users on a path that talks about the product’s quality or the lifestyle the brand is associated with, rather than directly to the product listing. These products usually have a higher price point or might be a newer concept that needs some explaining. Users on experience heavy sites are usually browsing and will likely make multiple visits to the site before making their purchase. The goal of an experience heavy design is a more leisurely information path which winds the user through the site. It allows the user to explore, in the same way they might wander around a boutique store, all the while, reinforcing the value of the offering.
John from Inspyr Gear approached 1Digital to do a redesign of his site which sells exercise socks. Given the holiday reputation of a pair of socks as the quintessential interchangeable, bland gift, you might be thinking that this project sounds like a perfect match for a product heavy design. John wanted, wisely, to take it in another direction. His socks are of higher quality and a higher price, so he knew he wouldn’t compete for the quick-shopping, bargain-hunting customers. Instead, he wanted his site to tell a story about the kind of lifestyle that his brand represented. A customer who is an exercise enthusiast would be willing to pay a higher price for a higher quality sock. The site just needed to communicate that value.
In the Before image, you can see that the site is working with a product heavy layout. One hero banner on top of 3 main categories and then products listed out as they relate to a theme. The information scent works perfectly clearly if you’re trying to lead customers down product heavy information paths. But Inspyr Gear didn’t want to do that anymore.
In the redesign, we focused on one word from the original site, journey. In the After image, the word journey appears in five out of the six sections pictured. The idea of this site is to connect the brand to a lifestyle. In the first two sections, the copy describes life as a journey with ups and downs and much to be celebrated and overcome. It positions the products as a way for the people who connect with this idea to express themselves about that part of their personality. It also reminds the customer that there are others who share their view by invoking the Inspyr Tribe. By the third section, the site is ready to link that idea to the quality of the product. The graphic in the third section builds that value by explaining what makes this product is worth its price point. The fourth section provides a hashtag (that uses the word journey) to give users a way to connect with the branding message further. This layout waits until the fifth section on the homepage to show any product listings. There’s a good reason for that. The information scent in this layout is meant to highlight an idea, not a product. We wanted the user to wander a little, take in the pitch that the site is making before considering buying a product. The scent that leads to the product path may be weakened, but the scent that leads the user on an information/branding path is front and center.
Pro Teeth Guard
The Pro Teeth Guard website is run by a dental lab in San Diego, California. They have been fabricating dental night guards for dentists across the country for years, but they started to wonder, could they cut out the middleman and sell their night guards directly to consumers for a more affordable price? They developed a process by which patients could take their own dental impressions at home, and send the results back to San Diego where their custom night guard could be fabricated and finally mailed back to the customer. The trouble was that this was a completely new process, unfamiliar to people who would be shopping on the site. When 1Digital took this project on, we knew they would need a different kind of experience heavy design. We would need to create a layout which would take the user through a learning process to get them comfortable with this idea before they made a judgment about purchasing the product. All without losing their attention.
You can see in the comparison above, that both sites are attempting to achieve the same goal, educate the site visitor about the Pro Teeth Guard process. The Before image begins much the same way as the After image, with the central proposition of saving money on a dental night guard. However, below the hero image is where the information scent begins to get confused. A quick summary of the 3 step process is followed immediately by product listings, which is followed by a large wall of text explaining the process further. This confuses the information path. Do you want the user to begin taking a purchasing action or learn more about the process? No matter which action they choose, one path is being interrupted by the other.
In the redesign, we doubled down on leading users down an information path before ever prompting them to consider a purchase. Just below the hero banner, you see that the low price is backed up with a section that highlights the product’s quality, reliability and their 110% money back guarantee. We wanted to immediately assuage the fears of anyone who read the first line and assumed they would be sacrificing the quality to buy cheaper equipment. Then it devotes two large sections to explaining the process. The first with a video that is given a lot more real estate than its predecessor. Followed by a summary of those steps which utilizes graphics to cut down on long explanations in text. Too much text to read can cause even the most gung-ho shopper to abandon ship. Directly below that section, we’ve added customer testimonials to build more trust. Finally, after the pitch has been made, a section with featured products appears. This experiential information path leads directly from one section to the next, alternatively familiarizing the customer with this uncommon ordering process, and reinforcing that this is a process and a business which can be trusted.
Both these sites use an experience heavy layout to achieve different goals. Inspyr Gear wants to tell the visitor a story about the kind of lifestyle and values that they want to be associated with their product. Pro Teeth Guard needs to get a technical idea across to the user without boring them so much that they bounce. In both cases, though, the layout needs to communicate a message more complex than, ‘Click Here to Buy That’. Experience heavy designs need to be more subtle because their goals are more complex. That’s why, in my example images, I’ve shown more of the homepage layout than in the product heavy designs. The effect of an experience heavy site comes together holistically over more homepage real estate and time spent interacting.
Information Scent and Effective eCommerce Custom Design
Every effective eCommerce custom design, whether it’s product heavy or experience heavy, needs to use information scent compellingly. The only way to get a hold on the best way to use information scent is to take a look at a project, know how customers already interact with the current site, and visualize how you want to guide their actions with the new layout. Effective eCommerce custom design is like a game of chess. You need to anticipate the visitors next moves and play a game that is three moves ahead. These tactics may be subtle, but they are crucial. Good eCommerce design, for any kind of store, will always use:
- Clear and consistent visual cues
- Intuitive step by step interactions
- Design elements which are engaging but not demanding
Now that you know some of the basics of putting together an effective eCommerce design, you can check out any site to see how the designer intends to lead you down a purchasing path. If you take a look at your own site and find it is suffering from weak information scent, it may be time to talk to a professional about custom eCommerce design. Here at 1Digital Agency, great eCommerce layouts are the only thing our design team does. Feel free to reach out to have your design inspected by a professional. And in the meantime, keep in mind, for the most user-friendly website, design like a caveman.
- Joe Chilson
- June 26, 2019
- No Comments