The Official Fluid Blog

At Fluid, we leverage new and innovative technologies to set our clients apart from their competitors.  Recently our clients have been asking about “social” features more often. “Social” is the latest buzz word flitting back and forth in the media, and it has caught the attention of both retailers and agencies . “Social” is a term that carries weight: The numbers we see on Facebook, Youtube, and Flickr are hard to ignore.  Retail companies are now looking for ways to make “social” features work for them, too.

A large part of the fun in shopping is being able to do it collaboratively.  Friends help inform our decisions about what we should buy. They give their opinions on fit, help pick out the perfect pair of shoes, and they are a part of what makes shopping fun.  Unfortunately, this desired social interaction has largely been lost as stores move online, and while the fun one has when shopping with friends cannot be wholly replaced, social design continues to introduce new ways to improve the collaborative nature of the online shopping experience.

(more…)

Every week the IxD (Interaction and User experience design) team at Fluid gets together and discusses new ideas, current trends in our field, best practices, design patterns and anything that we may have on our mind that relates to design.

This week Dave, Director of Information Design and Usability,  challenged us to think about the following:

“I’ve been thinking about findability and discoverability (especially since I started thinking about interactive merchandising as casual gaming), and I am increasingly convinced that findability and discoverability are distinct attributes of web content, though I am not entirely clear yet (conceptually) where they are similar and where they overlap.  Initially, it seems like this:

Discoverability – more about fun, content is “hidden” and meant to be found, the content is non-essential to the experience, finding the content may be surprising or unexpected, finding the content is often pleasing, tends to be more of an exploratory and individual/independent experience

Findability – more about usability, content is more likely to be important or essential to the experience, users may seek or need the content, content may not be immediately visible but is not hidden, easy to find, users probably guided to the content with labels and directions, tends to be more of guided or directive experience with help from the UI

I’d like your thoughts and ideas on this: “

The team’s response to Dave’s questions are listed below:

Andrea’s Response:

My knee-jerk reaction is that discoverability, while more pre-disposed to being fun, is inherently about learning and intuition. Findability need not be anti-fun, but it is inherently about efficiency and being clunk-you-over-the-head obvious.

Discoverability, at its core, should play off of previously learned behaviors and patterns of interaction. when I go to a new bar, I’m pretty sure the loo will be in the back, because that’s where it was in the last 100 bars I went to. Discoverability recognizes the frequency and need in which we rely off of our intuition. In doing so, we may learn a new task more easily if we are able to relate it to a previously learned task. When we recognize similarities, we feel at ease. We anticipate what comes next and finally we begin to recognize differences between the old and the new, again increasing our learning.

Findability, one might argue, exists–in the most extreme sense–in lieu of intuition. I’m not saying discoverability and findability are absolutely orthogonal, but there’s certainly an inclination. If one assumes that there are no similar, previously learned patterns, or one is lacking intuition, findability ensures that one can still complete the desired task. If I am a teetotaler and I’ve never been to a bar before, I might have no idea that the loo is usually in the back, but if I wander around and see the restroom signs that are clearly marked; I know I have found the loo. Findability is the “clunkingly obvious” factor.

In my examples above, I don’t mean to suggest that findability is boring, or can lack delight, fun, or, more importantly, persuasion. From a content perspective, the authoritative tone of brand and persuasion should probably be the most findable parts of a web site. I think persuasion might be more essential in findable content, whereas it is more easily a “nice by-product” of discoverable content.

What’s interesting in the storytelling article is that the author gives us a bunch of examples of storytelling, but I think she could have gone a bit further and gotten more granular.

For example, when I am designing a web page/site/interface, I think of the features on the page as characters in a story. Kind of like playing with Barbies, you grab a bunch of features, put ‘em together, throw ‘em around, and see how they interact with each other…then you place ‘em where they make the most sense in the arc of the story you’re trying to tell. Some features are main characters, some are supporting, and you’ve got to work with that. of course, the user is a character as well; i’m just sayin’, the user is not the *only* character.

The best example of this is Jones’ example about the benefit of unread content and the mini cooper web site. Jones mentions that mini creates credibility through the presence of its company history. let’s say that “features and specs” about the mini are a character and “company history” is a character…for the purposes of this story, “features and specs” are the main character, but “company history” is a supporting character, and “he” is still pretty important to have around. we might not pay a lot of attention to him, but his presence (here, findability) on the page lends credibility to the brand. Craft your story (and your interaction design) from there.

Paul’s Response:

Since the subject has a lot to do with storytelling, I wrote this like I was telling a story.

“Choose Your Own Adventure: Findability vs. Discoverability”

It’s no longer enough for users to be able to find your site, and then find what they’re looking for once they’re there. Now, they have to enjoy the experience — and, if possible, participate in it.

It’s helpful to think of this in terms of two different types of users: the Finder and the Discoverer. The Finders know what they want and where they’re going. They may have already formed a mental map of how to get there, and a web site’s success may depend on its navigation and search matching the user’s expectations. Discoverers are less linear. They want to explore, and be entertained and surprised along the way. They may not know exactly what they’re looking for, but they feel it. For discoverers, it’s as much about the journey as the destination.

One way to think about how to engage both types of users is through use of the Story. At Fluid, we always try to use a narrative structure to explain our work and vision to the client. In essence, we try to keep the customer’s story as the guiding theme across all our deliverables and presentations. So, what kind of story are we going to tell the Finder versus the Discoverer?

Think of the Finder in terms of the shopping funnel. It’s a short story or a haiku. The Finder wants to get to the end as quickly and easily as possible. They want to get from point A on the home page to point D in the shopping cart, with brief stops at a category, index and detail page along the way. It’s hard to avoid the spatial metaphors, but it’s not just three-dimensional. Time is also a factor. The finder already knows what they want and doesn’t want waste a lot of time getting there.

In contrast, the Discoverer doesn’t want a short story, they want an open-ended Choose Your Own Adventure book, or maybe movies on demand. Instead of trying to speed them along a linear path, our goal is to keep them interested, and moving, as long as possible – until they realize they’ve come to the right place. The Discoverer is sticky and needs a sticky site. The Discoverer can be either passive, wanting to be entertained, or active, wanting to have more control over how they move through the site, and even interact with it. The Discoverer needs more lateral and contextual relations between content, and not just the basic linear site navigation.

While we’re on the subject of stories, user-generated content is a way for users to make themselves part of brand’s story. For example, user reviews are a way for customers to share their opinion of a site or a product. It’s a way for Discoverers to leave a sign that they were there.

One area where the Finder and Discoverer types may overlap is in social shopping. Just as many malls and stores aspire to be social spaces and not just a shopping destination, the Finder can become a Discoverer by bringing in a friend who may encourage them to look outside their original goal and try something new.

We need to design web sites that engage both types of users, and take into account that most users are a combination of the two. It’s not so much that these are different types of users, so much as they are different types of search strategies or behaviors. We need to give the right level and amount of content in the right time and place, with clear paths to more: more depth, more range, or more similar (moving up and down in granularity, or horizontally through relationships). The key seems to be choice: giving the user the ability to choose how they move through the site rather than forcing them into one path, but not so many choices that the user becomes paralyzed or lost.

The choice on which approach to emphasize will vary by client. I think findability is more important for large-scale retail sites, whereas discoverability is more important for brand sites.

My Response:

First, a user’s browsing/searching behavior is never linear in nature. I don’t feel that the typical use case is that a user will come to a site looking for a specific very granular piece of information. Rather, I am more inclined to think of a user’s browsing behavior in regards to what some researchers are calling berrypicking”.

The “berrypicking” model has two main points. First, as a user searches for information they are constantly learning from their search/browse interaction and thus the nature of their search is constantly changing and adapting directly from the information they are discovering. Thus, through the process of browsing their search goals may be constantly changing from their initial intent. Originally a user may have been interested in findability and then upon reading something new, their goals may have changed to discoverability. (and vice versa.)

The second point is that a user’s informational needs are not satisfied solely through the finding of a set of documents or results. Rather, the main value of search exists in the accumulation of bits and pieces of information along the way. (i.e. Life is a Journey, not a destination) . This second point made me think about the design principle of providing alternative interfaces for both novice and expert users. It seems to me that a well designed interface should be able to support the needs of both findability and discoverability. Thus, as the users informational needs change a well designed interface will provide opportunities to dive deeper into a subject matter or discover a related item. I think a good example of providing an interface that is useful for both for novice and expert users is the TED home page. www.ted.com A user interested in finding a specific talk can reorganize the page using the list format or access the search box, while a user more interested in discoverability can browse the content by interacting with the images or browsing filters on the page.

In addition, I was thinking that the granularity of the information being presented is directly correlated to findability and discoverability. I don’t necessarily think of discoverability as content that is “hidden” and meant to be found, but rather it is content that is more abstract in its presentation and subsistence. (i.e. A related item link, Or a short blur about sustainability with a link to learn more.) In addition, when I think of findability, I think of content that is more complete and concrete in nature. (i.e. product details page, a technology details page, or an article page).

Thus, as a user bounces back and forth between findability and discoverability, what changes is the level of abstraction of the information being presented. Low level of detailed information will lend its self to findability while high level of detail will lend itself to discoverability.

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.

Fluid is pleased to announce the launch of a new site design for Diapers.com. The new site, designed by the Fluid team, also leverages the Fluid Experience merchandising suite to create a compelling brand and shopping experience. The redesign enables Diapers.com to scale into thousands of new products while continuing to provide a convenient, helpful and fun place to shop for moms and dads of young children.
You can read more about the site in this article on Internet Retailer.

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.

Two and one-half years ago Fluid began a design project for Charles Schwab to craft a whole new web experience and look-and-feel for their customer account management portal. The design project coincided with a significant effort on Schwab’s part to update, enhance, and extend the entire back-end system responsible for account data, security, transactions, and content management, so the new site had to accomplish a few key goals:

• Create an experience that inspires trust, confidence, and credibility in all customers.
• Provide quick and easy access to consolidated account data and all transactional functions.
• Offer improved and new functionality without displacing or deprecating existing functionality customers had come to expect and rely upon.
• Modernize the site’s design to leverage new interaction patterns to provide access to deeper content without overwhelming or alienating customers.
• Consolidate the site’s research data and information into a more logically organized structure to improve findability and usability.
• Integrate the many marketing and awareness campaigns into a single, rule-guided system for presentation within the account management center.
• Extend the brand guidelines from the print, broadcast, and online marketing to the customer account center while crafting a reliable, efficient, and focused customer experience.

Schwab’s previous site (which is still available during this transition period) has been serving their customers for more than six years. During that time browser technology and customer expectations have changed, the site (like all web sites) grew organically to accommodate changing business needs, and the customer experience become fragmented and occasionally unfocused. Fluid was charged with helping Schwab craft a new, unified vision for the customer experience and then defining a design system that would essentially be everything to everyone, because in the world of finance the margin of error is zero. Mistakes in the customer experience cause customers to doubt the reliability of a system, and when that system is responsible for their money customers have no tolerance for mistakes.

The design process lasted ten months, starting with six weeks of stakeholder interviews and customer research. We crafted wireframes for hundreds of distinct pages and screens for six months, and during this time we went into the usability labs with click-through prototypes for eight rounds of testing with actual customers. Any feature or function that did not test well would be re-designed and tested again – only when an interaction was successful in two consecutive rounds of testing would it be removed from the task list and marked as “validated.” At the same time we were crafting and testing prototypes, we were also working closely with the internal brand group to establish a look-and-feel for the entire customer account management center, and in the last three rounds of testing we presented prototypes that incorporated the updated visual design, because the way a web site looks can actually have an effect on usability.

When all of the core and essential functionality and the new look-and-feel had been tested and validated, we moved into a refinement phase to extend the design to the remainder of the account management center. The project culminated in the delivery of a pair of extensive style guides that defined the design system and patterns for the interaction, information, and visual design.

Now, more than one and one-half years since the end of the design phase, the new Schwab Customer Account Center is being rolled out to all customers.  How well has the design been implemented, and how well does it hold up? I’m happy to say that it has been implemented very well – the design and experience are true to the vision and to what was tested so successfully with so many real customers.  Compare for yourself:

The previous Schwab Customer Account Center:

The new and improved Schwab Customer Account Center:

The new design increases content density, the organizational structure is actually flatter and makes it easier to find information, functionality has been made more efficient, and the entire experience from account data to transactions to market research is now consistent and on-brand.

Congratulations to everyone at Charles Schwab who had a vision for excellent customer experience and service, who demanded exacting standards, and who maintained focus while seeing this project come to fruition! Fluid is proud to have been a partner in this effort and in your continued success.

Jared Spool recently wrote that pretending and roleplay in usability testing is not as effective as recruiting people with an actual need or real interest in a product or activity.

We routinely ask participants in prototype testing to pretend they need to complete an action by creating a believable scenario for them (e.g., you just bought a new MP3 player and want to download some new music for it.) Jared Spool’s research has found that people who are not really interested in an activity behave differently on a web site than people who are genuinely interested in that activity.
What we need to be aware of (and what Jared Spool nearly alludes to) is that the bigger the difference between what people want to do and what we ask them to pretend to do, the greater the possibility that they will not behave accordingly. So, asking a Wall Street executive to pretend to be interested in The Jonas Brothers will probably be less accurate than asking female highschool students to pretend to be interested.

Jared also finds that asking people to pretend to shop for something they do not want or need is less accurate then asking them to shop for something they do want or need. At Fluid we sometimes find ourselves in this situation in prototype testing where not all of the participants actually need the products being sold on the site being testing, but there are a few things we can do to improve the accuracy and relevancy of our testing observations:

1. Recruit from real customers who already visit and shop on the site, because they are already interested in the content, products, and features,
2. Recruit for the appropriate demographics and interests in participants to improve the probability that even if they are not actual customers they will be still be interested in the content, products, and features of the site,
3. Recruit for specific needs (e.g., recruit people for customizing wedding invitations right at the time they are planning a wedding and need invitations.) Obviously this is more difficult, but it should produce more accurate observations.

One of the limitations we have with prototyping testing is that we cannot adapt the task to the participant after they arrive. Prototypes typically have a pre-defined set of tasks and available options, which means we need to be careful and recruit the appropriate participants who will match the prototype tasks rather than adapt the task to the participant.

If we were testing a fully functional and available web site, we would have more opportunity to adapt the tasks to the participant (e.g., ask someone to shop for a backpack rather than shop for a dress), but we still need to recruit participants who would be interested in the available range of products. If the only products a web site sells are shoes, then we cannot recruit for just any shopping need; we should try to recruit people who need and like to shop for shoes.

When we are preparing for prototype testing, we ask all of our clients to provide actual customer lists for participant recruitment so that we know our participants are at least interested in the content, features, and products of the sites and prototypes being tested. If we cannot recruit for a specific need, we are at least able to recruit for characteristics that make that need more likely to be present in participants.