The Official Fluid Blog

At Fluid we have been monitoring the popularity and use of the mobile web and mobile applications for a few years, and we have seen the trend toward mobile optimized web sites for general activities and mobile applications for productivity, focused functionality, and brand-specific experiences. Luke Wroblewski recently proclaimed that the mobile web is winning, but mobile applications still have a place and purpose.

(more…)

I had the pleasure of attending the Adobe MAX 2011 conference in Los Angeles this year as a featured speaker, and Fluid was selected to appear in the keynote address for our work crafting customer experiences for multiple devices across channels, from web to kiosks to mobile phones and tablets.

(more…)

A recent article on Advertising Age, “Brands bet on iPad to Expand eCommerce Reach“, discusses how eCommerce sites are looking to the iPad to provide more interactive and engaging product browsing experiences.

(more…)

Almost everyone has heard about and seen the Old Spice videos swarming across the Internet this week, and nearly everyone has regarded this campaign as brilliant, because Old Spice has done something that is very hard to do: they successfully and intentionally created something viral.

How did Old Spice make virality happen?

(more…)

Parametric Navigation…it’s really just a fancy industry phrase for a filtered search, or parameters you can select to filter down results sets. So if I go to widgets.com and search for a widget, the site would present me with options to narrow my widget selection by price or rating or size or color, etc. The overall idea is that I can pick the individual attributes that appeal to me, and come up with a customized list of widgets that meet my specific needs. It’s my preferred search method, so I figured I’d tell you what I think works, and what falls flat.

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.

(more…)

Victor Lombardi, a well-respected designer and educator, recently posted a video on his company’s Smart Experience web site about designing carousels and the three key design criteria you need to know to design carousels well:

1. Carousels work best with images, not text
2. Carousels are great for browsing, not searching
3. Carousels should create a sense of depth and extent, not be flat

Fluid’s recent work for Reebok, the “Reebok Globe” that highlights real customers and shows their designs, was featured in this video as a good example of strong design, not just for its 3D carousel (the “globe”), but also for using nested carousels in an effective way to enhance the customer experience. If you’re interested in Victor’s comments about Fluid’s “Reebok Globe”, skip ahead to 3min 15 sec.

Unfortunately, this carousels video is only free for a limited time, so check it out soon.

The recent re-design of The North Face web site has been featured on Ecommr, a site that identifies and highlights a collection of ecommerce interface and design elements that represent excellent, new, and innovative design.

The new North Face design elements featured are:

• Product listing index
• Recommended items
• Color and size selector
• Rich mini-cart
• Full shopping cart
• Billing and shipping page during checkout

The design of The North Face site contributes to an engaging and rich customer experience, and few of the ecommerce sites featured on Ecommr have as many design elements highlighted, which speaks well to the quality of the design and experience.

This is the second in a series of posts based on my presentation (”Can I get that in pink and eggplant?”) about the future of customer experience online at the Web Experience Forum in Boston on 14 October 2008.

Mass Customization and Manufacture-on-Demand

Customized products are the ultimate in personalization: customers can select from many options for many attributes to create a product that is unique. This level of customization is made possible my manufacture-on-demand processes. Finished products are not stored in inventory to be picked, packed, and shipped – they are actually manufactured when the order is received.

A potential hazard of customization is that it creates more choice, possibly too much choice, for the consumer. Much has been studied and written about the paradox of choice and decision paralysis, but it boils to situations where there are so many options from which to choose that the consumer is overwhelmed, and it is actually easier to make no choice (and abort the purchase) than to make any choice. When customers are presented with many customizable components, each with many configurable options, the number of combinations may be overwhelming. Therefore we need to design customer experiences that help customers get started, make decisions, support their choices, and encourage them to proceed and complete the process.

One way we can craft more inviting experiences is to manage the number of choices people are given and how they are presented. A manufacture-on-demand process does not need to be transparent to the customer – they do not need to know when products are stocked in inventory versus made when an order is placed.

At the discreet end of the continuum, customers never even know that they are ordering a custom product, because the merchant has pre-defined all of the options and choices (e.g., notebook color, binding, and cover image) and presents the product as a ready-made item. Even though the customer makes no choices beyond selecting a quantity, when the order is placed that product is manufactured.

At the limited level of the customization continuum, consumers realize that they are ordering a customized product, but they may not realize the extent to which that product may actually be customized, because the merchant has pre-defined some some of the options (e.g., ink color and envelope interior pattern) but left a few for the customer to specify (e.g., text on the notecard and the font.) The product is still manufactured when the order is placed, but the number of choices has been controlled to make the personalization process simpler and faster.

Finally, at the level of full customization, consumers realize they are are ordering a customized product, and they understand that it will be manufactured just for them when the order is placed. (Curiously, some customers still think that all variations on custom products have been manufactured in advance and stored in a warehouse awaiting selection and shipment when an order is placed, because they may not fully realize the number of combinations possible and that it would not be feasible to make every possible version of a product.) The choices and options are numerous, and the messaging about the product and customization service typically makes it clear that a product is being made just for the consumer according to their specifications.

There are web sites already offering mass customization of products, and we are likely to see more and more as the ability to manufacture-on-demand becomes more widespread. Today, manufacturing-on-demand is often limited to a base set of products (e.g., photo mugs and mousepads) to which a custom pattern, color, or text may be applied, or to products that have manufacturing processes that lend themselves more easily to mass customization (e.g., custom shoes.)

Cafe Press and Zazzle both offer a set of base products from which to begin. Customers then add their own personal touches and select from a few options to create products that are uniquely their own and which are manufactured-on-demand.

Reebok offers full-customization of shoes, and consumers have the ability to design their own shoe selecting from so many choices that there are literally trillions of possible combinations. A unique product is actually possible, and there is no way that Reebok could manufacture and stock all possible variations of the shoes – this is made possible only my manufacture-on-demand processes.

The manufacture-on-demand process and the ability to create custom products also quickly and easily opens up the opportunity for online, digital equivalent of “pop-up stores.” Pop-up stores are temporary physical retail stores that open for a short time in a previously empty location, generate buzz and attention, respond to a trend or community need, sell for a limited time, then close and disappear. Companies that have the ability to manufacture-on-demand could respond quickly to current trends, fads, and styles by pre-defining products, opening a temporary web site, and selling those products either under their brand or as an ephemeral brand. They could offer limited edition products, different products for different geographics regions, or even products that are offered only to existing customers. Once the ephemeral brand has run its course, the web site disappears.

Custom products are more than just choice for the consumer, they are also opportunities for the companies that are able to manufacture-on-demand, who want to differentiate their product offering, and who are able to quickly and nimbly respond to styles, fads, and market trends.

This is the first in a series of posts based on my presentation (”Can I get that in pink and eggplant?”) about the future of customer experience online at the Web Experience Forum in Boston on 14 October 2008.

Video is the next JPEG

Just as static images are seamlessly incorporated into web pages today, we are going to see more seamless integration of video that moves beyond the use of an inline video player. Video will become integral to the content and not be a separate piece of content meant for independent interaction.

In the Harry Potter films, the Daily Prophet newspaper has “magic moving pictures” printed on the page as part of the news article. There is no separate video page and no video player off to the side – the moving pictures are simply integrated into the content of the page.

The Ralph Lauren site Rugby.com integrates video into the page content in a similar manner: the video, the images, and the text all live in the same space as part of a single experience. The brand experience is enhanced and strengthened by using simple yet high-quality video to supplement the information.

Video has the benefit of being able to convey more information than a static image. Seeing clothing on a walking, moving, breathing person tell us much more about fit and finish than a still image on a white background.  We can understand much better how a product might, work, or behave by seeing it in action.

At Martin & Osa the models take turns moving, walking, and turning around to demonstrate how the clothing fits. There is a great nuance to the customer experience: when you select a filter to narrow down your selection, the models wearing clothes that do not match the filter literally walk off the screen. Video is being used not only to show products, but to verify and acknowledge customer interactions.

Video can also tell a story much better than a single image. Would you rather watch a short film or view a single frame from a short film? And the story does not need to focus on the product – it may be used to enhance the brand, to inspire people, and even to set a mood.

The North Face uses video in several ways: demonstrate products in use, educate about the professionals who use the products, show the environments and usages for which the products were developed, and show how the company supports athletes, indigenous peoples, and environmental causes.

And of course video can be used to facilitate shopping, but rather than showing models wearing clothes or salespeople demonstrating products, we can also shop from the same video we see on television and in the movies.

“Shopisodes” take video from popular television programs and provide images, details, and links to buy the products that appear in the video. You can buy the clothes and accessories worn by favorite actors, furniture and decorations from their homes and rooms, and even the items they are using. Each video segment is created to provide information and a link when that product is visible.

Video for product merchandising falls into two categories:

• “Fast” video is meant to be watched like a short film; it provides context and information, and it demonstrates products in use; “fast” video is not clickable, and it is more likely a passive, entertaining experience.
• “Slow” video is meant to provide information while remaining clickable; it focuses on the products and provides ample opportunity to interact with the video while it plays.

Video may also come in a range of quality levels. Low fidelity video has an amateur appearance, may be customer-generated (although professionally produced video may intentionally take on this style), and generally focuses on product information and usage rather than brand enhancement (e.g., product reviews submitted by real customers.) High fidelity video has a professional appearance and may convey a much wider range of information, from product usage to brand ideals to corporate social responsibility.

Although video is becoming increasingly important to the online experience, it is not yet ubiquitous, and there are some issues to be resolved. Video requires much more bandwidth, and although more and more people have broadband access, web pages with integrated video still have longer load times, so visitors wait for content. Additionally, there are still many video formats. Even though Flash Video is perhaps the most common format for inline video today, there are competing formats that offer higher quality video and audio but with a different customer experience, and there are differences across browsers and operating systems that mean that some formats may not be viewable to all visitors.

Nevertheless, the movement toward integrated video is certainly underway, and we are seeing more video being used to provide information and content in more places than ever before. Although we cannot yet walk to the corner and buy a copy of the Daily Prophet, it may not be long before we commonly have similar experiences when browsing the web.

We’ve been using Fireworks CS3 for wireframing and prototyping since May 2007, and it has been an important tool in our overall design process. As interactions on web sites become more complex, we need stronger tools to help us design, demonstrate, and test those designs.

Adobe recently announced upcoming release of their new CS4 design software, and I’ve had the opportunity to work with the Fireworks CS4 beta team for the past year and one-half to help test and refine the new version. As part of their release of the new tools, I recorded a series of tutorial videos for Adobe demonstrating how to use the new Fireworks CS4 to create effective wireframes and interactive prototypes more efficiently than ever before:

Using Fireworks for Information and Interaction Design

Creating Interactive Prototypes with Fireworks

Rapid Prototyping with Fireworks

Fireworks As Part of the Complete Design Process

Each video runs about 10 minutes and covers a different set features of Fireworks CS4 for information and interaction design.

Some of the new features in Fireworks CS4 we’re looking forward to:

• Export directly to PDF and support for interactive PDFs
• Enhanced grids and guides for accurate layout
• Enhanced rich symbols that support CSS / HTML export
• Enhanced styles and live previews
• Improved page, layer, and state functionality
• Improved workflow between Fireworks and Photoshop

These updated tools will help us create better design documents and more interactive demonstrations and prototypes for our clients, and they support the increasing importance of complex interaction design in the visitor experience.