The Official Fluid Blog

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.

I will be presenting at the Web Experience Forum in Boston on October 14 and discussing the future of online customer experience in a session titled “Can I Get That in Pink and Eggplant?”  Here’s the blurb for the session:

“As more and more retail purchases occur on the Web, the ability to portray products as if they were in the buyers’ hands will become one of the key drivers of an excellent Web experience. Color change, product configuration, magnification, rotation, and personalization are already mainstream features expected by and familiar to consumers. What will online customers want next, and what do they not even realize we can offer? What is the next level of Web experience we need to attain to drive growth in Web transactions? This presentation will look at how emerging technologies and innovative design will transform the Web experience in the coming years.”

I don’t want to give everything away before the session (and I don’t think the folks at the Web Experience Forum would appreciate it), but here are some hints about what we see in the next two to five years:

• Video is the next JPEG,
• Sites will be smarter and more aware of who we are and what we like,
• Mass customization of products, whether or not we realize it,
• Sites will relinquish total control of the experience and become deconstructed,
• Mobile devices will be links and keys in much larger experiences,
• Social, social, social!

Check back the week of October 20 for start of six installments summarizing each of these future directions in online customer experience.

This coming Sunday I will be giving a small case study talk at jQuery Camp 2008 (sold out) pertaining to the use of jQuery on the new northface.com site. The material I will be covering will be lessons learned with a focus on how jQuery fits into large scale projects.

Here is a quick overview of my talking points:

• jQuery is the best choice for custom interfaces
• jQuery code (all js code) goes at the bottom of the page
• Almost all JavaScript code belongs in a single .js file
• Protect your jQuery code from others with a self executing anonymous function
• Fork IE from a single location
• Use page identifiers to run jQuery code on unique pages
• Play nice with others by using jQuery event namespaces

If you were lucky enough to get into jQuery Camp, I’ll see you there. If not, beg, borrow, or steal until you find a ticket. It’s going to be the jQuery event of the year!

Williams Sonoma recently released their Q2 results and they were eye opening. First, overall sales were down by 4.6%, which is obviously a source for concern.  The trend is clear that overall retail spending is down broadly, with low cost retailers being the notable exception (Walmart’s sales were up 2%).

In the face of these trends there are a few things that stand out. First, same store sales were down an eye-opening 8.6% in May but an even greater amount – 14% – in July. Obviously this isn’t a number that will make anyone feel good. Nor is the trend positive.

On the bright side, at least from Fluid’s perspective, is that web sales were up by 11.7%. One can only hope this stark contrast between same store sales and online sales will finally drive home the point that the web is of growing importance to any retailer’s strategy and, in fact, is the biggest (and perhaps only) current opportunity for improvement.

I think this quote from Jack Hruska, executive VP at Bloomindales, illustrates the current situation best:

“Still, those retailers ‘who play up their strengths will emerge stronger when the economy comes back than those who retreat or scale back,’ Mr. Hruska added. ‘We’ve seen that time and time again.’”

Now is clearly no time to pull back from investment in the online channel.