The Official Fluid Blog

The other night I let my son configure a pair of Vans slip-ons for his 6th birthday. Watching him and his 3 year old brother navigate the process was informative. Two key things I observed:

• 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.

At Fluid we’ve delivered some interesting work in the past: Timberland’s Build Your Own Boot Studio (BYOB) was a breakthrough in product configuration, offering instant color change and the first rotation of a custom product. Reebok built upon this by allowing two axes of rotation as well as allowing shoppers to configure a product on a lifestyle photograph. The recent launch of the new Vans configurator, is one of the most exciting client launches during my time at Fluid.

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.

A key aspect of Fluid’s user-centric design approach is to engage in usability research early on in the design process. One key element of our approach is to administer usability tests using interactive low-fidelity prototypes. Throughout the years, Fluid has developed a unique technique of developing richly interactive prototypes by adding HTML, CSS and JavaScript within Adobe Fireworks to create click through prototypes that are easy to use, manage and update.

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

Social Design Principle #4 – Participate in Active Listening

Utilizing social design principles to improve a customers shopping experience has the potential to bring tremendous benefit to a company and its customers.  However, no matter what conversations take place, there are two key components essential to the fourth principle: active listening:

• Maintain your commitment to having conversations – companies must be dedicated to maintaining their social channels to keep content fresh and new.
• Admit your mistakes, and do something about them – part of having authentic conversations is being prepared to accept negative feedback and to do something about it.

Maintain your commitment to having conversations.
Social Design is only powerful when the content is new. Customers will not participate in a conversation if there are very few others or if the thread is old.  If there is little or no activity, then people are not likely to participate.  Therefore, companies must be prepared to maintain their blogs, video and photo galleries, Twitter broadcasts, Facebook groups, and whatever myriad of social technologies they choose to pursue.
More importantly, companies  need to mean every word they say.  If a company promises to modify a product or improve a service in response to an upset customer, they must do so. Engaging customers then failing to follow through and deliver on those promises damages the company’s brand, reputation, and credibility.

(more…)

Social Design Principle #3 – Appeal to the Unique Individual

Social Design can recommend products in a smarter, more relevant way that appeals to your customers’ unique individuality.  It is more powerful to present a customized list of items “We think YOU will like…” rather than simply presenting “Related Items.”

Previously we discussed the value of customer reviews as a source of unbiased product information, but in some cases they may be puzzling or less useful to customers. Reviews may have less value when shopping for certain types of products. Books, movies, clothes, and shoes are often reviewed based solely on personal preference. While one person may love a movie, another may hate it.  With this in mind, how do customers find or know what is relevant to them?  Making better connections between customers and products requires a better recommendation system to identify items that will appeal to the unique individual:

1. Personalize the Recommendation– Present recommendations in a context relevant to the individual, and they will be more likely to engage with your products.
2. Build Customer Reputation – Encourage participation by allowing customers to earn a reputation for themselves in the context of the rest of the community.
3. Give users a “Me” page –Give customers a unique space dedicated to content meaningful to their shopping habits. This can be a valuable tool and help inform purchasing decisions.

(more…)

Yesterday, we discussed the key elements of packaging design, including messaging, presentation, structure, and brand artifacts. Using our “Oil of Olay” package as a case study, we highlighted the consequences of the “barrier to entry” that is created when packaging fails. Today, we’ll discuss how the design guidelines for packaging design apply to the practice of interaction design using another case study.

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/).
(more…)

The other day, my mom sent me to the store to purchase a new skincare product made by Oil of Olay. I set out on my errand and procured a small tube of mysterious serum, sleekly packaged in distinctive, sculptural, plastic packaging. When I returned home with the goods, however, we made an amusing and shocking discovery:

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.

(more…)

I spent some time evaluating search boxes and their functionality, trying to come up with a list of best practices in use by Internet Retailer’s (IR) Hot 100 e-commerce websites to determine how these successful sites stand up to my challenge. Having never truly pondered the best practices that one might employ for the familiar white space found on most sites, I came up with a list of criteria and used this list as a framework to quantify IR Hot 100 sites on their best behaviour. Values were assigned to each feature to determine total values overall, where a site could score up to 21 points.

(more…)

Last month, a friend asked if I could recommend any companies that specialize in 3D Computer Graphics. Unfortunately, I didn’t have an answer, but on a whim I updated my Facebook status message with the following:

“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.

(more…)

At Fluid we are constantly tuning our work to deliver the richest experiences without sacrificing performance and download times. To that end, one of our lead engineers, Cody Lindley, put together a great resource on the page weights for the leading ecommerce pages. I wanted to share it here, for everyone’s benefit. (the pages highlighted in yellow are Fluid customers, though in some cases the pages measured were not built by us)