Fluid Experience: Now optimized for any device

by Brian Biggs
October 4th, 2011

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.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Elie Tahari: New Site Brings Together the Best of Fluid Experience and Demandware

by Paul Mooney
August 26th, 2011

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.

ET_home2

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Fluid+eTail East: Social Commerce Presentation 8.8.11

by Amy Lanigan
August 15th, 2011

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:

Fluid + eTail East: Social Commerce Summit 8.8.11

Session description: What moves consumers from conversation to conversion? In this session, digital shopping expert Amy Lanigan will provide an overview of what is driving success in social commerce today. The discussion will be structured around 5 social strategies retailers should be implementing now, and as a bonus 2 more that should be on their radar looking forward.

Send on any feedback or cutting edge examples.

Cheers,
Amy

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Fluid + eTail East: Join us!

by Amy Lanigan
August 4th, 2011

Ladies and Gentlemen,

Fluid is excited to see you at eTail East in Boston this upcoming week (Aug 8-11). On the agenda:

- Booth #52: Our product and agency teams will be showcasing how Fluid can have a positive impact on your digital commerce plan. Stop by with hard questions or just to say hello. We’re looking forward to meeting you in person.

- Aug. 8th 2:25pm session: Fluid presents “Social Commerce: 5 Strategies that Work.” I’ve 20 minutes to show you cutting edge industry examples of what is working in social commerce and to put a stake in the ground about what two trends will hit next.

My end goal: Get your minds racing with ideas for your social commerce plan. And arm you with examples (ideally a few you’ve never seen) to make the case for action in this area.

Contact Isaac Newton to set up an in-person meeting. (How can you resist meeting Isaac Newton?) Safe travels!

Cheers,
Amy

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Book Review: Designing Search by Greg Nudelman

by Matt Sugihara
August 2nd, 2011

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.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Wag.com

by Mariano Ferrario
August 1st, 2011

This post is co-authored by Art Director, Cat Lee.

Wag.com

We are proud to announce that Wag.com launched as the the 3rd installment to the Quidsi empire of brands. Very much like Diapers and Soap.com, one of our biggest challenges was to strike the balance between a boutique shopping experience with the convenience of a superstore. This positioning is unique to Quidsi and for the 3rd time, gave us a set of parameters to reach further and outdo ourselves in creating a fresh new experience.

Brand Experience

Making a digital brand from scratch is the type of project that we love to tackle. The challenges lie in materializing a brand into a personality where our audience would be able to fall in love with. We first cast a wide net of ideal shopping experiences and through a highly collaborative process, whittled it down to the core of your neighborhood pet store.

With it’s warm and friendly nature, the design shines through giving Wag a truly unique positioning that no other brand in the category can compare. The design values a homespun, whimsical and quirky flair, making it an ideal destination for our modern pet lovers. This is a place where we know how important your pet is to your family.

Close attention to detail was key in making the ordinary interactive elements bring forth the personality of Wag. The scalloped awning housing the global navigation was the perfect metaphor for the mom, pop, and pet storefront. To ensure the brand message carried through to the finest of details, we developed meticulous visual systems for the many working pieces of the site:

  • Category color coding
  • Typographic styling
  • Banner treatments
  • Photography selection

Last but not least, where would a brand be without it’s logo? The mark of Wag features a prominent logo type with a clever flicker of a happy tail. We custom designed the logo to not only stand alone as an individual entity but to represent the Quidsi family of brands.



Challenges & Innovations

One of the main challenges for the team was re-imagining the organization and hierarchy for a typical shopping site. Instead of designing an all inclusive navigational system for a single pet store, the Quidsi team pushed Fluid to think of Wag.com as six boutique pet stores within one super-store. In addition, we were challenged to support the shopping errand of a typical customer that owns a single pet.

This paradigm shift inspired Fluid to develop a two tiered organizational and navigational system. The top level navigation supports switching between ‘Pet Worlds’ while within a pet section an additional navigational system supports the shopping catalog for the selected fury friend.

In addition, the team had to rethink about the structure of a typical ecommerce home page experience. Instead of showcasing products and categories that speak to the entire super store, the team designed the home page to serve two main purposes:

  • Provide customers with an immediate understanding of Wag’s value proposition of free shipping, excellent award winning customer service and a breadth of product offerings within multiple pet categories.
  • Act as a spring board that allows customers to quickly and easily dive into a specific ‘Pet world’.

To support this pet focused shopping experience an in-context search menu was developed allowing customer’s to quickly and efficiently find products that are relevant to the pet category they are currently browsing. For example, while shopping in the Dog specific section of the site, the drop down menu within the search box is set to ‘Dog’ by default. A search for ‘bowl’ returns all bowl products that are specific for dogs. If the search results are too narrow for a customer, they can easily and quickly expand the search criteria by either selecting a different animal or all of Wag.com.

Finally, for those who want to spoil their loved ones or find that special gift; Fluid elegantly created a unique curated section called the ‘Pampered Pet Boutique’. This area of the site promotes specialized products in sets displayed in a beautiful editorial grid. Customers can easily browse the collections and purchase from a simple to use quick shop. And if these items don’t pique the customer’s interests, the full list of boutique items is at their disposal.

In short, this was another great opportunity to collaborate with our partners at Quidsi to push the envelope in terms of brand and user experience. A great challenge with great results.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Google+ Me = TLF?

by Amy Lanigan
July 20th, 2011

Google+ is on the brink of 10M users. After I received the coveted, Willy Wonka golden ticket, access to Google+ it’s 10M + 1. I’m in.

I dragged and dropped colleagues (we digital geeks are in Google+ in full force) and friends into circles. I hung out in Hangouts (my favorite feature) and scrolled through Sparks. I floated like I was in a neighborhood without the grounding of profile houses.

Then I watched logged out and watched my Facebook wall scroll with Google+ opinions.

What is Google+? David Pogue of the New York Times explains it well.

The top seven things that strike me:

1. Exclusive invites: Google excels at invitation-only. Gmail invitees forgot to care that their emails were being used for ad targeting. We still don’t mind. The club with the red rope is enticing. Even if we don’t know what’s inside.

2. The “not yet public” launch: Google has downplayed this launch. The NYT blogger above stated “it’s unfair to mention bugs because the service isn’t even public yet.” Really? Put a product launch behind a invitation wall, say it’s just a part of a bigger whole and people will concede on criticism. Brilliant.

3. Aimed at Facebooks’ achilles: Circles within Google+ strike Facebook where it’s weak – filtering and content distribution to specific friend networks. Within 3 minutes I could see streams of content coming only from my work connections. It’s easy.

Plus drag and drop is fun. Remember when digital driving what happened offline was exciting? Now we’ve moved on to Smart Phone and tablets changing the way people interact with computers. Polyvore caught on early. Now it’s everywhere.

If they want to issue a double blow, Google+ needs to kick in search. Hard. Facebook is notoriously lacking in search. (Does anyone else love that the Google+ name can be rough in search because the + can be a command or a proper noun?)

Read the rest of this entry »

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Book Clubs: Not Just for Jane Austen Fans

by Matt Sugihara
June 30th, 2011
Earlier this month, the Fluid’s SF office was pleased to host the June meeting of the UX Book Club SF, a monthly reading group where local UX professionals get together and drink discuss what’s happening in the field of User Experience. Proving that sequels can be as good as the original, it was Part Two in a series on “Seminal Articles in User Experience,” featuring a collection of articles selected by Kicker Studio called Essential Interaction Design Essays and Articles. This month’s focus was on articles from the 1990s and included Brian Eno’s “The Revenge of the Intuitive,” Johnson-Laird’s “Mental Models, Deductive Reasoning, and the Brain,” and Weiser’s well known piece, “The Computer for the 21st Century.” Special thanks to Dan Saffer of Kicker Studio for moderating!

The discussion was lively, and as constructive as it was critical. The most interesting part of the evening centered around Weiser’s article, “The Computer for the 21st Century,” where, in 1991, Weiser predicted with incredible accuracy the creation of what we know today as the iPhone and iPad. As impressive as his predictions are, they proved to have flaws (most notably that these devices would be easily disposable), and we spent time picking apart exactly why his predictions fell short, eventually agreeing that Weisner had severely over-estimated the rate at which culture changes when making his predictions. Johnson-Laird’s “Mental Models, Deductive Reasoning, and The Brain” and Meadow’s “Places to Intervene in a System,” meanwhile, both served as nice, theoretical counterpoints to the other articles and provided us with different frames of reference from which to design.

Before the meetup, Saffer tweeted “I really hate [one] of the articles I picked out for this month’s @uxbookclubsf” and at the meetup accurately summarized Alben’s article with a single word: quaint. This itself is telling of the progress we’ve made in the past fifteen years: we can safely dismiss an article that champions empathy and getting out of our ivory towers and interacting with “real people” as quaint. Now all that’s left is convincing clients that they don’t know their customers as well as they think they do. Hopefully that won’t take another fifteen years.

Next month, we are reading Rushkoff’s Program or Be Programmed: Ten Commandments for a Digital Age. The meetup will be held on July 20th, location TBD. Space is limited, so make sure to sign up early.

In case you missed any of these articles, you can find them all below:

Mark WeiserThe Computer for the 21st Century (1991)

Jef RaskinIntuitive Equals Familiar (1994)

Philip Johnson-LairdMental Models, Deductive Reasoning, and The Brain (1995)

Lauralee AlbenAt the Heart of Interaction Design (1996)

Donella H. Meadows – Places to Intervene in a System (1997)

Brian EnoThe Revenge of the Intuitive (1999)

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Retail 2.0 – Not Just Brick and Mortar Anymore

by Conway Liao
June 16th, 2011

Once a week, the XD team at Fluid New York explores offline experiences outside the confines of our studio. We think it’s important to take a step back from the digital world and approach design holistically,  experiencing physical manifestations of brands in person. This week, we walked through New York’s SoHo shopping district to see how branded offline experiences relate back to digital spaces and vice versa.

The borders between physical and digital are further being blurred as traditional brick and mortar retailers are laying stake in the digital space. Mobile computing is nearly ubiquitous and instant access to information is almost at everyone’s fingertips. In addition, the attention span of people have become shorter and this poses a challenge to brands. Brand consistency is key to communicating to your target audience and in today’s fast paced retail environment, there’s no room for error. A marketing message that runs astray can have a huge impact on business.

During our outing, we’ve noticed many retailers doing great things with new technologies and some not so great. There has been a recent trend with stores using tablet computers to allow their consumers to browse through their product catalogue within store. It’s a static and passive experience that most of the time, does not engage the customer. Some of the problems with this technology are:

  • The technology does not tell you where to find items in store.
  • Proper QA testing of the app wasn’t performed. The app crashed many times while browsing.
  • It may not be inline with your brand aesthetic. If your brand has a gritty, industrial feel to it, placing modern, shiny tablets throughout the store takes away from the overall brand experience.
  • While the “cool” factor may be there the fact of the matter is that it can alienate the consumer, especially in tablet form.
  • You cannot replace good old customer service with shiny tablet device. There is no substitution for face to face human interaction.
  • Instead of focusing on the products in the store, your consumers are fixated with trying to figure out how to navigate through a mobile experience.

To conclude, always keep the end user in mind when designing an experience and remember that he/she comes first and the technology follows. With new technologies being released daily, it’s easy to lose sight of who you’re designing for. As Experience Designers it is our responsibility to make the transition from physical to digital as seamless as possible for users and the focus should be getting to know the end user and their technological needs and wants and then finding the technology that suits them. The tablet computer will not be the the answer to elevate your brand and increase conversion and raise customer satisfaction. There is one trait that successful brands all have in common:  Their solid dedication to Customer Service. When designing, think of ways to design user experiences that enhance customer service and engagement.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Innovation

by Andrew Guldman
June 10th, 2011

I attended the GlobalLogic Innovate! conference on Tuesday and Wednesday in Palo Alto. We work with a development team from GlobalLogic (formerly Cubika) in Argentina. Although some of the sessions were geared towards a more corporate audience and were a bit dry (imho), some of the other sessions had some interesting perspectives on innovation that directly applied to Fluid. Some highlights:

Sal Khan
Sal Khan, the founder of the Khan Academy, talked about how the Khan Academy came into existence and now thrives. The Khan Academy is turning the educational system on its ear by allowing students to master material independently at home, and better leverage teachers time at school to help struggling students and to synthesize the basic materials into more interesting projects. (Of course it also works great for independent study without any classroom time at all.)

The Khan Academy uses YouTube for instructional videos, offers online tests, and organizes all the materials. It also provides a dashboard for teachers or parents to oversee the work of their students. There is nothing especially trailblazing in the technology. They offer valuable content (the courses) in a way that scales well on the internet. Sal saw and addressed an immediate (and initially fairly modest) need, which grew incrementally based on concrete needs. And the result is a revolutionary fix for a problem as daunting as our befuddled educational system.

Geoff Moore
Geoff Moore is a venture capitalist and old school high tech Silicon Valley guru.

We need discipline around innovation. It is not inherently good. One must consider the return on the investment in innovation. We should focus on the key “moments of engagement” in your business (such as the initial impression of a PDP, for example). There are 3 goals of innovation:

  • Differentiation: Break new ground. Must be ambitious.
  • Neutralization: Keep up with your competitors (Microsoft is the master of this). Must be fast.
  • Productivity: Save money. This equates to “best in class”, which is not terribly sexy but can be good business.

The three goals are mutually exclusive. Deliberately choose which you want, and maintain discipline to achieve it.

Tom Fishburne
Tom is a “marketoonist”. He was previously the VP of marketing at Method Soap, a company that depends on innovation to survive. Before that he worked at General Mills, a company that does not.

“Usage is like oxygen for ideas.” It is hard to get meaningful feedback from focus groups about products or product categories that do not yet exist. It is almost an oxymoron. A better alternative is to take products to market and see how they do.

In order to innovate, one must dare to differentiate and take risks with those differentiations. When innovating it is important not to dilute the creative ideas to the point that they no longer differentiate and are therefore irrelevant. To innovate one must nurture the germ of the creative ideas, and make them more revolutionary rather than safer. Most good ideas get killed by over-cautiousness.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter