Flog: The Official Fluid Blog

Based upon our work with leading brands like Timberland, Design Within Reach and Reebok on their custom product offerings we frequently field calls from potential customers looking to either start a custom program or to evolve their existing offering. In many cases these are customers looking to move from first generation (often hard-coded and rigid) technology to a system business users can update (without a PhD in computer science from Stanford).

There are a lot of challenges associated with selling a configured product. Many of these are outside the scope of what we normally do at Fluid. But the custom product business is challenging and specialized enough that we have developed a deep understanding of much of what it takes to get a custom program running, whether it is part of our traditional offering or not. In this post I’ll explore a few of the considerations many people fail to keep in mind as they embark upon a custom program. In a subsequent post I’ll discuss Fluid’s product and services offering and how it is designed to address many of these challenges.
A few of the frequent stumbling blocks we encounter at Fluid include.

• Getting the product built: This seems like an obvious one but you’d be surprised how often we spend time talking to customers only to learn they haven’t thought through this specialized manufacturing process. While most of these people have an existing manufacturing business few take into account the challenges of taking a factory (and it’s employees) designed to mass-produce items by the hundreds of thousands and produce items one at a time. Doing so efficiently and reliably should not be taken for granted.While this topic is outside the scope of both Fluid’s skillset and this post, it is frequently the point many companies’ dalliances with custom products end. It’s that little detail - actually getting the product customers order built and shipped to them in a timely manner - that trips them up. (NOTE: for those of you considering a custom program we have a handful of companies that specialize in this type of manufacturing that we can point you to)
• Accepting orders in your platform: Next, there is the processing of orders through the customer’s ecommerce system. In the same way that many factories are designed to produce standard products not custom ones, many ecommerce systems are designed to produce products that can be represented by standard SKUs (style-color-size). After all, this is what happens for about 99.5% of all ecommerce transactions.Accepting an order for a product with as many customizable attributes as on Reebok Custom (up to 30 on some products) that can come in more than 9,000,000,000,000,000,000,000,000,000 different variations is simply not something the typical ecommerce system is designed to do. Some do it more gracefully than others. At Fluid we have successfully integrated with Demandware, GSI and GSI’s Aspherio as well as home grown systems and have investigated many, many others. We can help you understand what to look for when evaluating if your platform is a fit.
• Shopping cart: Allowing customers to gracefully move from product configuration to checkout (And back!Customers are rarely 100% decisive and may want to return to a design and tweak certain aspects of a design, especially when configuring 6 or more attributes) and see their product, as they configured it, in their cart is an important part of the conversion process. Does your shopping cart support custom products? And if there is a way you can wire it together and make it work, is there an easy way to re-enter the configurator?
• Integration into the site: Many manufacturers treat custom products as “special.” And they should, custom products typically engender positive customer perception, generate brand attachment and sell for a premium. But by treating them as special they are too often relegated to a separate part of the site or even a micro-site. This makes them difficult to find and the outcome is lower traffic, fewer sales and a disintegrated experience. Timberland is a brand that has done a nice job of integrating customizable products into the main shopping experience, increasing visits and sales.
• Reporting: Given all the challenges associated with accepting orders and getting your product built, is it any wonder people rarely think of how they’ll understand what people actually buy? And frankly, when we ask customers what they would look at if they were able to see reports, the answers are not resounding. Since every order is different there would be very few commonalities in configuration. But looking that most frequently ordered color on a per-attribute basis and a few other reports can be a very valuable tool. The value of reporting and measurement should never be overlooked as we try to build measureable, constantly improving ecommerce offerings.

If this whole thing sounds overwhelmingly complex, there is hope! It has been done many times before (it gets easier every time). While technology may not have progressed to the point just anyone can set up a factory and build-to-order, increasingly brands are experiencing success with their custom programs. This success can take the form of improved brand perception, higher customer engagement and, most importantly, increased revenue by offering custom products. Also, technology is catching up. In my next post I’ll go into more detail about how Fluid helps customers deliver award winning (SXSW, Webbys etc.) product configuration experiences.

In the mean time, please feel free to contact us with any questions about getting your custom program off the ground.

As a company exclusively focused in online retail it is important for our employees to stay abreast of the latest developments in the industry. One problem we ran into was asking all our employees to subscribe to a variety of news sources. Some had RSS feeds, some news came via email and others you had to remember to visit their site regularly.

To ensure everyone at Fluid is on top of the latest ecommerce news an engineer created an aggregated news feed from a variety of the leading industry publications including Internet Retailer, Ecommerce Times, Clickz and Storefrontbacktalk.com. People at Fluid love it so much, we’re making it available to our customers, partners and anyone else that is interested. If there are other ecommerce news sources you access regularly please let us know and we’ll do our best to add them.

If you’d like to subscribe, please use the link below. If you run into issues let us know (some sources come through better than others) and we’ll try to clean them up.

http://pipes.yahoo.com/fluid_online_retail/ecommerce_industry_news

The Get Elastic blog had an interesting post last week on American Eagle’s (http://www.ae.com) incorporation of product merchandising elements within the drop down layer of its product catalog navigation (http://www.getelastic.com/merchandising-in-navigation). As the Elastic Path folks point out, it’s an effective technique for surfacing more product content without a click or a separate page view. It also obscures a lot of content and can impair overall site usability.

The technique inspired a lot of discussion at Fluid. Our typically crotchety CTO had this to say:

“I find it mildly interesting, but more of a distraction than a benefit. When I use navigation, I typically know where I want to go or quickly want to scan the options. It’s like going into a Macy’s and seeing a big ad for something random on the floor index when I’m looking for shoes. Really? Do you really need to distract me there as well? Maybe I’ll forget about buying the shoes altogether…”

While our Director of Information Design countered with his own take on balancing the needs of the retailer with those of the audience:

“I think that American Eagle’s implementation could be improved, and I agree that the size of the banner distracts, but I also think there is great value in merchandising like this. It’s definitely possible to do something less obtrusive and more integrated - a more natural extension of the navigation rather than an additional banner tacked on. There is a definite business potential here for popular online retailers who can get manufacturers to pay for placement like this, with the benefit of getting their product and brand recommendations in front of more eyes. Taking it one step further the retailers, in turn, could use this incremental revenue to keep shipping costs low or free.”

And finally, from a member of the design team:

“I agree that this is really interesting from a merchandising point of view but the UI is super busy and visually just taxing. It would be interesting to know if people are actually clicking through on any of these and how it’s effecting their overall site conversion rate.”

Personally, I agree - the UI is busy and ultimately distracting. But I am also not the target consumer. That would be teenage boys and girls, for whom I suspect visual clutter and informational density is a plus. Not to mention the “Hey, I wasn’t expecting that! Cool!” factor.

An interesting article ran in this month’s issue of Stores Magazine that talked about The North Face’s interactive marketing efforts, specifically the work they have done with Google Gadgets and Google Gadget Ads (more on that in a later post).

The spirit of what The North Face is doing is something a lot of brands are considering and is captured by the following quote from Kent Deverell, a founder of Fluid, “…in the last year and a half, with the rise of social networking, consumers are becoming content-creators themselves. The new paradigm is to get people involved and allow them to own the brand.” Scary stuff. But is there really an alternative?

Conversations about your brand are going to occur online, like it or not. Postive or negative. Isn’t it better to facilitate the conversation than sit idly by while it swirls around you? The North Face has been forward looking in many ways. By embracing the convergence of professional content, user generated content and product merchandising in their WWW and widget strategy they show they are continuing to engage brand advocates in new and interesting ways.

We look forward to more exciting ideas from Sarah Gallagher and her team!

In reviewing the style guide for a client, we realized that Photoshop and CSS use different units for controlling the tracking and leading for text. So, how do you make sure that the typography on the site that’s built matches the designer’s intent as closely as possible? You could tinker with a simple HTML file and play with the CSS styles until they match the PSDs, but that could be tedious.

Fortunately, Doctor Hogue did a bit of research and found some simple conversion formulas. Thanks Dave! We’re posting the information here for reference for anyone who may need it.

TRACKING & KERNING

“Tracking and kerning are both measured in 1/1000 em, a unit of measure that is relative to the current type size. In a 6-point font, 1 em equals 6 points; in a 10-point font, 1 em equals 10 points. Kerning and tracking are strictly proportional to the current type size.”
Source: Adobe LiveDocs
———————————————————————————
Tracking Conversion CSS “letter-spacing”
———————————————————————————

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em

———————————————————————————

LEADING

“The vertical space between lines of type is called leading. Leading is measured from the baseline of one line of text to the baseline of the line above it. Baseline is the invisible line on which most letters sit—that is, those without descenders.

“The default auto-leading option sets the leading at 120% of the type size (for example, 12‑point leading for 10‑point type). When auto-leading is in use, InDesign displays the leading value in parentheses in the Leading menu of the Character panel.”

Source: Adobe LiveDocs

Estimating the value of design, particularly customer experience design, and the potential impact on conversion rates and revenue has always been difficult. It often requires making comparisons to past quarters or past years or simultaneously running different versions of the same site (e.g., traditional A|B testing), and it can be complicated by marketing campaigns and changes to advertising techniques and budgets than can alter the flow of traffic to a site.

The clever folks over at Teehan + Lax, a user experience consultancy based in Toronto, Canada, decided to gamble with $50,000 dollars of their own money to test a theory: companies that invest in customer experience design will have better revenue, greater customer satisfaction, and therefore perform better in the stock market. They selected 10 companies that are known for the use of experience design on their sites and held their stocks for 365 days, then they looked at the value of their UEX portfolio relative to the broader market indices. Their portfolio did very well:

“In the 365 days we owned our stocks the value of the portfolio increased 39.37%. This outperformed the major indexes (NASDAQ 18.09%, S+P 9.47%, NASDAQ 100 26.81%, NYSE 14.67%).”

Designing for the customer experience is not just for the good of the customer, it is also for the good of the company. Designing great customer experiences definitely has measurable value.

http://www.uxmag.com/strategy/327/investing-in-ux

Today Fluid announced the immediate availability of Fluid Social, which allows retailers to offer the same level of interactivity and control in social networking widgets and Google Gadget Ads as they have over the merchandising on their own site. While there have been a recent flood of announcements about retailers deploying widgets to social networking sites this announcement is notable in that this is the first productized offering that allows merchants to publish and update gadgets as they see fit, using the same visual assets and interactive technologies that they use to merchandise their own site. No longer will merchants worry about a gadget that was embedded months ago featuring products that are no longer in stock. They are in complete control of both the featured content and products.

The specific implementation for The North Face is available for users to embed as a Google Gadget and is also being served to highly targeted snowsports sites in the Google ad network. The gadget offers a mix of brand experience - a fresh snowsports-focused video each day that is user contributed or one that features The North Face’s athletes - and interactive shopping. While shoppers watch a video they can explore The North Face’s Defy line of snowsports gear, including the ability to interact with the products.

At Fluid we believe this merging of compelling brand content and merchandising is one of the under-utilized opportunities available to retailers and branded manufacturers. Allowing brand advocates to enhance their own personal pages with this content is a win-win for consumers and brands. We have already heard a range of great ideas from our other customers for how they plan on using our tools to extend the reach of their brands beyond their online stores in unique and brand appropriate ways and we can’t wait to hear more.

The North Face gadget features a fresh video every day.

Shopppers can explore The North Face’s Defy product line while watching the video, without leaving the site they are visiting.

It is possible to explore The North Face’s products from within the gadget using Fluid Retail’s interactive components.

As web sites and web applications become increasingly complex, they are also becoming decreasingly static. Web sites no longer present themselves as passive, static blocks of text and images. They move on their own and in response to user actions in order to:

• Capture attention (e.g., animated banner ads)
• Provide feedback after user actions (e.g., mouseover and on-click states)
• Provide deeper levels of information and facilitate understanding (e.g., infographics that illustrate complex data, such as planetary orbits)

Unfortunately, too much of this animation and motion is gratuitous and does not serve to enhance the user experience, and in many cases it actually distracts the site visitor. Usability professionals often encounter test participants who use their hands (or even sticky notes) to cover parts of the monitor where animated banner ads appear, because the ads attract their attention and distract from the content they are trying to read.

The animated GIF for banner ads that annoyed us for years before declining are being replaced by slicker Flash ads with embedded audio and video, elaborate animation, and even interactivity. Additionally, web sites and applications are using more motion and multimedia to add value to content and attract attention. In some cases the result is a sensory cacophony that overwhelms visitors and reduces the quality of the user experience.

Is animation bad? Should motion and multimedia be avoided? No, but we do need to consider when, where, and why we choose to use it. Animating a logo or image or infographic simply because we can is gratuitous. There should be value and improvement to the user experience, and the animation should support and enhance the content and goals of the site. Here are some basic principles for effective motion graphics and animation:

1. Remember: motion attracts attention. Using too much animation and motion on a single page results in competition for attention and often frustrates visitors. If you choose to use motion to draw attention, give the visitor control and the ability to stop the motion if it distracts them from their goal.
2. Animated graphics are only better than static graphics when they make it easier to understand complex information by being more visually explicit.
3. The content and format of a graphic should closely correspond to the content and format of the concepts and information to be conveyed (also known as the Congruence Principle.) For example, it is more difficult to understand the variations in the stock market looking at tabular numeric data than by looking at diagrams of value over time. Animation adds the ability to include changes in time and space in a more visually explicit way.
4. To be effective, animations need to be correctly understood by the viewer (also known as the Apprehension Principle.) Animations are often too complex or move too fast to be accurately processed and understood by visitors. Make the animation interactive, and give visitors the ability to pause, rewind, restart, and even control the speed or flow of the animation so that they can better focus their attention and thinking on the important and more complex portions.
5. Avoid clutter and unnecessary complexity. Provide enough information and visual cues to help the visitor understand, but do not include extraneous information or design elements that may confuse or distract.
6. Be organized and focused before starting to create the animation or motion graphics. Write a script, create storyboards, and have a plan to convey the information in a concise and focused way, otherwise you may wander away from the goal and include unnecessary information and/or steps.
7. Use the animation to tell a story. A coherent narrative helps visitors better understand the information in a meaningful context.
8. Support animations and motion graphics with corresponding text. Do not assume that the animations are sufficiently explicit to understand without supporting information. If you are using audio to support the animation, give the visitor the ability to control playback and volume.
9. Consider using visual metaphors to help visitors better understand complex information and concepts and to reduce ambiguity.
10. Avoid design myopia. You already understand the information and concepts, therefore your animation and motion graphics design will make sense to you. Show the animation to other people, test it with your target audience, and evaluate whether or not they understand it correctly. What seems obvious to you may be less so to others.

As retailers brace for the possibility of a significant slowdown in consumer spending, ecommerce managers should be prepared to articulate to management why this is exactly the wrong time to be cutting online retail investments. A recent article in Internet Retailer drives home the point:
http://www.internetretailer.com/dailyNews.asp?id=24807

The article outlines a powerful argument in favor of investing online. While offline sales were off by 0.4% versus a year earlier, online sales are up about 22%. While bad weather was cited as a reason, online’s imperviousness to factors such as bad weather and high gas prices only reinforces that the online channel is the place for retailers to invest.

Looking forward, whether the consumer credit crunch has an impact on consumer spending or not, retailers can expect to see double digit growth in online sales. And with growth like that the online channel is still definitely the place to invest.

Apple has rolled out a wonderfully innovative and deceptively simple approach to search on apple.com. As you begin to enter your search term a dropdown window appears below the search box with recommended matching results. As you continue typing, the results list dynamically updates with a refined list of results that most closely matches what you are typing.

There are never more than eight results, and each is accompanied by a clear title, brief descriptive text and either a product image or recognizable icon (a green plus sign in a white circle for support topics, for example). It’s instantly scannable and completely non-intrusive. Most importantly, the performance of the search is impressive. Over a DSL connection it updates in nearly realtime, just a split second behind what you are typing. There is a rarely a lag, and good thing because the experience would fall part if there was.

If you hit enter at any time, you get dropped into a typical search results page, but that was hardly necessary. For 90% of the search terms I tried I was able to find what I needed without ever leaving the homepage. Combine that efficiency with a compelling, quality visual presentation and you have incredibly satisfying customer site interaction experience.

Quite possibly one of the best site search innovations since parametric filtering.