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/

• My son moused-over every single option for every single product part (not kdding…he methodically moused over every option). This was only possible because Fluid Configure uses client-side technology (Adobe Flex in this case) to do the image previewing, meaning you don’t need a round trip to the server to generate the image.  Using server-side imaging technology this could take an hour or more.
• My 3 year old son asked, “Can we turn it over?” Specifically, even as an observer to the process he wanted to view the product from multiple perspectives. While Vans doesn’t feature the incredible rotation of Your Reebok, but it does show the product from multiple views with great responsiveness.

Overall it was gratifying to see them  quickly grasp the experience, move through the configuration process and take great pleasure from the emails and SMS’s they were able to send letting their family know about the shoes they had just designed. If only the design of their shoes could have been so positive.

The Vans work builds on many of our learnings of the past years:

• Designing a custom product is stressful. One of the biggest impediments to custom product sales has been the inability to get immediate validation on a design in real time. In the Vans configurator a shopper can send a link to a friend via instant messenger (or email). When the user clicks the link they’ll be brought into a collaborative shopping session where they can share design ideas and give feedback in real time. We believe this will not only increase sales but bring new shoppers to the Vans site.
• Product configuration is an iterative undertaking. We’re providing users a simple “Scratchpad” where they can save their designs in progress for easy reference without logging in. With the scratchpad users can save a design with a single click and return to a previous design just as quickly.
• All of this functionality is part of the Fluid Retail product suite, utilizing both Fluid Configure and Fluid Social. This means we’ll be able to deploy the technology faster and more cost effectively for future customers looking to create similar collaborative shopping experiences.

We couldn’t be more excited to share this client work with you…keep your eyes peeled for future deployments of Fluid Social collaborative shopping deployed in support of collaborative shopping for traditional, mainline products.

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

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.

In some cases, catalogers have uploaded versions of their print catalog to the web. While there are legitimate reasons to do this, Fluid’s customers have generally found results from these efforts disappointing. Conversion rates are low, as you would expect from directly translating a print layout to the web. Even with the fancy page flipping affect many of them add .

In other instances retailers have simply taken the existing photo assets and overlaid merchandising text in Photoshop. While this serves the purpose, this text frequently looks cluttered and may significantly lessen the brand impact of the photo. These photos were taken to create an emotional connection between the shopper and a brand or product. Reading text overlays certainly lessens the visual impact and can also distract from the emotional connection of envisioning yourself in the scene.
Other retailers have used these assets as the basis for a richer shopping experience, creating tooltips that appear on mouse over. This is a great use of interactive technology but up to now has been resource intensive to produce. The manual production required to update a banner has required a designer to create the visual and an engineer to wire up the custom Flash or AJAX technology. By the time the banner is integrated into the site it could be a week or more later.

The Fluid Retail team has recently released an enhancement to Fluid Experience that allows retailers to more efficiently use rich brand photography on their site. Using our authoring tools virtually any member of the production team can pull in existing photography, mask out and associate products and publish the assets to the site without need of any technical skills. The whole process can be completed in a matter of minutes.

I’ve embedded an example of the type of interactivity that is possible with Fluid Experience below. Note that shoppers are able to learn about all the products shown, without leaving the photography that has engaged them. Combined with a quick shop window and mini-cart, this type of interactivity encourages the purchase of multiple products.

It is also worth noting that this merchandising component is embedded using Fluid Social’s content syndication capabilities, that allow anyone to take your site content to iGoogle, blogs, MySpace or Facebook.

As I said earlier, the real magic behind the Fluid technology is the authoring tool that eliminates the need to have Flash developers or IT involved in publishing new assets to the site. If you are looking for better ways to engage shoppers with rich product photography you should contact us to learn more.

This is a chance to really build your career working with the cutting edge of technology on projects for top shelf clients. Lead Engineer isn’t just a name we throw around, our leads really are at the forefront of the engineering team. They contribute at every phase of development from concept to launch, leading their team to the successful completion of each project and rave customer reviews.

So if you’ve got a talent for handling responsibility, working with others, and setting technical direction, even if you haven’t been a lead before, we want to hear from you! We’ve got a quick questionnaire to get the interviewing started right off the bat, so hop onto the link below and take the first step into a Dilbert-free life.

One other thing, if you’re not interested yourself but know someone who might be, refer them and get five grand if they get hired. That wasn’t a typo, it’ll be the easiest money you ever made.

Get Started Here: http://jobs.accolo.com/14202

Perhaps more exciting than how the products were implemented into the design is the milestone this represents for us at Fluid. Having top tier agencies like Carat and Molecular utilizing our product technology is a symbol of the exciting growth we’ve seen from a well respected boutique agency to industry leaders in customer experience for online retail.

In developing our products we were confident technology providers such as ecommerce platforms and product search providers would be happy to partner with us. But we had serious concerns (and more than a few heated debates) whether other agencies would be comfortable implementing products whose genesis was largely out of a competitor. These concerns forced us to be incredibly disciplined in developing our products. In every instance we have created a product that is open, easy to implement and completely customizable by our customers and their agencies. And most importantly we wanted to build a product in the truest sense, where our customers and partner agencies can be completely self-sufficient, with no need to involve Fluid in the product implementation (unless our help was desired).

With the launch of Reebok.com, built by world leading agencies using Fluid’s products, we are entering a new era for our products. We welcome any agency to use our products to offer their clients a richer experience they can maintain without any Flash expertise. We expect this will help other agencies build the same sort of engaging experiences Fluid creates for its customers faster and more cost effectively. Contact us to learn how your agency can start using our products today.

The solution, modify Flash’s default publish profile to include a modified HTML template that uses SWFObject instead of the standard Object and Embed tags. Now, when I publish HTML with my .fla files Flash uses this new SWFObject enabled HTML. I was so happy with the result that I decided to package it up into an extension for others to enjoy.

You can find the extension along with release notes here.