Fluid’s guiding principle as a company is that content, community and creativity together drive commerce. With Torque, we put that belief into action by creating an experience that took the best of Craftsman’s vast amount branded content, added in their highly engaged community of DIY’ers and brand enthusiasts and transformed it into a richly interactive, fully shoppable iPad magazine.

The list of innovative things we did for this app is pretty comprehensive:

• Almost all content within the app is actionable in some way. Whether it’s shopping, signing up for the Craftsman Club, engaging with the brand on Facebook and Twitter, following along with DIY projects, or accessing exclusive videos and articles, the content leads the way
• Using an updated version of Sears eCommerce API, we enabled users to add products to their cart right from articles and content within the app, then checkout seamlessly on craftsman.com
• Live video streams directly from the Craftsman Experience studio, and the app alerts users when the stream goes live
• Social media streams are universally accessible, giving every interaction a potential
• Blurs the line between editorial, branded content and eCommerce
• Content is streamed into the app via a CDN, allowing easier updates without having to release full updates into the app store

How Fluid designed it
Fluid started the discovery process by first auditing all of Craftsman’s existing content as well as their upcoming campaigns and initiatives. We then created an editorial structure and content flow for the app, which is actually much more like creating a magazine for print than creating an “app.”

After nailing down the table of contents, Fluid worked out all of the possible user interactions. This included everything from basic page behaviors all the way down to multiple content interaction scenarios. As we worked on the interaction design and started merging it with our editorial structure, we began brainstorming ideas for an editorial voice and identity. Fluid presented one naming option to Craftsman: “Torque”. Craftsman promptly trademarked the name.

We then began the process of breaking the editorial structure apart into smaller chunks to work on. For content that already existed (like the step by step projects), Fluid redesigned it to fit into the edgier, grittier, DIY-inspired look and feel of the app. For content that needed to be created or expanded, Fluid designed those sections from scratch and provided clear direction and guidance to the Craftsman marketing team so that they could start writing those remaining sections – the most notable of which are the Top 100 and Mystery Car Vault. Our process continued on iteratively until the content for the entire experience was completely fleshed out.

How Fluid built it
On the UX and visual design side, Fluid began prototyping very early on in the creative process. In some of the very first designs presented, we used video layers in Photoshop and exported the files as quicktime movies so that the client could immediately see how both the look and feel and the interactivity worked together.

On the technology side, Fluid’s developers immediately started testing different options for build and eventually settled on using a combination of HTML 5 and Javascript. Structurally, Torque was set up in a way that makes content updates achievable without having to push an update to the app store. All of the content, from videos and images to text, is served via an Akami CDN. In other words, much of the content doesn’t actually live “inside” of the app, so the initial download is very fast and all of the content loads on-demand.

In order to make sure that the eCommerce layer worked seamlessly with Craftsman’s existing system, Fluid worked with Craftsman’s technology team to create new API’s that allowed Craftsman’s “Quick View” to be displayed within the app. Adding items to a cart was seamless via the UIWebView (in-app browser), and checkout was handled by craftsman.com. Once the app was in working order, the entire tech, creative and ux team all spent time working together to test for bugs, optimize, and refine the experience. The final handoff was to the Sears Mobile team, who then submitted the app to iTunes for approval. The app was approved in one weeks time.

Why we think it’s cool
Opportunities like this are rare. Fluid got to create, name, design, and build a branded, shoppable iPad magazine on the hottest technology platform in existence for one of the most well-respected brands in the world. At Fluid, we believe strongly that experiences like this – the ones that merge content, community and creativity in delightful and innovative ways – are the future of eCommerce and brand engagement. We were honored to work with a legendary brand like Craftsman and their very talented marketing team to create a cutting edge product that their consumers are thrilled about.

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 conference focused on designing for multiple screens, the intersection of design and technology, pushing the envelope of user experience, and to bring new, visionary energy to our work. Five very full days of labs, seminars, and sessions provided ample opportunity to learn from the experts, and I am honored to have been invited back to speak in two sessions.

On Tuesday, October 4 I spoke to nearly 170 people about “Making Better Design Decisions by Understanding How People Think.” We discussed how to turn merely adequate experiences on the web into more meaningful ones. People often complete tasks despite the fact that many interfaces seem intent on thwarting us; understanding how people perceive, think, learn, and remember can help us make better design decisions. During the session we identified common UX problems, discussed how people actually think, and showed how to modify the design options (in real-time!) to craft a better user experience.

Also on Tuesday I was a member of a panel discussion organized by the Society of Digital Agencies (SoDA) where we talked specifically about how we leverage the Adobe design and development tools in our day-to-day workflow and processes. Fluid was able to show some of our ground-breaking recent and upcoming work, and the attendees asked great questions about our design, prototyping, and development process. I showed work from the same projects featured in the keynote address, and many people recognized it and were excited to see it in more detail and learn about we brought these innovative customer experiences to life.

On Wednesday, October 5 I spoke to about 70 people about how we use some of our design tools at Fluid on the Experience Design team in my “I Didn’t Know Fireworks Could Do That!” session. We explored some of the lesser known yet powerful features of Adobe Fireworks, an essential design tool that operates with both vectors and bitmaps and can span the design process from wireframe to comp. I showed how we use Fireworks with Dreamweaver, Flash Professional, and Flash Catalyst, as an integral part of our design and development workflow.

Finally, I had the pleasure of sitting down with the talented folks at Nerd Radio and talked with them for about 20 minutes about our work at Fluid, our workflow, and about the exciting new announcements from our interactive merchandising products team that we have begun to launch the latest updates that enable consistent and excellent customer experiences across multiple screens and devices – precisely the core theme of the Adobe MAX 2011 conference!

Overall, the conference was a great success. My sessions were well-received, Fluid’s work was showcased in front of thousands of attendees, and I had the opportunity to meet and speak personally with dozens of talented designers and developers from around the world. Now it’s time to start thinking about and preparing for the Adobe MAX 2012 conference next October!

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.

An article in The New York Times this morning headlines that luxury brands, once wary of the web, are now embracing it. The most interesting piece is on Christopher Bailey, Burberry’s chief creative officer: “…high-end brands should go further in trying to give Web stores the rich texture of physical stores. ‘Whether they are walking into our store on Bond Street or tapping in from India or China, it’s about making sure the consumer is getting the same experience…’”

This resonates. Fluid’s philosophy on designing customer experience is that sometimes it’s good to go outside.

When you do, stop by REI’s Seattle flagship store in Seattle. A 3-story high climbing wall dominates the entry. There’s a rain room, a bike trail, a hiking boot test course, and a JanSport play treehouse swarming with marauding children. The interior design and finish details are rustic and rough-hewn, evoking a carefully architected outdoors experience.

Virgin Megastore in Hollywood has 100+ interactive kiosks that offer as much entertainment value as they do access to inventory. And it’s a great place to see bands. And, of course, there’s always Apple. You get the idea.

The point: these elements of the in-store experience are not about thrusting product at the consumer at every opportunity.

Rather, the objective is to create an “emotional moment” with the customer — immersive, uniquely branded and entertaining. Experiences designed to meaningfully connect with the customer. And, by doing so, foster a deeper relationship with the brand, a gratifying experience, and eventually more sales.

Most online retail sites aren’t especially fun. They are usable, clean and bright. Super functional, searchable, and safe. But compared with real-world shopping, they are sterile. Today’s e-commerce sites are like retail spaces 25 years ago: white boxes, bad lighting, uninspired fixtures. Products are well organized and findable but there’s not much retail therapy happening.

The evolution of the in-store experience will absolutely be echoed in the digital realm in one form or another and then taken further than it can be in the physical world. It is inevitable. The online store will soon be the ultimate “full price” flagship, a store experience fueled by interactivity and media, free from the constraints of square footage and physics.

Proof points: Fluid’s recent launches for Vera Wang Princess and Craftsman Customizable Tool Storage

Whether or not brands are ready to embrace this point of view, consumers are demanding it.

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!

The average person is bombarded with 500-3000 advertisements per day.  With so many ads surrounding us, it is not surprising that people to receive them with distrust and skepticism, “Of course an ad is only going to tell me what the company wants me to hear!

Traditional advertising, as done in the 1940s and 1950s, is more effective when there are only a limited number of brands from which to choose, but as Barry Schwartz wrote in The Paradox of Choice, this is far from the case today.  The industrial age has resulted in hundreds of brands, and social applications are a highly successful technology we use to help us efficiently sift through all of this information to find what is valuable and meaningful.

Amazon.com smartly solved this little problem and became enormously successful by utilizing customer reviews more than a decade ago. Joshua Porter (Bokardo.com) has written some insightful blog articles and dedicated a section of his book ‘Designing for the Social Web’ on what he calls, “The Amazon Effect:”

“Customer reviews allow people to learn about a product from the experience of others without any potentially biased seller information. No wonder everyone wanted to shop at Amazon.  They had information that no other site had: They had the truth.” – Joshua Porter, Designing for the Social Web

Online reviews provide customers with a source of information independent of the seller or manufacture.  There is more credibility in reading a review from someone who was not paid to promote a product.  But what if this person is nothing like me? How do I know if their review is one I can trust? Smart recommendation systems, such as the ‘Movies you’ll Love” tab on Netflix are designed as solutions to this problem. We’ll discuss the issue of how people identify with one another in the upcoming entry  on social  design principle #3, Appeal to the Unique Individual.

Sharing tools are an effective way to get meaningful feedback and allow customers to freely exchange information with friends about products they are interested in buying. Allow your products to be shared on networks such as Facebook or Digg.  Making it possible for customers to involve their social networks in the shopping experience helps inform their purchasing decisions.  For example, last summer I was agonizing over what shoes my bridesmaids should wear for my wedding.   I went on Zappos.com and selected 4 or 5 pairs of silver open-toed shoes that I thought would look good with the dresses, and I saved them all to a wish list which I made public.  I sent my bridesmaids the link via Facebook.  We used Facebook to communicate in a threaded conversation about the shoes.  My bridesmaids voted for two favorites, and I bought a pair of each.  The only bridesmaid who lived near me tried the shoes on for fit and comfort.  We kept the winning shoe and returned the other (with convenient free shipping.)

Reviews, sharing, public facing wish lists, and threaded conversations are social design tools and effective ways to help inform purchasing decisions when shopping online.  However, implementing sharing tools requires the retailer to relinquish some control of the product information on the web site where it is sold.  Retailers are often concerned that negative customer reviews may hurt sales.  This is a possibility, but the benefits of social design outweigh the possible problems.  In fact, a negative review could be seen as potentially beneficial, because it provides valuable insight on ways a company can improve their products and services for the future. Negative reviews may also increase credibility for customers; when reviews are all positive and glowing, customers may suspect that the retailer edits or filters submitted reviews, but neutral or negative reviews create a sense of balance and objectivity.  A proactive company will contact customers who submit negative reviews, engage them in dialog, and ask them to provide additional and constructive feedback.

In the next entry we will further explore how retailers can open effective and productive dialog with their customers when we discuss the second social design principle: authentic conversations.