Responsive Web Design (RWD). The digital industry is buzzing about it. Our clients are asking whether to invest in it. And Fluid is at the forefront of it.

In order to get you answers I sat down with Steve Reichgut, Fluid’s Director of Engineering. He is a respected industry leader in RWD. Steve and his team live and breathe cutting-edge technology. They’re smart about when to, and when not to, apply it.

My top three take-aways:

1. This isn’t just about technology: Responsive Web Design with a “Big R” is about ensuring that the user experience responds effectively on multiple devices in multiple contexts. This broader concept can be implemented in many different ways.

2. RWD is not an all or nothing decision: The question ‘Should I use Responsive Web Design or not?’ is probably the wrong question to be asking.

3. Thinking through support for RWD is essential: Content updating challenges that currently exist between marketing and tech teams get amplified with RWD. Trade-offs between cutting-edge and desire for control are inevitable.

Now on to the interview…

[Amy] What is Responsive Web Design?

[Steve] In it’s purest definition, the “Big R” RWD, is about ensuring that what the user is experiencing responds effectively on the device they are using in whatever context they are in. This can be achieved in a lot of different ways.

RWD though is usually used as a technical term. It is literally using three things to build a responsive experience: a grid system, media queries to determine viewport size and flexible images that size appropriately.

[Amy] What’s the best thing about RWD?

[Steve] The best thing is the whole idea that the user gets an optimal experience no matter where they are coming from. RWD gives the user a great, seamless experience.

[Amy] What’s the biggest challenge?

[Steve] Determining how it’s going to be supported operationally. RWD doesn’t create new problems, it amplifies the ones you already have. Who’s going to make changes? And who’s going to make sure the changes render right on all devices?

The other challenge is that people are combining the “Big R” definition of RWD with a specific technical solution. So they end up asking “Do I do RWD or not?”

[Amy] Is “Do I do RWD or not?” the wrong question to be asking?
(more…)

Facebook Home has launched. And it’s been in the marketplace long enough for opinions to be formed. My Tweet-like summary?

Status update: Facebook Home / Phone is more marketing campaign than product innovation. #homesortasweethome

How I described it to my mom: “Facebook Home is a screensaver for your phone that showcases Facebook activity.” I was feeling quite proud of this analogy until I realized that it’s a widely used description.

The exception to this is chat heads – which allow your live chat to carry across the mobile experience. This benefit is comparable to being able to talk on the phone and surf the web at the same time. It makes the user experience seamless instead of siloed. Yay.

The #1 thing Facebook Home has in common with digital commerce?
It achieves the goal of removing a click. It literally brings Facebook one layer up in the user hierarchy. And in the process trumps all other apps.

As anyone involved in digital commerce knows, this is a big deal. A bigger deal if adoption is large (or even a small percentage of Facebook’s users).

That said, I’m not sold that Facebook Home is a big deal. Interesting? Yes. Here are five reasons why…

1. Facebook Phone is not Facebook’s phone:
The phone is an Android. Facebook is usurping Google’s OS and user interface. Okay a different way to put it – Facebook is utilizing Google’s open source operating system. What makes it the Facebook Phone? It’s being marketed as such via Facebook and AT&T. And Facebook becomes the default experience on the Android. This could never happen on the iPhone because Apple’s OS is locked down.

Mark my words: Wherever Steve Jobs is – he is laughing.

At the end of the day, if open source thrives, Google will be laughing too. Who gets the last laugh remains to be seen.

2. There’s no bouncer at the open source door
Google got an unexpected partnership with this product. In fact, Google may not have even known about Facebook’s plans. Eric Schmidt has expressed that Facebook Home is a good thing. It definitely reinforces Google’s open position (and by default, Apple’s closed position). But if I’m on the Google brand team I’m thinking through the implications. If I’m on the Google+ team the gauntlet has been thrown.

Don’t get me wrong I love open source (and um also my iPhone). Open vs. closed is the creativity of a crowd of developers vs. controlled one-source creativity. It’s a dreamy head-to-head. (Although Google and Apple may actually be fighting different fights altogether.)

(more…)

Will Your Site Withstand the Onslaught of Holiday Shoppers on iPads?

It’s likely over the past 12 months you’ve seen an increase in traffic to your site from iPads. If you’re lucky, you’ve also seen a corresponding increase in revenue driven from iPads. With the holidays right around the corner (you’ve started holiday planning, right?) and no shortage of growth in the iPad user arena, it’s critical your site be ready to deliver on customer expectations when they shop (and purchase) from their iPads this holiday season.

We know that customer behavior and purchase tendencies are different on tablets than from standard browsers and also from smartphones and those behaviors are starting to drive a serious divergence in customer expectations as they traverse your site across their various devices. As far as tablets go, customers expect a richer, more immersive, and, well FUN experience relative to their standard browsing and smartphone usage and that demands a different design approach to meet customer expectations. Simply delivering the standard browser experience to your iPad visitors will not differentiate your brand in the emerging ‘tablet-first’ design space. Customer expect more and if you can capitalize on that expectation, it’s likely you’ll also capture your visitors’ dollars.

Surprisingly, the majority of Internet Retailer Top 500 sites not only haven’t starting delivering tablet-specific experiences to deliver on customer expectations, but a wide swath of them deliver sites to the iPad that have serious usability issues. Issues that aren’t problems for the standard browser, but can present serious barriers and frustrations to visitors on iPads.

Assuming there’s no time at this point for a tablet-specific design for your brand’s site, I’ve created a list of common usability issues seen when standard experiences are delivered to iPads, as well as some hints on how to avoid them. Take a look and see any of these issues plague your site, and fix them pre-holiday. Then, start planning for next year!
(more…)

An article was recently published claiming “Marketers Find Less than Half of Analytics Useful for Decision-Making!”   In full disclosure, I added the exclamation mark to the headline because I felt like the tone of the article implied a minor hysteria over the implication that ‘less than half’ was a staggering figure.  In fact the article caught my eye because that seemed to be a higher percentage than I’ve witnessed. Not because companies don’t understand the potential power of analytics but because “analytics” often simply becomes “data collection” which in and of itself, is not useful to anyone really.

Let me back up.  I’m a big believer in Avinash Kaushik’s “So What?” analytics philosophy that says if you can’t answer what action or recommendation could result by tracking a certain metric after asking ‘So what?” three times, you shouldn’t bother tracking it. It’s a great philosophy and in theory any organization subscribing to this philosophy should be running a lean, mean analytics discipline.  In practice however, most companies don’t ask “So What?” or even “Why?”.   Instead they are swimming in a sea of data with the end result being analysis paralysis.

Sometimes this is self-inflicted (tag everything and review hourly!) but in most cases they’ve companies implement an analytics package and now that data is being collected, they just don’t know what to look at or care about. So they end up doing nothing.  As a colleague once put it “Your web analytics tool is the best tool you’ve already paid for but aren’t using.”

Here at Fluid we’ve recently overhauled our Analytics practice within our Strategy group to make sure even our approach to data is user-centric.  Why?  Simple.  We want to help our clients:

• Achieve a deeper understanding of customer behavior and motivations
• Answer the “why” behind the “what”
• Make quantitatively as well as qualitatively informed design decisions
• Work within a clear framework for measuring success and proving ROI
• Get past analysis paralysis and turn mountains of data and isolated metrics into insights and actions

As digital design and user experience experts, we have the talent, knowledge and expertise to help our clients get beyond the “what” of their data and get to the “why” and “So What?”   Sounds great, right?

If what you’ve read so far is resonating, you know that it’s not always as easy as it sounds.

When we start working with clients on an analytics strategy we focus on a few key things.  If you are at a place in your organization where you’re ready to re-evaluate your analytics strategy, focusing on the following could help you get started.

1. Forget about current data, infrastructure, platform, etc.  What are the primary goals of your digital initiative whether it be web, mobile, social?

When answering this question don’t think about metrics.  Think about answering as a narrative. For example, “We want customers to learn more about our company.”  or “We want more people reading our blog.”  or “We want to increase revenue coming from our website.”

2. What are your current benchmarks?

It’s okay if you don’t know.  This may be a rhetorical question that turns into a ‘to-do’ once #1 is answered. In some cases we find out the benchmarks are completely arbitrary – in other words, not benchmarks at all but pipe dreams.  We don’t want to be set up for failure so establishing real benchmarks from which to set goals in imperative.  In other cases we find the benchmarks have nothing to do with the articulated goals and they need to align in order to really measure success.

3.  Who cares about this information?

We try and be realistic when we answer this question by framing it as not only “who cares” but “who can authorize the action?”   It is difficult and frustrating to put together a fantastic analytics strategy and have wonderful, actionable insights, only to realize the people who need to authorize budget for changes as outcomes of the data findings were never part of the fantastic analytics discussions.  Answering this question can help you make sure the right stakeholders are involved in the analytics strategy.  It also helps you, as the analytics “guy” or “gal” keep focused on the the bigger organizational goals and objectives.  It’s all too easy to get so excited or so deep into the data you become one of those “tag it all!” people so by leading up a focused practice, it will be easy for you to build a solid business case for change with the decision makers when you’re able to tie clear KPI trends to articulated business goals and objectives AND those decision makers helped formulate the KPIs.

Once you establish the groundwork by answering the questions above you can get more specific; feature ROI, custom reports and dashboards, real time data analysis, multi-channel funnel reports, conversion optimization, interval reporting and automation, etc.  All that good stuff that really helps you get a deeper understanding of your customers and their behaviors and issues with the experience and start formulating a story around your customer’s journey.

Just make sure you are always answering “So What?” when you enter into discussions around tagging X,Y or Z to track A,B or C.

Footnote:
If you are a Google Analytics user, check out Avinash’s blog.  There are always interesting discussions about web analytics and some good Q&A.  Justin Cutroni’s blog is another good resource for you.  He’s currently an “Analytics Advocate” at Google.  His stuff tends to be a lot more tactical and has great report templates you can add to your GA dashboards.

I’ve $30 on my mind. $28.57 to be exact. This is the per user price that Facebook paid for Instagram last week based on Facebook’s $1B offer and Instagram’s 35M users. In my favorite article about the acquisition Andy Baio of Wired (my ten year-old self hopes he’s related to Scott Baio) breaks down the cost per user of thirty notable internet acquisitions over the last ten years.

His conclusion: Instagram was a good deal. And not indicative of a bubble. See his analysis here.

Three reasons why this is awesome:

1. Cold hard facts. Baio uses a cost per acquisition model to which any marketer can relate. It makes $1B tangible. eBay paid $84.42 per PayPal user. Yahoo $111.11 per Flickr user. Google $48.53 per YouTube user. Intuit $113.33 per Mint.com user. At $28.57 per Instagram user, Facebook is looking rather savvy.

If the relative data cohort was how much it costs to feed hungry children or how far to the moon Kevin Systrom’s 400M new $1 bills would reach, we’d be telling a different story. This is what I love about data – it holds rich stories.

2. $30 can get you a lot of different things. Some ways to spend $30:

15. Fifteen days of access to a San Francisco gym
14. 3.75 months of NetFlix (streaming)
13. Five round-trips over the Golden Gate bridge (cash not FastTrak)
12. Thirty $1 tips to buskers on the L subway platform in NYC
11. 37.5 clicks on a Facebook ad (based on average CPC of $.8)
10. Ten minutes of a therapy session
9. Two mixed drinks in a swanky Manhattan bar
8. Thirty songs on iTunes (more…)

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.

I had the pleasure of attending the Adobe MAX 2011 conference in Los Angeles this year as a featured speaker, and Fluid was selected to appear in the keynote address for our work crafting customer experiences for multiple devices across channels, from web to kiosks to mobile phones and tablets.

(more…)

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

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.

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.