The Official Fluid Blog

Here at Fluid, we love the iPad. We love all the possibilities it presents, and all of the amazing types of innovation it makes possible. Fortunately for us, our clients at Craftsman share that view. Coupled with a DIY ethos and a drive to do something really different, we went about designing and building Torque, the first shoppable iPad magazine for Craftsman.

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.

As we close out another strong year at Fluid, we’ve learned that three of our clients have made the Internet Retailer “2012 Hot 100 Best of the Web“ – the annual list of e-commerce sites that the magazine’s editors believe to have broken new ground in ways that other e-retailers can learn from.  We’re thrilled to see our clients land a spot on the list this year.  Congratulations to Benefit Cosmetics, Sur la Table and Wag.com and to the Fluid team for creating breakthrough designs.

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

2011 was a big year for digital commerce. At Fluid we saw leading brands fight back to own the innovation that start-ups owned in 2010. We saw digital shopping finally and fully break beyond the boundaries of ecommerce sites. And we saw brand and commerce mix and mingle in matches that were incredibly exciting – products told stories and stories sold products.

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.

(more…)

Cyber appears to be the new big framed glasses, trucker hat wearing, PBR drinking, bowling alley going, retro, call-it-a-comeback term.

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

At Fluid we have been monitoring the popularity and use of the mobile web and mobile applications for a few years, and we have seen the trend toward mobile optimized web sites for general activities and mobile applications for productivity, focused functionality, and brand-specific experiences. Luke Wroblewski recently proclaimed that the mobile web is winning, but mobile applications still have a place and purpose.

(more…)

When people step outside their immediate comfort zone, amazing things can happen.

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

While the extraordinary growth of touch tablets and smart phones has been a boon for consumers, it’s restarted something akin to the browser wars of the late 90’s for retailers. Instead of being able to rely on most consumers browsing the web using a mouse, using one of a handful of major browsers and running a fairly new version of Flash, the playing field is now wide open. Touch navigation vs. point-and-click and Flash video vs. HTML5 are just a couple of examples. With the launch of the Amazon Kindle Fire this week, retailers have yet another device and proprietary browser, Amazon Silk, to add to the list.

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.

Now that the new season of Project Runway has started, I have to tear myself away from Hulu long enough to tell you about Fluid’s launch of the new Elie Tehari site. This project reminds me a lot of the reality show’s design challenges: create a hot new look on a limited budget and in a short amount of time to fit a perfectly-proportioned model.

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.

Hi all,

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

Search is a fundamental part of nearly every ecommerce site, yet surprisingly little literature can be found on the topic. Greg Nudelman has helped fill this gap with his new book, Designing Search released earlier this year. In it, Nudelman, founder of the research and design firm DesignCaffeine, gives practical advice and useful insights into how people use search on ecommerce sites, both in and out of the home, backing up his claims with solid research from within labs and observations from the field.

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.