Fluid’s guiding principle as a company is that content, community and creativity together drive commerce. With Torque, we put that belief into action by creating an experience that took the best of Craftsman’s vast amount branded content, added in their highly engaged community of DIY’ers and brand enthusiasts and transformed it into a richly interactive, fully shoppable iPad magazine.

The list of innovative things we did for this app is pretty comprehensive:

• Almost all content within the app is actionable in some way. Whether it’s shopping, signing up for the Craftsman Club, engaging with the brand on Facebook and Twitter, following along with DIY projects, or accessing exclusive videos and articles, the content leads the way
• Using an updated version of Sears eCommerce API, we enabled users to add products to their cart right from articles and content within the app, then checkout seamlessly on craftsman.com
• Live video streams directly from the Craftsman Experience studio, and the app alerts users when the stream goes live
• Social media streams are universally accessible, giving every interaction a potential
• Blurs the line between editorial, branded content and eCommerce
• Content is streamed into the app via a CDN, allowing easier updates without having to release full updates into the app store

How Fluid designed it
Fluid started the discovery process by first auditing all of Craftsman’s existing content as well as their upcoming campaigns and initiatives. We then created an editorial structure and content flow for the app, which is actually much more like creating a magazine for print than creating an “app.”

After nailing down the table of contents, Fluid worked out all of the possible user interactions. This included everything from basic page behaviors all the way down to multiple content interaction scenarios. As we worked on the interaction design and started merging it with our editorial structure, we began brainstorming ideas for an editorial voice and identity. Fluid presented one naming option to Craftsman: “Torque”. Craftsman promptly trademarked the name.

We then began the process of breaking the editorial structure apart into smaller chunks to work on. For content that already existed (like the step by step projects), Fluid redesigned it to fit into the edgier, grittier, DIY-inspired look and feel of the app. For content that needed to be created or expanded, Fluid designed those sections from scratch and provided clear direction and guidance to the Craftsman marketing team so that they could start writing those remaining sections – the most notable of which are the Top 100 and Mystery Car Vault. Our process continued on iteratively until the content for the entire experience was completely fleshed out.

How Fluid built it
On the UX and visual design side, Fluid began prototyping very early on in the creative process. In some of the very first designs presented, we used video layers in Photoshop and exported the files as quicktime movies so that the client could immediately see how both the look and feel and the interactivity worked together.

On the technology side, Fluid’s developers immediately started testing different options for build and eventually settled on using a combination of HTML 5 and Javascript. Structurally, Torque was set up in a way that makes content updates achievable without having to push an update to the app store. All of the content, from videos and images to text, is served via an Akami CDN. In other words, much of the content doesn’t actually live “inside” of the app, so the initial download is very fast and all of the content loads on-demand.

In order to make sure that the eCommerce layer worked seamlessly with Craftsman’s existing system, Fluid worked with Craftsman’s technology team to create new API’s that allowed Craftsman’s “Quick View” to be displayed within the app. Adding items to a cart was seamless via the UIWebView (in-app browser), and checkout was handled by craftsman.com. Once the app was in working order, the entire tech, creative and ux team all spent time working together to test for bugs, optimize, and refine the experience. The final handoff was to the Sears Mobile team, who then submitted the app to iTunes for approval. The app was approved in one weeks time.

Why we think it’s cool
Opportunities like this are rare. Fluid got to create, name, design, and build a branded, shoppable iPad magazine on the hottest technology platform in existence for one of the most well-respected brands in the world. At Fluid, we believe strongly that experiences like this – the ones that merge content, community and creativity in delightful and innovative ways – are the future of eCommerce and brand engagement. We were honored to work with a legendary brand like Craftsman and their very talented marketing team to create a cutting edge product that their consumers are thrilled about.

Benefit Cosmetics

The Internet Retailer editors liked the bold graphics, video tutorials on how to use its cosmetics, along with the social features, including a tool that lets consumers post and answer product questions, and a social club that connects Benefit fans with others around the world.

Sur la Table

Innovative navigation that puts relevant deals right in the front of the shopper caught the attention of the editors when they reviewed Sur la Table. For this site, Fluid focused on interactive merchandising and conversion.

Wag.com

Fluid helped combine the hallmark efficiency of Quidsi, the parent company of Diapers.com and Soap.com, to deliver a whimsical experience that changes the way people shop for pet supplies.  Internet Retailers’ editors noted the site’s novel navigation approach, which lets pet owners browse by animal type — not only cats and dogs — to find needed products in one section, each with its own color scheme that serves as an anchor. Wag.com has the benefit of learning from sister site Diapers.com, which was also developed by Fluid.

Follow this link to see the complete Hot 100 list of companies.

-The Fluid Team

At years end, Fluid celebrates ten digital retailers that took bold action in 2011 – some are our clients, some are not. The order is purposeful. We count down to the brand actions we see as boldest. The gauntlet for 2012 has officially been thrown. Fun.

Think there’s a bold action that should to be on this list? Send it on.

Happy Holidays,
Amy

Bold Action #10 NetFlix: Facilitate visual navigation just for kids
In November Netflix revised their Wii app to include a “Just for Kids” section, navigitable by cartoon and kid characters. The under-12s will never be computer-centric – design is changing accordingly. In fact independent of age, design for tablets and touch-screens began to heavily drive web design in 2011, instead of vice versa.

Bold Action #9 AmEx: Bolster small businesses with their own Saturday
AmEx isn’t a digital retailer but in a year of bold moves by payment systems (Paypal’s Facebook app, Square’s rise, etc.) they sparked digital commerce success. Lodged between Black Friday and CyberMonday, Small Business Saturday drove social traction, offline sales and fueled Davids over Goliaths. Another brand focused on small business buying, Etsy, saw 80% YOY CyberMonday sales growth.

Bold Action #8 Coach: Kick the purchase funnel to the curb
Rich, bold imagery conveys the sensory elements of Coach products in the magazine style format of their ecommerce site. It gets most interesting though (to us) when you go to buy. Gone are the traditional .pdp pages – product details and Add to Cart are treated in a quick view. And checking out is no longer a purchase funnel, it’s done all on one page.

Bold Action #7 JCPenney: Incubate companies to target market opportunity

JCPenney had proof of market opportunity in two areas: 1. Men’s style and 2. Gifts. Recognizing the strengths (and constraints) of the JCPenney brand they served as their own VC funder and incubated two new digital only ventures. Partnering with Hearst Magazines, CLAD and Gifting Grace were welcomed into the world this Fall.

Bold Action #6 ASOS: Trust a marketplace will amplify – not compete
ASOS is the UK’s largest independent online fashion retailer, offering over 850 brands and their own ASOS label. This year ASOS opened Marketplace which allows anyone, anywhere to sell fashion to anyone, anywhere. Indie labels, emerging designers, vintage boutiques and clothes hounds are encouraged to apply for a boutique. ASOS positions themselves as celebrators of fashion and takes a percent of sales.

Bold Action #5 Reebok: Showcase custom shoes for on-demand inventory

Customers love custom shoes. Reebok saw success grow and decided to give custom shoes their own shop. In 2011 it excelled. It’s fueled by attribution to the custom creators, design voyeurism and social sharing – social that also serves as ratings and reviews. Custom options permeate their traditional inventory for a persuasive cross-sell.

Bold Action #4 eBay: Declare ecommerce is dead and buried

John Donohue, CEO of EBay, declared the concept of ecommerce dead and buried. Consumers think shopping, not device. “Over the next 12-24 months we’re going to see an explosion of experimentation, and no one knows what’s going to take off and what’s not.” Right now it’s mobile – U.S. eBay mobile shoppers spent 2.5x more on CyberMonday than in 2010. PayPal Mobile saw a 552% YOY increase in global mobile payment volume for the same day.

Bold Action #3 Apple: Overtly and publicly celebrate the life of Steve Jobs On Oct. 4th Apple launched the iPhone 4S, on Oct. 5th Apple announced that Steve Jobs had died. Defying the speculation for years that Apple stock would drop upon his death, Apple owned the celebration of his life outright. The homepage of the Apple store honored him for days and Apple stores became pilgrimage sites of emotional expression. Consumers responded with an unprecedented outpouring.

Bold Action #2 Patagonia: Declare “Don’t Buy” on the years’ biggest shopping day

Retailers wait all year for Thanksgiving weekend and this year Black Friday and CyberMonday did not disappoint. In the flurry of price drops, limited editions and 4am store openings, Patagonia took a bold stand. A full page ad in the NYTimes and their home page declared “Don’t Buy This Jacket.” A stand for their Common Threads Initiative, the buzz was widespread and polarized.

Bold Action #1 Amazon: Reward consumers for price comparing

Yes people research online and buy in-store. Amazon is aggressively encouraging people to research in-store and buy online. This shift in behavior is significant for digital (and is happening independent of Amazon). Amazon’s advantages? Prices that benefit from large inventory and the lack of online sales tax. The controversy around their Dec. 10th promotion is likely to bootstrap mobile buying – and expedite the sales tax conversation.

Add the term Cyber to Monday and it deserves its own victory lap – with 22% YOY CyberMonday sales growth for 2011.

Fun fact: Shop.org coined the term CyberMonday for the Monday after Thanksgiving in 2005.

Today the Washington Post declared that CyberMonday has evolved into CyberWeek, with ecommerce sales tallying up three days straight of record breaking numbers exceeding $1 billion dollars. Monday ($1.25 billion), Tuesday ($1.12 billion) and Wednesday ($1.03 billion).

Bim. Bam. Boom.

Like a great birthday celebration, CyberMonday can no longer be contained in one day. Early holiday shopping results have online shining.

In fact, ComScore reports that retail ecommerce spending for the first 28 days of the Nov – Dec holiday season is up 15% YOY at $15 billion.

The ComScore report is worth reading.

Some may say it was the pepper spray incidents that drove people online. Or free shipping. But remember the above data is not relative to in-store. Seeing online spend as a portion of overall spend will tell us if online is scaling according to the economy in general or bringing it big within online itself.

As we eagerly watch the results come in, we congratulate our clients. The numbers so far are great. Fluid is proud to play a part in driving their digital commerce success.

If you’re still shopping (it is only the 5th), our clients have fantastic gifts. A sampling of a few places to start (or finish) your list:

CLAD
The North Face
Diapers.com
Craftsman
Elie Tahari

Cheers,
Amy

As we enter the Holiday 2011 season, it is clear that mobile devices are playing a growing role in how people play, socialize, and shop. There are now 328 million smartphones, tablets, and laptops for the 315 million people in the US, and mobile web traffic has doubled in the past year. Currently, 37.4% of people in the US have a smartphone, and with 650,000 people switching from feature phones to smart phones every week, we are on track to hit 50% of people with smartphones by September 2012.

Apple still dominates the smartphone and tablet market, but Android has seen dramatic growth. Apple accounts for 43.1% of mobile devices and 58.5% of mobile web traffic, while Android accounts for 34.1% of mobile devices and 31.9% of mobile web traffic. Apple device owners are clearly very comfortable accessing the Internet via browsers and mobile apps, but combined with Android we have 63 million people accessing the web via mobile, and another 21.5 million when we add in Blackberry and Microsoft devices. That’s at least 84.5 million people on the web regularly via the most common mobile devices.

So, what are all of these people actually doing on their mobile devices? Recent data from the Pew Research Center identified the most common activities on mobile phones:

• 73% send and receive text messages
• 73% take photos
• 54% send photos (or videos)
• 44% access the Internet (via browser)
• 38% send and receive email
• 35% play games
• 34% record video
• 34% play music (Pandora reports that 50% of their traffic in August 2011 was to mobile devices!)

Other studies report that 58% of people read news on their tablets, and 25% do that daily. Socializing is also popular with 3 out of 5 mobile device owners reporting they are active on social networks, and 72.2 million people in the US accessed social networks and blogs via mobile devices in August 2011, a 37% increase over last year.

But what about mobile applications? As mentioned above, we’ve been monitoring the popularity and use of the mobile web and mobile applications over the past few years.  The trend is clearly toward using mobile optimized web sites for general activities and mobile applications for productivity, focused functionality, and brand-specific experiences.

How many mobile applications are being installed and used? In 2009, 22% of smartphone owners had installed mobile apps; by August 2011 that increased to 38%, and 75% of tablet owners report installing applications. More data from the recent Pew Internet research shows that:

• 68% of people with apps on their smartphones report using them
• only17% of smartphone owners use no apps (and only 8% of tablet owners use no apps)
• 51% of smartphone owners use 1-5 apps per week
• 31% (so-called “power users”) use 6 or more apps per week (while 39% of tablet owners fall into this category)

How are people using all of the mobile applications?

• 74% provide updates on news, weather, sports, and/or stocks
• 67% help communicate with friends and family
• 64% help people learn about something in which they are interested
• 53% help people find information
• 48% facilitate work-related tasks
• 46% are for shopping and/or making purchases
• 43% watch TV or movies online
• 35% retrieve information about en event
• 29% track and manage their personal health

Yes, you read that correctly: 46% of people who use installed mobile applications are using them to shop. This is a significant market and a huge opportunity. Forrester reports that mobile commerce increased 25% in the first half of 2011 (and mobile traffic was up 300% for Holiday 2010), and PayPal is processing more than $10,000 per minute in mobile transactions (at an average of 3 mobile transactions per second, they anticipate $3.5 billion on mobile payments for 2011!) So far in 2011, the average ecommerce site is seeing 10% of traffic from mobile devices, and that number increases to an average of 15% for premium brands.

Customers are increasingly comfortable with mobile shopping and making purchases via mobile devices, and they are not making only small purchases: in October 2011, eBay sold a $40,000 backhoe via mobile, and Blue Nile sold a a $300,000 diamond engagement ring via their iPhone app in September 2011. Blue Nile also reports that purchases in the thousands or even tens of thousands are “not uncommon.”

Acceptance of and attitudes toward mobile commerce are strong and positive. Recent analysis by JiWire shows that nearly three-quarters or more of consumers are comfortable buying on mobile devices, and older, more affluent consumers are more likely to make larger purchases.

For adults between 18-34 years:

• 73% are comfortable buying on mobile (14% are not willing to buy on mobile)
• 27% spend under $50
• 13% spend $50-99
• 15% spend $100-249
• 14% spend $250-499
• 17% spend $500+ (45% do research before spending $500 or more)
• 13% do price comparisons
• 23% research on mobile, but buy online (non-mobile)
• 15% research on mobile, but buy in-store

For adults between 35-54 years:

• 83% are comfortable buying on mobile (11% are not willing to buy on mobile)
• 18% spend under $50
• 13% spend $50-99
• 17% spend $100-249
• 19% spend $250-499
• 22% spend $500+ (34% do research before spending $500 or more)
• 34% do price comparisons
• 31% research on mobile, but buy online (non-mobile)
• 32% research on mobile, but buy in-store

Mobile commerce is growing rapidly, and both the mobile web and mobile applications provide opportunities to reach consumers and provide the information, features, and services they need to make purchase decisions and complete transactions. With nearly half of tablet owners reporting they made a purchase from their tablets, and with 111 million smartphones and tablets in use and growing quickly, now is the time to establish a brand presence in the mobile space.

We witness it when football players take ballet. We see it when a furniture designer looks to nature for inspiration. We hear it when Tony Bennett teams up with Lady Gaga.

Unfortunately, we don’t witness this in the digital world enough. Instead of being open to a range of influences, site design processes often have a narrow focus that can result in  “me too” looks rather than differentiated designs.

How does this happen?

As part of the discovery process, companies typically limit their review of the digital landscape to direct competitors and “top sites.”  This practice is important for benchmarking and informing feature prioritization. But done alone, a competitive review can be limiting and inadvertently create a “keeping up with the joneses” effect rather than setting the stage for a differentiated experience.

How can you avoid this pitfall and create a more differentiated experience?

By expanding your circle of influence. By supplementing competitive reviews with brand spheres.

What Is A Brand Sphere?

A brand sphere is a map of your customers’  “go to” brands across verticals. It identifies the brands they choose as they go about their day and the brands you can find in their home.

What is in their refrigerator? Which labels do they wear? What car do they drive? What kind of phone do they have? Where do they eat out? Which gym do they belong to? Which hair and body care brands do they prefer?

A brand sphere draws a more complete picture of your customer. It illuminates their preferences and expectations. And it provides new fodder for inspiration.

For example, if you are designing a consumer electronics shopping site, why limit your influences to only other electronics sites or even ecommerce sites in general? Why not look at music and video sites where your consumers most likely spend more time? Why not look at the CPG sites that fall in their brand sphere? What can you learn from the news sites they visit? The social networks they use?

By looking across verticals, you will expose yourself to different design approaches and feature sets. The purpose is not to imitate these approaches but to take a step back and see if there are any distinct designs or features that spark an idea.

Undoubtedly new perspectives will fuel new ideas. Ideas that are as elegant and powerful as a football player who can both rush and plié.

Our mission for Fluid Experience has always been to make online shopping more engaging while decreasing production effort. With this in mind, we’re pleased to announce enhancements that optimize product and brand imagery presentation, regardless of the device. We accomplish this using a number of methods:

Product Displays - Our interactive product displays (zoom, color changes, views, etc.) now perform browser detection and serve up a Flash-based presentation if available. If not, we assume the user is on a touch-based tablet or smart phone and serve up an HTML presentation specifically optimized for touch navigation. For zoom, instead of forcing click-and-pan or mouse-over zoom gestures on the user, we rely on native pinch-to-zoom gestures that they already know. Plus, we do some special work behind the scenes to ensure the image stays crisp, even at multiple levels of zoom.

Shoppable Imagery – For adding interactivity to brand-based imagery, we’ve built a completely new, HTML-based component from the ground up. And don’t worry — ditching Flash doesn’t mean a loss in richness or interactivity. Our new Shoppable Image component allows for graceful crossfade and scrolling transitions. Hotspots and tooltips can contain and mix images and text. Rich fonts work out-of-the-box courtesy of Typekit. Fonts.com support is available as well.

Shoppable Video – Our Shoppable Video component detects user’s system in a similar way to Product Displays and serves up either a Flash or HTML-based presentation as appropriate.

And this is just the beginning: we see huge potential in how tablets and smart phones can really elevate the shopping experience and intend to continue to further optimize our components going into 2012. What’s more, we’ve expanded browser support so retailers can continue to upload an image once and rest assured that Fluid Experience will keep pace with the proliferation of new devices. Now and in the future.

In this case, Fluid Agency redesigned ElieTahari.com to create a beautiful, branded, and richly interactive website by layering the Fluid Experience imaging solution over the Demandware SiteGenesis ecommerce platform. We took the visual merchandising tools of Fluid Experience and raised them to a new level, seamlessly integrating them throughout the entire site in a way that complemented and enhanced the ecommerce best practices of Demandware SiteGenesis. Check out the ETC section to see how we used Fluid Experience to blend editorial content with shoppable looks. Fluid Experience isn’t just an accessory thrown on to give a static site some personality, but rather it is the fabric that holds it all together to tell the story of the products and the brand.

One of the coolest things about this project is that it also includes the first mobile site we’ve done since launching an HTML version of Fluid Experience. That means it doesn’t matter what kind of mobile or tablet device customers are using to view the site, it always looks great.

To make all this possible, the Fluid product team built completely new HTML based runtime components and corresponding business-user admin tools to create and maintain a wide variety of branding banners. They also built a Demandware cartridge for Fluid Experience to make future implementations on the platform a breeze.

From a design perspective, the challenge was to create a look and feel to match the modern sophistication of the Elie Tahari brand. Fluid’s role in helping to define the photographic direction was a key component of the design’s success. Our creative director, Mariana Bukvic, was able to be on site for the photo shoots, brief the photographer, co-art direct and guide the post-production. Often, we have to work with clients’ existing photo assets, and the fact that we were able to advise and collaborate with Elie Tahari from the start made a huge difference.

The combination of Fluid Experience, Demandware, and our strong interaction and visual design resulted in a site that was built efficiently but looks and feels completely custom. It’s like getting a perfectly tailored couture outfit without having to pawn your Bentley.

Contributors: Brian Biggs, Mariana Bukvic, Davi Ellis, and Margo Silver.

Fluid got to take the stage at eTail East’s Social Commerce Summit last week. So fun. We share our presentation with you here:

Designing Search opens strong, dolling out clear, actionable insights into search habits of users that are of immediate value to anyone designing search features for a site. Starting from what he describes as “zero” (a search results page with no matches found), Nudelman gives wonderful insight into how to construct search functionality that maximizes the discoverability of products and to help customers find what they are looking for. Nudelman deftly justifies his assertions with examples drawn from his considerable time observing users’ behavior. Nudelman even touches briefly on the topic of social search, though he offers little more on the topic that to proclaim it fertile ground for research.

Bravely, Nudelman attempts to address problems associated with mobile design, largely abandoning his central topic altogether and instead focusing on common problems he has observed in users. Though none of his observations are surprising to those of us who have worked closely with and observed actual users, they do serve as a great primer for anyone new to designing for a mobile platform. Nudelman suggests how best to improve upon the current design patterns, advocating for the adoption of less obtrusive design patterns for mobile experiences. While his solutions are in many ways an improvement over current patterns, designers need to consider if the potential improvement is greater than the costs associated with the adoption of a new design pattern. In some cases, improvements may only be incremental and change may result in disruption and rejection.

In contrast, Nudelman’s take on design for the iPad is spot on. Like his section on mobile, his discussion on designing for tablets is only loosely tied to the topic of search, but unlike mobile, Nudelman is completely on point. He addresses everything from current use cases and ergonomics (largely refuting Kevin Kelly’s vision of the future in which everyone carries a phone and a tablet), to future and innovative uses for the newborn platform. Anyone new to designing for tablets would do well to pick up a copy for that section alone.

Overall, Designing Search is a worthwhile read that occasionally shifts focus from search to include much broader topics and audiences. Nudelman has written Designing Search as much for interaction designers as for project managers and executives, and at times he offers insights into details interesting and familiar to designers, such as explaining eye tracking methods. Even with the occasional digression, Nudelman provides sufficient guidance into designing search and mobile experiences to make Designing Search a worthwhile reference.