We witness it when football players take ballet. We see it when a furniture designer looks to nature for inspiration. We hear it when Tony Bennett teams up with Lady Gaga.

Unfortunately, we don’t witness this in the digital world enough. Instead of being open to a range of influences, site design processes often have a narrow focus that can result in  “me too” looks rather than differentiated designs.

How does this happen?

As part of the discovery process, companies typically limit their review of the digital landscape to direct competitors and “top sites.”  This practice is important for benchmarking and informing feature prioritization. But done alone, a competitive review can be limiting and inadvertently create a “keeping up with the joneses” effect rather than setting the stage for a differentiated experience.

How can you avoid this pitfall and create a more differentiated experience?

By expanding your circle of influence. By supplementing competitive reviews with brand spheres.

What Is A Brand Sphere?

A brand sphere is a map of your customers’  “go to” brands across verticals. It identifies the brands they choose as they go about their day and the brands you can find in their home.

What is in their refrigerator? Which labels do they wear? What car do they drive? What kind of phone do they have? Where do they eat out? Which gym do they belong to? Which hair and body care brands do they prefer?

A brand sphere draws a more complete picture of your customer. It illuminates their preferences and expectations. And it provides new fodder for inspiration.

For example, if you are designing a consumer electronics shopping site, why limit your influences to only other electronics sites or even ecommerce sites in general? Why not look at music and video sites where your consumers most likely spend more time? Why not look at the CPG sites that fall in their brand sphere? What can you learn from the news sites they visit? The social networks they use?

By looking across verticals, you will expose yourself to different design approaches and feature sets. The purpose is not to imitate these approaches but to take a step back and see if there are any distinct designs or features that spark an idea.

Undoubtedly new perspectives will fuel new ideas. Ideas that are as elegant and powerful as a football player who can both rush and plié.

The borders between physical and digital are further being blurred as traditional brick and mortar retailers are laying stake in the digital space. Mobile computing is nearly ubiquitous and instant access to information is almost at everyone’s fingertips. In addition, the attention span of people have become shorter and this poses a challenge to brands. Brand consistency is key to communicating to your target audience and in today’s fast paced retail environment, there’s no room for error. A marketing message that runs astray can have a huge impact on business.

During our outing, we’ve noticed many retailers doing great things with new technologies and some not so great. There has been a recent trend with stores using tablet computers to allow their consumers to browse through their product catalogue within store. It’s a static and passive experience that most of the time, does not engage the customer. Some of the problems with this technology are:

• The technology does not tell you where to find items in store.
  
• Proper QA testing of the app wasn’t performed. The app crashed many times while browsing.
  
• It may not be inline with your brand aesthetic. If your brand has a gritty, industrial feel to it, placing modern, shiny tablets throughout the store takes away from the overall brand experience.
• While the “cool” factor may be there the fact of the matter is that it can alienate the consumer, especially in tablet form.
• You cannot replace good old customer service with shiny tablet device. There is no substitution for face to face human interaction.
  
• Instead of focusing on the products in the store, your consumers are fixated with trying to figure out how to navigate through a mobile experience.
  

To conclude, always keep the end user in mind when designing an experience and remember that he/she comes first and the technology follows. With new technologies being released daily, it’s easy to lose sight of who you’re designing for. As Experience Designers it is our responsibility to make the transition from physical to digital as seamless as possible for users and the focus should be getting to know the end user and their technological needs and wants and then finding the technology that suits them. The tablet computer will not be the the answer to elevate your brand and increase conversion and raise customer satisfaction. There is one trait that successful brands all have in common:  Their solid dedication to Customer Service. When designing, think of ways to design user experiences that enhance customer service and engagement.

We’ve brought Amy on because gone are the days where retailers can rigidly control virtually every aspect of their online presence and shopping experience. Blogs and customer reviews mean consumers have a voice in the conversation. Content is increasingly portable and flexible. Conversion funnels begin before consumers get to your site and social networks allow consumers unprecedented influence over what friends and strangers are buying online and in stores. This complex landscape requires shopping and brand experiences that are thoughtful, flexible and strategic.

It is Amy’s job to help our clients plot a path through this evolving landscape, particularly in social media, and to make sure everything Fluid deploys is on target from both a quantitative business and brand perspective.

Welcome, Amy.

I started with the list of Internet Retailers 2009 Hot 100 Retail Web Sites. I don’t quite understand how they came up with this list, given that some of these sites look like they haven’t been redesigned since the ’90s, but it seemed like a good baseline to use for my research.

I set forth a series of questions as I looked at each site:

• Does the site use parametric navigation/navigation filtering?
• Are there multiple filtering categories available, i.e., does the site show filter options for both price and size?
• Can I filter on more than one criterion? So while the site shows me filter options for both price and size, can I select an option from each one of those sets?
• Can I filter on multiple sections in one set? In other words, can I select both the $50-$75 and the $75-$100 price range, or am I limited to one selection?
• Do the results refresh instantly or do I need to click a button to activate the search?
• Are the selected filters displayed on the page? If I filter by $50-$75, long-sleeve shirts, do I see these criteria close to my results set, so I know what I’ve selected? (I don’t have a very good memory.)
• And a more subjective question – how would I rate the quality of the parametric navigation? Is it easy to add and remove filters? Do the filters show the number of items in that category? Are there a myriad of filter options?

I scored the objective questions on a scale of 0-2, with 0 equaling no/not present, 1 equaling partially present, and 2 equaling yes. The last question had a scale of 0-5, with 5 being ideal. The maximum score is 17.

My Favorite Implementation

This is not on the list, but I think it’s one of the best uses of parametric navigation that I see on the Web. I use the site all the time, and am constantly amazed at its combination of complexity and simplicity.

Kayak – I don’t know that Kayak.com would be traditionally classified as an online retail website, but I do use it to browse and shop for travel information any time I go anywhere. I can enter my home airport – SFO – and my destination – NYC – and I can filter the hell out of my results. I can opt for a direct flight or choose to have a layover (yeah, I don’t pick that). I can change my flight departure and arrival times based on whether the plane is taking off or landing. I can pick only the airlines I get miles on and only the airports I would fly in and out of (definitely does not include San Jose). There are sliders for price, layover duration, and trip duration. The possibilities are endless.

What makes this an excellent site is not only the numerous choices, but also the ability to select multiple options under one category – for example, I can select JetBlue and Virgin America. I’m not limited to one option per category, which is where a lot of sites fall short. Additionally, I can set my own parameters for several filters, including flight times and price. I don’t have to try and fit into the 10:00am-2:00pm time frame or $200-$350, $350-$500. I can set my price filter to $409 if I want to. I have options, dammit! And the best thing about this site is the single-page architecture. So when I modify any of my options, the page just redraws in a relatively seamless manner. Now I didn’t judge the Hot 100 based on their search/filter technology implementation and I didn’t note if a filter forced a new page to load or if the site used a single page architecture, but it is one of the design and technology implementation decisions that makes for a positive user experience.

On to the Hot 100….

The Good

The four sites on the list with the best parametric navigation implementation are Blue Nile, Computer Discount Warehouse, CSN Stores, and Garmin. The primary thing that each of these sites does well is allow for multiple filtering choices for each category.

Blue Nile – This site makes best uses filtering on the Diamond Search – and I’m not just saying that because I’m a girl. Like Kayak, it updates results immediately and provides that direct feedback to the customer. I can select three diamond shapes on the main page and it tells me the total number of diamonds in stock in the selected shapes. Once I get to the results page, I have quite a few options to narrow my list, and I can change the shapes, sizes, price, etc. very easily. The site makes it very easy for me to buy myself lots of fancy jewels (except for the price, of course).

Computer Discount Warehouse – This site is better known as CWD and it has a massive amount of home and office computing inventory. So how to find what you need? CDW actually gives the customer multiple parametric navigation options – basic and advanced. I go to the site and select Products -> Computers -> Notebook Computers. The main Notebook page comes up and I can see that I have a ton of Advanced filtering options. I can open each one of these, select multiple criteria and customize my search to the smallest detail. Or, I can click on the Basic tab and do simpler, more traditional filtering. It’s true that I may not have as many options here, but if I’m not an experienced buyer, all of those choices could be intimidating. This site allows me to search in whichever way I’m comfortable.

CSN Stores – This is not a store most folks would have heard of. Rather it’s a company that has set up an online store template for focused purchases, and they’ve done their parametric navigation pretty well. Select Shop By Item -> Furniture. Then click on Bedroom Furniture and select Dressers in the left navigation. The site has more than 100 filtering options with quantities per filter and the ability to select (and easily de-select) multiple options under one category. And each time I add a new filter, the quantity for all the remaining filters updates, taking into account the additional criterion.

Garmin – This site, with a much smaller product set than CSN, handles it’s filtering in pretty much the same way. I select Products -> On the Road and click on Automotive, and I get 27 results with multiple filter options and updating quantities to help me narrow my choices and find the GPS that works for me.

The Not-So-Bad

These sites they come close, and I wish they would go just that little extra mile to push themselves into “The Good”.

EyeBuyDirect – This site does do a few things right with the parametric navigation. I clicked on Women’s Glasses, and got 231 results, so I decided to narrow this to Fashion and Classic glasses. I select those filters, and the page refreshes instantly, which is great. But I still have 54 results, and I decide that I only want black or brown glasses. And there is where the site falls short. I can only select one color. Why give me the ability to select multiple options in one filter category and not in another? As I said above, I like choice.

Sunglass Hut – If you’re not near a mall and you need your sunglasses, this seems like a good site to visit. I searched for “Ray-Ban” to see what results I would get. The left side of the page refreshed with a list of filter options, so I was happy. I decide to click on Ray-Ban, Oakley, Spy, and Prada. I then decide that Prada doesn’t belong in that group, but there’s no way to de-select! So I can pick several criteria, but I have to “clear all” to remove one from the set. That’s just annoying. Additionally, the site navigation design seems clean and elegant, but it does have some flaws. I decide I need new skiing sunglasses and reset my search to just look at Oakleys. I go into Features and select anti-reflective, interchangeable and polarized. Then I go to color. But my Feature selections aren’t visible anywhere unless I expand that panel. It’s great that the site allows users to select multiple filters in a single category – but those choices should be visible to me as I scroll through my results. I can’t be expected to remember what I clicked on 30 seconds ago….

The Ugly

This is just a small selection of the Ugly – there are a lot of sites that attempt parametric navigation filtering, but just don’t do it all that well.

Action Envelope – I searched for “notecard” and I can only narrow my results set by one filter – either color or style. I can’t determine if they have a yellow, pointed-flap notecard (which I desperately need) because I cannot select more than one product attribute. I can select a color, and then when I select a style it replaces the color. Big no no!

CVS – I searched for “shampoo” and got 374 results. But the filter options were not sufficient to refine that list. They haven’t set up the site attributes to map to generic products. I can navigate through the categories to Beauty -> Skin Care -> Facial Moisturizers, but again, products are not “tagged” in enough detail in order to allow me to narrow my choice. I can really only filter for brand, when maybe I’d prefer to filter by price, bottle size, SPF, etc.

SkyMall – I know SkyMall is more of an amalgamation of store sites – or more brands –in one, but it was on the list so I figured it was fair game. (And I do flip through the catalogs when I’m bored on a flight.) The filtering (like some of the products they sell) on this site totally baffled me. They made one huge error – they don’t show you the filters you have selected! I browsed to Home Living -> Bedroom Furniture. There were 49 products, so I clicked on Vendor -> Guidecraft USA. The page refreshed with new results and the vendor name was nowhere to be found. That’s just not going to work for me….

So that’s my 2 cents (maybe 4 cents). I want both options and control. I should be able to filter by the attributes that matter to me most, with the goal of being presented with a product set that meets my specific needs and requirements. I don’t think that’s too much to ask…do you?

List of Hot 100 Retailers here (reviewed sites are highlighted):

Site	Total Score
Action Envelope	7
Amazon	11
American Apparel	n/a
American Eagle Outfitters	n/a
Anthropologie	11
Athleta	n/a
Avon	n/a
Bag Borrow or Steal	11
Beckett Media	11
Best Buy	12
Blockbuster	n/a
Bluefly	12
BlueNile	17
Borders	12
Buy.com	12
Cable Organizer.com	12
Chapter.indigo.ca	12
Computer Discount Warehouse	17
Crutchfield	13
CSN Stores	17
Cusp	n/a
CVS Stores	9
Delight.com	n/a
Design By Humans	n/a
Drs. Foster and Smith	12
Dunkin Donuts	n/a
eBags	13
Eddie Bauer	12
ElderLuxe.com	n/a
Estee Lauder	13
Expressionery.com	n/a
EyeBuyDirect	15
FatBrain Toys	n/a
Fathead.com	n/a
Faucet.com	12
FragranceNet.com	n/a
Gaiam	n/a
Gander Mountain	n/a
Gap	13
Gardeners.com	n/a
Garmin	17
Goldspeed.com	13
Godiva.com	n/a
iGourmet.com	13
iTunes	n/a
Journeys.com	11
JTVWatches.com	13
Karmaloop.com	13
KingArthurFlour.com	12
LandofNod.com	n/a
Lands’ End	11
Levi’s	n/a
Lion Brand Yarn	n/a
Martin+Osa	n/a
Max Furniture	n/a
Meijer	n/a
MoMA Store	9
MusicNotes.com	9
Muttropolis	n/a
Mymms.com	n/a
NASCAR	n/a
NikeID	n/a
Nine West	n/a
Novica	n/a
Organic Style	n/a
Organize.com	12
Orvis	12
Overstock	13
Pets United	13
Popcuts	n/a
QVC	11
Ritz Interactive	12
Roxy	11
RunningWarehouse.com	n/a
Rusty Zipper	n/a
Sam Ash Music	13
Scentiments	n/a
Scholastic	13
shoeline.com	n/a
Skis.com	12
SkyMall	8
Smith & Noble	n/a
Staples	12
StilaCosmetics.com	n/a
Sunglass Hut	14
Sweetwater.com	n/a
ThinkGeek.com	n/a
Timbuk2 Bags	n/a
The North Face	14
Tool King	10
Ulta	9
UnderArmour	n/a
Undergear.com	n/a
Vans	12
Vista Print	n/a
Walgreens	13
Walmart	13
WetSeal	n/a
Zappos	13
Zazzle.com	n/a

Note: n/a means that at the time of the research, the site did not have parametric navigation.

My initial goal was to research and write a blog on sneakers, the sneaker culture, and what drives a ‘sneakerhead’ to seek the most limited/hard to get/wait-in-line-for-2 days type sneakers. But as I set out on my task to contribute to the Fluid blog, I stumbled onto the site miadidas.com. I say ‘stumbled’ because I have not heard or seen much about this site. I knew about NikeID, YourReebok(formerly known as RBKCustom), and the newly updated Vans Custom site among others, but was surprised and somewhat disappointed about just discovering the custom site for Adidas shoes. I’ve seen the in-store experience at the Adidas store in San Francisco, but was not aware it was migrated to the web – or at least a version of it.

With that said, I decided to focus my attention to the site and give my personal review.

OVERVIEW

“In 2008, adidas Originals successfully introduced its in-store customization tool, mi Originals.  Now, mi Originals is taking steps to broaden its product offering for the streetwear community with the US launch of miadidas.com.”

The site launched in February 2009 with the Superstar, ZX 700, Stan Smith, and Gazelle. Since then it has added the Stan Smith CF and Forum Lo to the Originals line along with a ‘Sport’ line which offers 13 different types of models catering to Basketball, Soccer, Running or Tennis. Prices range from $95(Gazelle) to $240(Predator Power Serve – soccer shoe), which is about 20% or so above the retail price of its inline version.

HOMEPAGE

The home page displays three models for each line – Originals and Sports – located at the bottom of the page. Clicking on any of the shoes brings up a nice hero shot and some quick blurb of its history (Originals) or quote by an ‘athlete’ (Sports). There is navigation at the top which filters the products either by Gender (Men / Women) or Line (Sports / Originals) or by All Products. There are also links to Help, an E-newsletter, a Store Finder (which I wasn’t sure why since this is about making/buying custom shoes and not inline) as well as a My Account page.

Still on the homepage, I did notice some inconsistency with how you were able to start customizing. If you click on any of the ‘Sport’ shoes, the hero shot includes a link to start customizing, but the hero shots of the Originals do not include this link.*

*Update – This has now changed from my initial review. There are now links to ‘Start Customizing’ for both Sports and Original.

If you decide to see all products, you will be taken to another page that has Sport and Originals separated into two columns populated with various shoe inspirations – about two or so for each model. A ‘Details’ link beside each custom shoe will take you to a page specifically for that model providing description, three different shoe views, and additional inspirations for that particular shoe.

At this point, I was ready to start customizing. I simply clicked on the ‘Customize’ button which is visible at various areas on the page. I decided to go with the Superstar II for various reasons – nostalgia, love for the ‘shell-toe’, love for RunDMC, or love for the 80s – not sure, but I digress.

GETTING STARTED

The main customization area is one screen separated into three vertical sections. The left side is split into four panes – Side, Top, Bottom and Personalize. The middle section is the information or selection area. This is where you select your size, gender, colors and materials for the different parts of the shoe. The right side has an image of the shoe being customized which updates as various selections are made. The shoe is a 3D model image powered by Holomatix Blaze3D, or so it says when I right-click on that area.

You are able to rotate the shoe 360 degrees by dragging your mouse in a specific direction. There are also links at the bottom which allow you to change Background (white or black), change views (Top, Bottom, or Side) and Zoom (you can rotate while in Zoom mode which is pretty cool).

Once you’ve selected your size/gender, the left panel becomes ‘available’. It starts grayed out until you select size/gender. Before I dive in, I want to spend a few moments to talk about the Size selection. You are asked to select a Gender, Size as well as Width. With the Originals, the Width is usually always ‘Medium’. With the Sport shoes, you are able to choose a specific size and width settings (Narrow, Medium and Wide) for both the left and right foot. As the site says:

“Every foot is different. Even your own two feet are not alike. So instead of making your feet fit into some average shoes, why not make the shoes fit your feet?”

Believe it or not, there are some people that have this need. Both the left and right foot can finally be happy together.

Brilliant.

CUSTOMIZING

So back to my Superstar customizing – I start with the ‘Side’ which opens up another panel with various side images of the shoe, each image having a certain piece highlighted to represent what will be customized. I’m asked if I would like perforation on the shoe or a print. But ‘print color is not available if you select no print or perforation’. This type of messaging is everywhere to the point of annoying confusion. I decide to go with the ‘classic trefoil’ as my print and proceed to select a print color before I am presented with another error message.

“The combination of print (color bloom) and lateral rear quarter (color bloom) is not allowed. Please change on the above options and try again.”

So if I wanted to have my print to be the ‘color bloom’ I would need to go to the next step and change the color of the ‘lateral rear quarter’ to something other than bloom. And if I decide to change the lateral rear quarter material from leather to suede, I get another message telling me I have attempted something that is not allowed. I think this would have been better represented in one main pane giving the user the visibility as to what is/is not available based on their selections. If I select a print, I see that only certain colors/materials become available. I totally understand the need for rules surrounding colors/materials/patters but I think it could have been better presented to the user. And if it wasn’t for the visual, would the average person really know what a lateral rear quarter was?

I continue through the rest of the shoe – Top and Bottom – encountering the same ‘messages’ as I continue to customize my work of art. I keep on pushing forward not letting the bombardment of ‘try again’ messages deter me from completing my masterpiece.

PERSONALIZE

Now that I am pretty much satisfied with my color/material layout, it’s time to personalize. The Personalize area allows you to select a lace jewel and/or personalize your shoe with embroidery. The lace jewel gives you two options: birth date of your shoe or trefoil. The birth date is a pretty cool idea especially if the date is significant in some manner.

Adding text personalization to the shoe is pretty standard and has the same type of ‘profanity check’ present on similar sites. Although, in Seth Rogan fashion (see Tonight Show appearance late 2008), I was able to find some phrases/words that did not make the cut. Insert evil laugh here.

The Personalize area differs based on shoe. For example, the Stan Smith CF allows you to personalize the top and middle strap of the shoe. You can also add a ‘city print’ to the shoe (i.e. “I ‘trefoil’ Amsterdam”) with about 14 cities on the list – sadly no San Francisco.

The TS Bounce Commander (basketball shoe) even allows you to have a player quote and autograph on the underside of its lace cover. The athletes are obviously limited to those sponsored by Adidas, but very cool nonetheless. There are more cool personalization options based on shoe that I will not detail out here, but definitely good to see Adidas expanding this area of customization.

SAVE / SHARE

If you aren’t ready to purchase, you can Save your work to your ‘My Account’ page. You’ll be prompted to sign in(if you aren’t already) or register for an account to save your shoe in progress.

My Account list is almost a closet of sorts, displaying all the shoes you’ve saved.  It’s a very clean, but plain interface.  From this page, you can Add to Cart, Edit, and Send to a Friend among others.

The Share functionality is pretty limited. With Twitter, Facebook, MySpace, and Digg encompassing the social universe, none of these options were available. What makes it even more amusing is the fact that there is a miadidas Twitter page (@miadidas), but no way to access it from the actual site. The only Share option was via email, which works well. But there are times when I need to show my masterpiece to the world and get the thumbs up of approval. I would have thought a few ‘Share to Social Sites’ option would be available.

ADD TO CART / CHECKOUT

Pretty standard stuff here. You are presented with an image of the shoe you just customized along with the option to update/remove quantity, save to your account or re-edit by clicking on the shoe name.

Shipping is a flat rate of $12 regardless of how much you have in your cart with delivery estimate of about 3-4 weeks which is on par with other site.

SUMMARY

All in all, Adidas’ entry into the online customization world has gotten to an ok start. I could definitely see some improvements in the user follow as it relates to rules with colors/materials as well as addressing some of the consistency issues. But for the most part, the experience was good. But I’m not sure if most of the ‘good’ is based on the fact that I love Adidas originals and having the opportunity to customize them is pretty sweet.

I would love for them to expand the ‘Share’ feature considering how popular social sites are. They could start by tying in their Twitter page with the actual site.

I did like the use of 3D, which gives more flexibility when it comes to rotating and zooming. The personalization options were a definite plus along with the number of shoes available. They just didn’t go with their most popular lifestyle/sport shoes, but also offered sport focused shoes such as soccer cleats. I’ll definitely be getting the word out and will definitely be back to see what other creation I can conjure up and call my own or as RunDMC said, “My Adidas…”, or in this case mi adidas.

Pros

• Size/Width selection for both left and right shoe
• Shoe rotation and zoom capabilities
• Use of 3D modeling
• Personalization options
• Number of shoes available
• Pattern/material options
• Flat shipping rate

Cons

• User flow / shoe placement inconsistencies
• Presentation of rules for colors and materials
• Blank shoe can be easily accessed for Sport line but not Originals. Need to click ‘Start Over’ before presented with blank shoe option.* This has since changed.
• Sharing limited to Email only

References

——————

www.miadidas.com

http://www.press.adidas.com/DesktopDefault.aspx/tabid-4/79_read-10186/

Recently, Adobe asked Fluid to share our approach of rapid prototyping with the Adobe Fireworks and Adobe Dreamweaver developer’s community and we were both honored and excited to do so.

Our in depth article, “Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4″, can be found on Adobe’s website here:

http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html

First and foremost, think about your web site as your “packaging,” and design accordingly—do not create a barrier to entry that separates customers from their end goal and hinders conversion.

When we reconsider the previously discussed factors of packaging design in this context, they align nicely with some familiar elements and ideas of good usability. We’ll review our packaging design principles in a new context below. As a case study, we’ll use the Rich and Skinny brand jeans site (http://www.richandskinnyjeans.com/RichAndSkinny/).

Design Principles, Revisited:

1.   Messaging: The messaging component of our “packaging” isn’t that different between the aspects of physical objects and designing for interaction online and beyond. The key difference, however, is that there is often more to say—and it’s easy to fall into a trap of veritable content-overload. The most effective sites often present one singular, captivating message. As a design guideline, I often ask myself, “What is this page saying?” And if the answer is, “Too much,” I reconsider the purpose and focus of the page and its message.

Case Study: On first look at the home page of Rich and Skinny Jeans, all of the components on the home page combine to deliver a successful and compelling brand message. The message of Rich and Skinny goes beyond simply selling jeans. They’re selling their lifestyle, and that message is clear, fun—and inviting.

2.   Presentation: Previously, I described presentation as the way in which messaging and content are formatted, stylized, and presented. When we consider an interactive experience, presentation becomes critical: going beyond visual design, successful information design presents new challenges. Designers should consider how the information hierarchy affects page scanning and overall readability to ensure that the message being presented is clearly communicated. The use of intuitive user interface elements will ensure that intended interactive behaviors can be easily anticipated and deliver the expected results.

Case Study: Rich and Skinny excels in delivering a completely immersive experience. The use of video and sound throughout the site, especially on the “catwalk” of the category page, reproduces the nuances of a personal, in-store shopping experience. All the elements combine to put the customer into the site, delivering presentation that goes beyond mere passive viewing.

3.  Structure: In our packaging discussion, we defined structure as the framework that supports and organizes the messaging and presentation. In our online world, structure speaks to the underlying site architecture and navigational systems that support site content and facilitate intuitive movement from one area of the site to the next.

Case Study: What’s great about Rich and Skinny is the navigational system. While the site architecture itself is fairly simple, the metaphorical system of the navigation continues to tell the story of the Rich and Skinny lifestyle. Customers select models in a dressing room, or “enter” rooms of the R&S house to delve deeper into the brand.

4.  Brand Artifacts: A product’s packaging may itself be a brand artifact, an object that is in itself compelling enough to notice, preserve, and collect—how many readers have saved your various iPod boxes? An interactive experience may provide tangible brand artifacts—a desktop wallpaper for downloading, a song of the week—or intangible ones, such as the lasting impression of the overall brand experience that causes you to return to the site or share the link with a friend. And these intangible effects are the most intriguing. As we design, we must actively think about the opportunity to create branded artifacts as we ask ourselves, what is the lasting effect that our customers take with them from this experience?

Case Study: The overall experience across the Rich and Skinny site creates a lasting impression that the customer takes with them after they leave. The story of the brand is so vivid and the shopping experience itself is so much fun that traditional ecommerce sites feel slightly disappointing after spending time on Rich and Skinny. R&S does carry its presence onto Facebook and Myspace (as additional artifacts), but it is the brand impression on the site itself that carries the most impact as an artifact of the experience.

We have reviewed several principles of packaging design and applied them to the practice of interactive design. It’s a slightly different approach to thinking about how we approach the design of a page, a web site, or an application. But, as we endeavor to think critically, we must move between physical space and virtual space in our design thinking. And in doing so, we utilize design principles that are essential to successful communication in any context or media.

We couldn’t get the package open.

Mom tried. I tried. No dice. Pliers were used. Even larger pliers were used. Finally, with a mighty tug, I yanked off the package’s lid—and in the process firmly socked myself in the eye.

So, what’s going on here? I wondered. This particular incident stayed with me because I remember how immediately I noticed the product’s packaging, and how it instantly made an impression on me. But I didn’t notice any obvious indicators of the inherent difficulty—or the black eye—that the packaging held in store.

What I did notice was that Oil of Olay stood out clearly on the store’s shelves. Amidst a sea of products, this new packaging was a success. An obvious “eye-catcher,” the clear material, bold, graphic colors, and sculptural design imparted feelings of a premium, luxury product, elite enough to appeal to older customers, edgy enough to attract younger customers. That’s pretty powerful stuff: if package design has the potential to assure and attract a wide age range as well as 1st- and Nth-time users, it has achieved success.

I reviewed Oil of Olay’s package design. In doing so, I identified four factors that are essential to successful packaging:

1.      Messaging: The content, point of view, and/or brand message to be presented.

2.      Presentation: How messaging and content are formatted, stylized, and presented.

3.      Structure: The framework that supports and organizes the messaging and presentation.

4.      Brand Artifacts: Any tangible or intangible brand impressions that last beyond the initial interaction with the packaging and product.

Put together, all four of these factors comprise the vehicle by which to deliver a product to its intended audience. Or, more simply put, that’s the box that my Oil of Olay stuff came in.

But it’s more than a box! This is the point of entry through which a customer will engage with a particular brand, experience their product, and ultimately decide whether to purchase and (hopefully) return to the brand again faithfully.

And herein lies my key complaint: Oil of Olay may have designed what appears to be successful packaging, but it is in fact a huge barrier to entry.

I may like what I see, but I literally can’t get at what I really want—and that’s the product lurking behind all this damn packaging! The method of presentation has created an obstruction that impedes the fulfillment of my original goal. And, in turn, what type of “brand artifact” does this experience create? What is my lasting impression of my experience with the brand? It’s not a positive one, I’m afraid: I’m left thinking, “I’ve had enough of this, let’s go check out the other brand at the end of the shelf.”

This physical experience easily translates into the online realm. The four factors that comprise the elements of packaging design also serve as key principles that must be considered when designing an interactive experience.

Tomorrow, we’ll present Part 2 of this article and discuss how the factors of good packaging design are translated into principles for interaction design…check back then!

“Mariano is looking for companies that specialize in 3D Computer Graphics.”

Literally, within a few seconds, I received many great suggestions for companies to explore via wall and email messages.  Not too surprisingly, Facebook was a great proxy to crowdsource and gather information. The recommendations felt more credible because they were from my friends and at the same time, using Facebook illustrated the power of accessing an extended network when looking for advice or new information.

As an experience designer who thinks a lot about how users shop and make purchasing decisions, this “mini” experiment was very interesting.

Many online shoppers seek out answers to similar subjective questions using value based words such “best”, “worst” or “great”.  Certainly, users can take advantage of user-generated content or star ratings found on many recommendations and e-commerce sites.  However, these sites fail when a user has a more esoteric question like: “What should I buy my girlfriend for valentines day?”  To answer a question like this, you would need to know things like:

• What is your budget?
• What are your girlfriend’s interests?
• How long have you been dating?
• etc…

Thus, what is missing from online search and reviews is the personal nature of the information received and the relevancy of the recommendations specifically to you and your situation. Receiving recommendations and answers to a question directly from your friend as in my Facebook example adds an important sense of credibility and trustworthiness to the information received that can have a dramatic effect on how decisions are made.

In addition, interestingly the people who responded to my Facebook message were not my close designer friends but rather acquaintances who I speak with occasionally (Friends of Friends and reunited high school friends).

This a great example of Mark Granovetter’s well know social theory on the spread of information known as “The Strength of Weak Ties“. At a high level, the theory asserts that people with a collection of acquaintances in varying social circles (weak ties) will have greater exposure to new information and ideas than people who only socialize with their close friends ( Strong ties). Intuitively, this makes sense. If you only talk to the same people about the same things, not a lot of new information will be passed along. However, if you have a lot of acquaintances that are in different social circles you will have a greater opportunity of learning something new.

Thus, social networking sites such as Facebook, My Space and twitter are great tools that allow access to a wider network of people that can lead to new ideas and information. Although, close friends (Strong ties) will certainly have a stronger influence on the decisions that shoppers make, these looser connections can provide bridges that allow shoppers to learn about new products and trends. In the end, a shopper can access both their strong and weak ties to sift through the vast amount of information on the web to ultimately make more informed purchasing decisions.

Some interesting recent Social Search examples and sites:

Social Search engines:
Yahoo! Answers, Mahalo, Stumpedia, Wikia Search, Qitera, Scour,  Rowdii, Eurekster, Baynote, Delver, OneRiot and SideStripe.

Buy.com
Buy.com allows users to to twit about any product in their catalog. Clicking the link adds the following tweet to your twitter page:

“Looking at Western Digital 500GB My Passport Essential USB 2.0 Portable Hard Drive  Cool S (http://tinyurl.com/buytwit/…)”

Aardvark (Vark.com)

Lastly, a few weeks ago I went to BayCHI to hear Rob Spiro talk about a new Social Search product called Aardvark that is embedded within your IM chat client. Users ask Aardvark a question and then Aardvark sends that question to individuals in your IM network that it has determined can best answer that question.

The strength of this product is that it takes advantage of the strength of weak ties by accessing not only your friends but friends of your friends when you ask a question. In addition, because Aardvark is a proxy between you and your friends it helps lower the associated cost (social capital) of asking your friends for suggestions. The software is in beta, but it will be very interesting to see how this product progresses.

Every week the IxD (Interaction and User experience design) team at Fluid gets together and discusses new ideas, current trends in our field, best practices, design patterns and anything that we may have on our mind that relates to design.

This week Dave, Director of Information Design and Usability,  challenged us to think about the following:

“I’ve been thinking about findability and discoverability (especially since I started thinking about interactive merchandising as casual gaming), and I am increasingly convinced that findability and discoverability are distinct attributes of web content, though I am not entirely clear yet (conceptually) where they are similar and where they overlap.  Initially, it seems like this:

Discoverability – more about fun, content is “hidden” and meant to be found, the content is non-essential to the experience, finding the content may be surprising or unexpected, finding the content is often pleasing, tends to be more of an exploratory and individual/independent experience

Findability – more about usability, content is more likely to be important or essential to the experience, users may seek or need the content, content may not be immediately visible but is not hidden, easy to find, users probably guided to the content with labels and directions, tends to be more of guided or directive experience with help from the UI

I’d like your thoughts and ideas on this: “

The team’s response to Dave’s questions are listed below:

Andrea’s Response:

My knee-jerk reaction is that discoverability, while more pre-disposed to being fun, is inherently about learning and intuition. Findability need not be anti-fun, but it is inherently about efficiency and being clunk-you-over-the-head obvious.

Discoverability, at its core, should play off of previously learned behaviors and patterns of interaction. when I go to a new bar, I’m pretty sure the loo will be in the back, because that’s where it was in the last 100 bars I went to. Discoverability recognizes the frequency and need in which we rely off of our intuition. In doing so, we may learn a new task more easily if we are able to relate it to a previously learned task. When we recognize similarities, we feel at ease. We anticipate what comes next and finally we begin to recognize differences between the old and the new, again increasing our learning.

Findability, one might argue, exists–in the most extreme sense–in lieu of intuition. I’m not saying discoverability and findability are absolutely orthogonal, but there’s certainly an inclination. If one assumes that there are no similar, previously learned patterns, or one is lacking intuition, findability ensures that one can still complete the desired task. If I am a teetotaler and I’ve never been to a bar before, I might have no idea that the loo is usually in the back, but if I wander around and see the restroom signs that are clearly marked; I know I have found the loo. Findability is the “clunkingly obvious” factor.

In my examples above, I don’t mean to suggest that findability is boring, or can lack delight, fun, or, more importantly, persuasion. From a content perspective, the authoritative tone of brand and persuasion should probably be the most findable parts of a web site. I think persuasion might be more essential in findable content, whereas it is more easily a “nice by-product” of discoverable content.

What’s interesting in the storytelling article is that the author gives us a bunch of examples of storytelling, but I think she could have gone a bit further and gotten more granular.

For example, when I am designing a web page/site/interface, I think of the features on the page as characters in a story. Kind of like playing with Barbies, you grab a bunch of features, put ‘em together, throw ‘em around, and see how they interact with each other…then you place ‘em where they make the most sense in the arc of the story you’re trying to tell. Some features are main characters, some are supporting, and you’ve got to work with that. of course, the user is a character as well; i’m just sayin’, the user is not the *only* character.

The best example of this is Jones’ example about the benefit of unread content and the mini cooper web site. Jones mentions that mini creates credibility through the presence of its company history. let’s say that “features and specs” about the mini are a character and “company history” is a character…for the purposes of this story, “features and specs” are the main character, but “company history” is a supporting character, and “he” is still pretty important to have around. we might not pay a lot of attention to him, but his presence (here, findability) on the page lends credibility to the brand. Craft your story (and your interaction design) from there.

Paul’s Response:

Since the subject has a lot to do with storytelling, I wrote this like I was telling a story.

“Choose Your Own Adventure: Findability vs. Discoverability”

It’s no longer enough for users to be able to find your site, and then find what they’re looking for once they’re there. Now, they have to enjoy the experience — and, if possible, participate in it.

It’s helpful to think of this in terms of two different types of users: the Finder and the Discoverer. The Finders know what they want and where they’re going. They may have already formed a mental map of how to get there, and a web site’s success may depend on its navigation and search matching the user’s expectations. Discoverers are less linear. They want to explore, and be entertained and surprised along the way. They may not know exactly what they’re looking for, but they feel it. For discoverers, it’s as much about the journey as the destination.

One way to think about how to engage both types of users is through use of the Story. At Fluid, we always try to use a narrative structure to explain our work and vision to the client. In essence, we try to keep the customer’s story as the guiding theme across all our deliverables and presentations. So, what kind of story are we going to tell the Finder versus the Discoverer?

Think of the Finder in terms of the shopping funnel. It’s a short story or a haiku. The Finder wants to get to the end as quickly and easily as possible. They want to get from point A on the home page to point D in the shopping cart, with brief stops at a category, index and detail page along the way. It’s hard to avoid the spatial metaphors, but it’s not just three-dimensional. Time is also a factor. The finder already knows what they want and doesn’t want waste a lot of time getting there.

In contrast, the Discoverer doesn’t want a short story, they want an open-ended Choose Your Own Adventure book, or maybe movies on demand. Instead of trying to speed them along a linear path, our goal is to keep them interested, and moving, as long as possible – until they realize they’ve come to the right place. The Discoverer is sticky and needs a sticky site. The Discoverer can be either passive, wanting to be entertained, or active, wanting to have more control over how they move through the site, and even interact with it. The Discoverer needs more lateral and contextual relations between content, and not just the basic linear site navigation.

While we’re on the subject of stories, user-generated content is a way for users to make themselves part of brand’s story. For example, user reviews are a way for customers to share their opinion of a site or a product. It’s a way for Discoverers to leave a sign that they were there.

One area where the Finder and Discoverer types may overlap is in social shopping. Just as many malls and stores aspire to be social spaces and not just a shopping destination, the Finder can become a Discoverer by bringing in a friend who may encourage them to look outside their original goal and try something new.

We need to design web sites that engage both types of users, and take into account that most users are a combination of the two. It’s not so much that these are different types of users, so much as they are different types of search strategies or behaviors. We need to give the right level and amount of content in the right time and place, with clear paths to more: more depth, more range, or more similar (moving up and down in granularity, or horizontally through relationships). The key seems to be choice: giving the user the ability to choose how they move through the site rather than forcing them into one path, but not so many choices that the user becomes paralyzed or lost.

The choice on which approach to emphasize will vary by client. I think findability is more important for large-scale retail sites, whereas discoverability is more important for brand sites.

My Response:

First, a user’s browsing/searching behavior is never linear in nature. I don’t feel that the typical use case is that a user will come to a site looking for a specific very granular piece of information. Rather, I am more inclined to think of a user’s browsing behavior in regards to what some researchers are calling berrypicking”.

The “berrypicking” model has two main points. First, as a user searches for information they are constantly learning from their search/browse interaction and thus the nature of their search is constantly changing and adapting directly from the information they are discovering. Thus, through the process of browsing their search goals may be constantly changing from their initial intent. Originally a user may have been interested in findability and then upon reading something new, their goals may have changed to discoverability. (and vice versa.)

The second point is that a user’s informational needs are not satisfied solely through the finding of a set of documents or results. Rather, the main value of search exists in the accumulation of bits and pieces of information along the way. (i.e. Life is a Journey, not a destination) . This second point made me think about the design principle of providing alternative interfaces for both novice and expert users. It seems to me that a well designed interface should be able to support the needs of both findability and discoverability. Thus, as the users informational needs change a well designed interface will provide opportunities to dive deeper into a subject matter or discover a related item. I think a good example of providing an interface that is useful for both for novice and expert users is the TED home page. www.ted.com A user interested in finding a specific talk can reorganize the page using the list format or access the search box, while a user more interested in discoverability can browse the content by interacting with the images or browsing filters on the page.

In addition, I was thinking that the granularity of the information being presented is directly correlated to findability and discoverability. I don’t necessarily think of discoverability as content that is “hidden” and meant to be found, but rather it is content that is more abstract in its presentation and subsistence. (i.e. A related item link, Or a short blur about sustainability with a link to learn more.) In addition, when I think of findability, I think of content that is more complete and concrete in nature. (i.e. product details page, a technology details page, or an article page).

Thus, as a user bounces back and forth between findability and discoverability, what changes is the level of abstraction of the information being presented. Low level of detailed information will lend its self to findability while high level of detail will lend itself to discoverability.