Last month I was interviewed for information on Levolor.com and its product configurator to be featured as one of the “Hot 100” in Internet Retailer‘s annual list that is rolled out each December. As a part of the Hot 100, Internet Retailer editors outlined 10 key areas that the collective 100 “hot sites” shared focus on this past year:

There are astute strategies to be found in each of the profiles in this issue. Here are 10 lessons that all e-retailers can take away from the innovations of this year’s Hot 100 online retailers.

1.) Connect with consumers

2.) Go mobile

3.) Be an expert source

4.) Make navigation more useful

5.) Personalize the experience

6.) Make tough purchases easy*

7.) Sell yourself

8.) Create a sense of urgency

9.) Connect site and store

10.) Play the value card

*Levolor.com was highlighted in the “Housewares / home / hardware” category and the feature can be seen here. More specifically, we addressed the #6 lesson above of “make tough purchases easy.”

This is the synopsis graphic Internet Retailer publishes for each of the Hot 100 sites outlining things such as technologies and vendors/partners used:

This is the first installment of a 3-part series of online pizza configurators. This 3-part series is part of a larger series of blog posts reviewing online product configurator experiences.

Step 1: The homepage

• After visiting the homepage of PizzaHut.com, you see a very clear “Order Now” button. No confusion here.

Step 2: Enter delivery address

• My primary concern here is whether or not Pizza Hut recognizes my address since our home is newer and is often not found in mapping databases like Google Maps or Mapquest. No issues here — it lets me proceed with my order, no questions asked.

Step 3: Pizza menu

• Body of page: The featured products tab is highlighted by default and I see two featured products.
• Right-hand side of page: Here it clearly shows my order is for delivery and which Pizza Hut location will be delivering my order. This is helpful because if I change my mind and order this for carryout, I may want to pick up from a different location (i.e. if I’m ordering from work and swing by a different location on the way home). Smart.
• Cons:
  • There’s an unusual amount of white space due to the right-hand side of the page containing an advertisement reminding me “don’t forget dessert!” Recommendation: This may benefit from more relevant placement after I’ve added an item to my current order.

Step 4: Building the first pizza of the challenge

• No search. As mentioned in a previous post in the Outback configurator, there are no search options on PizzaHut.com. Since I understand the products, I can generally find what I need, however I’m looking for “deep dish” pizza which means “pan pizza” on the Pizza Hut website. Subtle difference, and a search option would ultimately clear this up for me either by returning the Pan Pizza result or providing me a “did you mean pan pizza?” alternate search.
• View Larger Image: I took these screen shots in Safari 4 and unfortunately this link does not work. Recommendation: at this point it may be more relevant to use the page real estate to show some pricing (i.e. Small Starting at $9.99, Medium Starting at $11.99, Large Starting at $13.99).

Step 5: Configuring the first pizza

• This preselects the crust as “Pan Pizza” based on the item chosen in Step 4. It can optionally be changed to another crust type at this point.

• The defaulted list of options.

• Pros:
  • Straight-forward — intuitive option layout indicating you can have sauce, cheese, and other toppings on the left, right, or whole of the pizza.
  • Based on the criteria outlined in this pizza configurator challenge, I was able to successfully build the pizza I wanted without confusion
• Cons:
  • “x2″ while less intuitive means twice the topping. I’m not sure why sauce and cheese doesn’t have a “x2″ option — instead these both have an alternate selection called “EXTRA.” Recommendation: When user interfaces are inconsistent, it leads to confusion. If you’re doubling the topping or adding extra, it’s typically best to utilize the same user interface options for selecting this.
  • No pricing is listed, so you don’t know how much additional toppings will cost. In fact, as I will point out later, you can never understand how the cost of the pizza is calculated because you only ever see the total cost. If you are on a budget, you have to guess your way through the pizza configurator and hope that you land within your price range. Recommendation: Show the surcharge next to each topping. There’s enough page real estate to do it, so there shouldn’t be any layout challenges in doing so.

Step 6: Add first pizza to order

• Pros:
  • As you add items to your order, they are shown on the right-hand side of the screen. This is helpful if placing a large order to ensure you don’t miss a line item.
• However, what’s wrong with this picture? No details on the pizza. If you have multiple pizzas on an order, it would be impossible to tell the difference between them all. Let’s click on “Show details.”

• Cons:
  • This reads rather unfriendly for me. Recommendation: A bulleted list would be more appropriate using the graphical indicators like on the configurator screen to indicate which side of the pizza the toppings are being added to.
  • Again, no pricing to indicate surcharges for the extra toppings. Recommendation: Showing surcharges by topping would enable consumers to edit the configured pizza and add, remove, or substitute toppings that make sense for their budget. If my budget is $15.00, nobody wins by not showing me the surcharges because I’ll play with the various configurations until I get my order to be in the budget I’m working within.

Step 10: Configuring the second pizza

• The second part of the challenge is to order a large, hand-tossed pizza with as many toppings as possible to test the limits of the pizza configurator. Here we go:

• I was able to select every possible topping. However:

• Cons:
  • After the 6th topping, this message popped up each time I added an additional topping. Recommendation: If you can’t successfully make something, then it probably shouldn’t be offered for purchase.
  • If you do still offer to make it, is there any guarantee that it will be fully cooked? Or do the cooks just throw their hands up after the pizza rolls through the oven? Recommendation: The error message is a bit vague and while I understand there may be problems, I would rather be restricted from ordering it at all if there’s going to be an issue with the product…or at least be provided with a means for contacting the store for special instructions for cooking.

Step 11: Add second pizza to order

• Exact same concern as in step #6 above. This time the problem is evident. How do two large pizzas amount to $52.82? Let’s click “Show Details” to see.

• Cons:
  • Same concerns as #6 with the addition of the following insight:
  • Toppings aside, there’s no way to see how much each pizza on this order costs. For the budget-conscious, this presents a problem. When I got to the local Pizza Hut, I get an itemized breakdown on my receipt, shouldn’t the website behave similarly?

Step 12: Checkout

• I’m showing the checkout pages to illustrate any additional merchandising efforts and here Pizza Hut is promoting stuffed pizza roles and P’zone pizzas.
• Pros:
  • This is a nice layout, easy to understand pricing, easy to see how to add to cart. Plus, they have provided photos at the top of the merchandising offer which show the products.
• Cons:
  • On their main menu, they had a right-hand advertisement saying “don’t forget the dessert!” However, here I am at the checkout page and I don’t have the dessert, but they are not promoting dessert — they are trying to sell me products that could essentially amount to an entire meal on their own. Recommendation: This is an example of a missed merchandising opportunity because the website isn’t smart enough to realize I already have my main course in the cart, ready to check out. They should be targeting other items to compliment my order. (This appears to be a trend as I review more sites, Outback suffers from it, too)

(Brief) User Experience Analysis

Pizza Hut’s site suffers from browser-specific issues in Safari that have been prominent for a couple years (as long as I’ve used Safari, actually). While these do not hinder my ability to place orders, it’s the equivalent to eating at one of those wobbly restaurant tables (because the floor isn’t level). While this doesn’t deter you from leaving, it sure is a nuisance and plays into the overall customer experience.

Outside of this, I personally use Pizza Hut’s ordering site the most primarily because we choose carryout a lot and it’s one of the closer locations to our home. The very fact that they have a configurator is reason enough for us to choose Pizza Hut over another local pizza establishment because of the convenience of ordering online.

A comprehensive analysis of Pizza Hut, Papa John’s, and Domino’s configurators will follow after each review is posted. Stay tuned for my next review of the Papa John’s pizza configurator as a part of this “building your pizza online” series of posts.

vs.

vs.

This is the third post in a series of product configurator reviews and I’ll review the online configuration process for ordering pizzas. Pizza is a simple product which everyone understands, so the product configurator probably needs to be less about form and more about function. At the end of the day however, these online configurators are designed to sell food that should be appealing to the potential buyer and we’ll walk through the “build your own pizza” order process from each of these nationwide chains.

The Rules

Like any good usability study and to properly benchmark each product configurator, the intent is to use each configurator for the same exact purpose. Here’s what we’ll be walking through on each of the configurators:

1. Configure an order for delivery to my home address
2. Build 1 pizza with the following:
   1. Large deep dish crust
   2. Extra cheese on the entire pizza
   3. Pepperoni on 1/2 of the pizza (because that’s all my wife likes)
   4. Sausage, green peppers, and onions on the other 1/2 (for me)
3. Build a second pizza with the following:
   1. Large hand-tossed crust
   2. As many toppings as possible (to push the constraints of the configurator)
4. See the individual costs of each pizza, delivery surcharges, and taxes. While this is making my hungry while writing, I unfortunately will not be placing my order.

The Purpose/Goal

The purpose of this is to identify the site with the best configurator. “Best” is defined as:

1. Easiest to use/navigate
2. Fewest clicks
3. High degree of confidence that the order will be accurate when received by the store
4. Visually appealing — it should make me want to order the product!

Let’s see how each site stacks up!

PizzaHut.com

At an estimated 2.4 Million U.S. visitors per month, Pizzahut.com is ranked at #523 in the Quantcast index. PizzaHut.com ranks highest among these three sites in terms of Quantcast-estimated traffic. That equates to a substantial number of configured orders every month from consumers ordering online.

PapaJohns.com

At an estimated 1.5 Million U.S. visitors per month, PapaJohns.com is ranked at #1,006 in the Quantcast index.

Dominos.com

At an estimated 1.7 Million U.S. visitors per month, Dominos.com is ranked at #855 in the Quantcast index, slightly above PapaJohns.com but still behind PizzaHut.com.

The Usability Challenge

Due to the number of screen shots, each site is covered in a separate blog post:

1. View the PizzaHut.com Pizza Configurator Usability Challenge
2. View the PapaJohns.com Pizza Configurator Usability Challenge (link will be updated after the review is complete)
3. View the Dominos.com Pizza Configurator Usability Challenge (link will be updated after the review is complete)
4. View the Final Analysis (link will be updated after all 3 reviews are complete)

This is the second post in an ongoing series of product configurator reviews in which I review the online configuration process on websites.

Recently I placed my first online order with Outback Steakhouse for curbside pickup. I appreciated the ability to order online but found some usability concerns that I’d like to outline in this post. Prior to this online order, I was neither aware of online ordering or curbside pickup at Outback. This is mostly due to the fact that we do not frequently dine there (2-3 times per year on average).

The purpose of this post is to articulate how user experience in a physical store environment (in this case, the Outback restaurant) is not always reflected online. Companies large and small need to factor the physical experience requirements with the virtual experience requirements. If an Outback restaurant was presented like their online ordering experience is presented, there would be few repeat purchasers.

On with the screen shot reviews:

Step 1: Main Menu

My initial reactions:

• No search. This is an area that I haven’t seen many online restaurants embrace, yet. If I know what I want, I should be able to search for it. However, I can somewhat understand why it’s not offered because restaurants generally try to emulate their physical menus — which obviously do not offer searching capabilities.
• One long, scrollable menu. The left-hand navigation is a series of anchor points. This was an interesting concept that didn’t bother me, but came across as non-standard. This layout would be more of a problem if there were a lot of pictures.
• Lack of pictures. The only menu item with a picture is the Aussie-Tizers at the very top. This is an online merchandising faux pax. Hard to up-sell someone, especially with food, if you can’t see what it looks like — this is why restaurants typically have the “dessert cart” to show off / upsell their desserts when you think you can’t fit anything else in your stomach.

Step 2: “Configuring” Baby Back Ribs?

• Clicking a red link in the left column forces the right column of the browser window to refresh.
• OK, I see Baby Back Ribs on the right-hand side of my screen.
• I have to click on links in the right-hand side to further configure this order (i.e. “click to substitute”).
• Usability concern: Clicking on links generally takes me away to another page (I want to order Baby Back Ribs — will I need to re-add them to my cart after leaving this page because I’m not clicking “Add to Order” yet?). Very non-standard.

Step 3: “Configuring” the sides

• I “click to substitute” Aussie Fries for a Signature Side Salad (if you’ve ever ordered fries with a curbside pickup order from any restaurant, you know that the fries are soggy by the time they make it back to your house).
• I don’t understand what “Special Instructions” are for. In my first pass through their site (before taking screenshots), I entered my salad dressing type here. The last thing I wanted was a salad without salad dressing.

Step 4: Choose side salad type

• Right-hand part of the page has refreshed again, now asking me for a salad type. Again, not that I personally need them, but showing pictures here would really help upsell to other types of sides/salads. Instead I go for the old faithful “House Salad.”

Step 5: Choose salad dressing

• Page refreshes again and asks me for the salad dressing type. For some reason, this is a drop-down menu instead of radio buttons like the previous page. Subtle interface issues like this make for additional usability concerns when switching question/answer display types.

Step 6: (Upsell time) Salad or Soup?

• I just completed 3 separate clicks to override Aussie Fries for a Salad, chose my salad type, then chose my salad dressing. Now I’m being asked if I want a side salad? This configurator is not intelligent enough to detect if you’ve already ordered what it’s asking you for.
• “Click add to order to proceed” is counter-intuitive. If I don’t want anything, then I shouldn’t be taking the action to “add to order” my “No soup or salad” option. A simple “no thanks, skip this option” would be more appropriate wording.

Step 7: Additional add-ons?

• I just got finished making it through 6 separate pages and I still have not added Baby Back Ribs to my order.
• Again, trying to up-sell without supporting photos of these “Add-on Mates”
• Like in step #6, counter-intuitive use of “click Add to Order to proceed”
• And the mysterious “special instructions” field still exists — I’m not sure what instructions I would add here? It would help if they provided examples of what information they would look for here.

Step 8: Completed Baby Back Ribs “configuration”

• 8 pages later and many more clicks than that, I have added Baby Back Ribs to my order. That’s quite a few clicks and now I’m really hungry.
• Other concerns about this page include:
  • Tax is only estimated and may vary by store location. There is technology available to accurately calculate tax for each individual store.
  • “No Add-On Mates, Thank you (click Add to Order to proceed” is an actual “option” on this order. This is not user-friendly.
  • Would like to see the ability to duplicate an item in the order

Overall User Experience Analysis

The non-standard navigation (split left & right columns), numerous clicks for ordering Baby Back Ribs, no indicator as to how many steps are in the process to configure an item on the order, and the overall lack of standard online shopping functions (photos, sorting by price/name, searching, etc.) put this site near the bottom of the “easy of use” list for me, personally.

Had this been a local mom & pop restaurant, I would have called in my order because I would not have trusted the website enough. Because Outback is a well-known brand name, I was able to look past these usability flaws and place my order online. I would speculate that by making usability improvements to eliminate these barriers, they would see more curbside orders being placed online and their call-in orders would decrease.

Product configurators should imitate real life guided selling

In the real world, if a waiter would have walked through the same set of questions I had answered on the website, it would have aggravated me: When I substituted the side salad for Aussie Fries, I should not have been asked again if I would’ve liked a side salad for an additional $2.50. This is where product configurators online need to reflect real-life scenarios and not function like a computer running through a list of questions.

Fortunately, most people “get” the restaurant ordering experience and can look past these usability flaws. However, for manufacturers and retailers selling products which consumers do not purchase often, product configurators must be highly intuitive, helpful, and be positioned to up-sell but most importantly to answer questions about the basic options being presented to consumers.

(This is the first post in a series in which I intend to review online product configurators across industries. We’ve built a product configurator from the ground up because no viable off-the-shelf options were available for our complex products. This has resulted in complete immersion of website usability, consumer insights, and an intimate understanding of the challenges in offering made-to-order products online.)

I work in the home decor industry, blinds and shades in particular. The shopping process for understanding, selecting, ordering, and installing custom blinds and shades can be daunting if it’s unclear what is available to you as a consumer. Plus, when it comes to home decor and fashion, there is a lot of emotion involved — how you furnish your home says a lot about you and your family so the last thing you want to do is make a very expensive design mistake.

More Options = Better. Right?

Not necessarily. However, the Blinds and Shades industry is an old industry rooted in differentiation by product options and colors. In an industry determined to never be outdone by its competitors, window treatment manufacturers both benefit and suffer from being able to cater to the millions of variations of window sizes in consumers’ homes to the unique decor tastes of consumers laying down their hard-earned money. The engineering and manufacturing behind the products is complex, but when it comes to presenting an ordering screen to an untrained user, it’s a whole new challenge.

DIY Product Configuration & Ordering

The problem that has manifested is an industry offering such confusing products that only a designer or decorator could assist a consumer in purchasing. So, how does one create a website to help DIY’ers who choose to go at it on their own?

When taking all of the products, colors, options, and manufacturing limitations into consideration across 100+ billion ordering combinations, this makes for a very complex product configurator. Mocha or Chocolate colored finish? Inside or out-side mounted installation? Motorized or cordless control mechanism? What type of decor do you have in your room? What type of room will this blind or shade be installed in? If you’ve gone through the process of outfitting your home with new blinds, you know that it’s challenging.

Key components to a product configurator are all about usability

Usability in a product configurator means:

1. Showing options with photos or videos
2. Offering feature/benefit statements for each option
3. Categorize options into digestible steps
4. When a conflict is detected, provide messaging in plain English and in a relevant location.

Step 1: Showing options with photos or videos

One of the fundamentals. Consumers will buy what they can see. Case in point, here is a $1,530 “Track Pack” option on the Ford Mustang without pictures:

Step 2: Offering feature/benefit statements for each option

A couple years back I was looking at Ford Mustangs on Ford’s website. In the configurator, I was presented with an option of a rearend gear ratio of 3.73. I went back recently and took a screen shot of this because Ford is still doing it. What’s wrong with this picture?

I don’t know what the factory default rear axle ratio is. Being a “car guy,” I know the benefits of gearing up or gearing down, but without being able to compare this option to what’s offered by default, it’s hard to justify the $495 price tag. I have to leave the product configurator and search around on the site to see if they’ve listed the default rear axle ratio specifications somewhere.

Step 3: Categorize options into digestible steps

Oh, how it’s daunting to enter into a product configurator without an understanding of how many steps or questions there are to answer. Blinds and Shades in particular can be upwards of 25 questions just to get to a completed configuration. The tricky part is dividing the total number of questions into logical buckets or steps. Consumers do not configure products in linear fashion, particularly when comparing pricing online, changing options, and running into option conflicts. They hop around, jumping out of predefined order. It’s important to categorize questions so a consumer and quickly remember where they saw an option.

Step 4: When a conflict is detected, provide messaging in plain English and in a relevant location.

Again, Ford is on the right track by showing the conflict, but what is always difficult to decipher is the why behind conflicts like this:

What’s happened here is the 3.73 rear axle package is already included in the “Track Pack” option. In order to understand this however, I have to separately click on the “Track Pack” option and the “Rear Axle Package” option to see if I can come to my own conclusion as to why these two options cannot be ordered together.

In the case of blinds and shades, I’ve configured a Cellular Shade that is 83″ wide X 60″ tall:

I’ve chosen the “cordless top down/bottom up” option but I see an error message that explains the why behind the conflict, not simply “this option cannot be ordered.” It allows me to either alter my measurements on my shade or choose another control option. I don’t have to click around on the options to understand why this particular option cannot be ordered.