The Official Fluid Blog

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.

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.

Hey everyone – Nathan Moody here, Director of Creative Services here at Fluid, Inc. My first post on Flog brings some great news from my recent trip to South by Southwest [SXSW] .

I’m happy to announce that on Sunday, March 12, 2006, Fluid won the SXSW 2006 Web Award in the Business: For Profit category for our work on Timberland.com’s Custom Boot Configurator.

We’re obviously thrilled, and proud to have been recognized by the SXSW judges for creating a usable, fun, and innovative user experience that’s had measurable fiscal success for our client as well (how’s doubling customer conversion sound?). While I accepted the award, the true winners of this award are Fluid’s internal staff that worked on the project: Andrew Sirotnik (Account Manager, C0-Creative Director; Debbie Lefkowitz (Project Manager); Paul Spitzer, Darren David, and Ameet Mehta (Engineers); Brian Cherne (Information Architect); and Marty Kenney, Tom Hirashima and Jesse Gerstein (Interactive Media Engineers). I was the Visual Designer and Co-Creative Director.

We’d also like to thank our client, Timberland, for having the faith in us to take their product offering to the next level. Thanks especially to Troy Brown, Jill Areson-Perkins, and Joshua Deane at Timberland for their help, trust and deep collaboration on this project.

For more information, visit Timberland.com’s Custom Boot Configurator or read our case study on Fluid.com.

It’s with great pride that I announce two Fluid designed and developed projects have been nominated for Flashforward Film Festival Awards.

Both nominations were for RIAs we created. Under Best Application is the Build Your Own Boot application we created for Timberland. We were also nominated under Technical Merit for the RbkCustom RIA we created for Reebok. The Rbkcustom app has an extra cool feature. Even though the entire thing is Flash-based, we generate bit-for-bit perfect JPEG of the shoe you create that can be shared either via email or SMS.

Congrats to Ameet, Andrew x 3, Daniel, Darren, Debbie, Jules, Marty, Nathan, Paul and anyone else on the team I might have forgotten.

Overall, drag-n-drop is a popular interaction method, most people get it, and it is often requested. However, there is a distinction for many people between desktop environments and web sites or web applications. The “click for action” paradigm on web sites is very strong, and drag-n-drop is not yet as common on the web. We often find that we have to explicitly tell people that they may drag-n-drop items, but once they know it is available, they get it and use it properly.

The one problem with drag-n-drop (on the desktop and on the web) is that there is no uniform way to visually indicate drag-ability and inform people that the functionality is available. Buttons look clickable and underlining links is a well-known convention, but nothing really looks drag-able. People often must try to see if something is drag-able, hence the need to inform people explicitly.

Drag-n-drop in file management dialogs in a desktop environment is a good example of a learned behavior: the filenames do not really look draggable, but we have learned to drag them around and drop them where we want them. Similarly, we have learned that we can drag-n-drop appointments in our calendars as well as re-arrange our email.

The whole idea of dragging an electronic document (or image or other virutal object) composed of electromagnetic bits and putting it in a “place” relies on the metaphor of space: physical things can be found in places and can be re-arranged. We can re-arrange files in a cabinet, books on shelf, pictures in a scrapbook, or bricks in a new patio. While tangible objects have the affordance of being grasp-able, electronic objects may not.

On the web we have to create designs and provide guidance to help people draw the analogy between physical and virtual dragging and use drag-n-drop in situations where the concept of space applies to the virtual object. We need to help people transfer the skills they have learned in one situation (e.g., desktop applications or making a scrapbook) to another, new situation (e.g., placing merchandise in an online shopping cart by dragging rather than clicking.) Luckily, most of the virtual objects we drag-n-drop around do have the property of location (or space), so the drag-n-drop paradigm typically works well.

Are there instances where a virtual object lacks the analogous property of space and would therefore be confusing to drag-n-drop? Are there situations when dragging and dropping a virtual object would make little sense as an interaction method or would be more complicated than other interaction methods? For example, although it may be possible to select dates for a flight or hotel reservation using drag-n-drop calendars, it may not be as efficient or usable to abandon the drop-down lists or clickable calendars.

Drag-n-drop is an effective, easily learned, and relatively common interaction method, and as web technologies improve and grow we will have many more opporunities to incorporate drag-n-drop in our interaction designs for web sites and web applications.