Last week we asked “Is Responsive Web Design Right for Retailers?” and you responded. Our interview with Steve Reighgut, Fluid’s Director of Engineering, struck a cord with readers and retailers. Right on.

So we continue the RWD conversation with Abigail Hart Gray, Fluid’s V.P. of User Experience. Fluid’s UX team is at the forefront of designing in digital to meet and exceed consumer needs. RWD gives them a new palette with which to play.

My top three take-aways:

1. In-the-moment needs matter: Decisions about RWD should come down to whether customers have expectations of your brand that differ by device.

2. RWD is mobile’s best friend: In Abigail’s words, “Mobile is the final frontier of shit usability. RWD is a panacea for this almost universal issue.” (Seriously why would I say that any differently?)

3. RWD can increase mobile conversion rates: The notion that consumers aren’t willing to convert on mobile is outdated. It’s blaming users for a usability issue – that RWD can help solve.

Now on to the interview…

[Amy] What is Responsive Web Design?

[Abigail] In its most pure definition it is a device agnostic way to manage your website with a single code base that works across any screen resolution.

RWD detects device resolution and then adjusts content layout and interactive feature differences based on the screen real estate of the device being accessed.

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

[Abigail] RWD requires much less maintenance cost and ensures device appropriate experiences without having to worry about adjusting for new devices that hit the market – which we know happens every day. The experience is always going to look good.

[Amy] What’s the biggest challenge of RWD?
(more…)

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…)

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…)

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…)

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

Too often when shopping online, I run across amazing lifestyle images featuring a product I would like to buy (or at least learn more about) but the retailer makes it difficult or impossible to find. Typically I’ll click on the image only to be faced with a confusing category page where if I’m lucky, I might find the product I’m after.

The simple fact is that lifestyle imagery is engaging and fun: just look at the stack of Williams-Sonoma or Patagonia catalogs on the average consumer’s coffee table. However, turning that imagery into something web-ready by adding copy takes too much time and specialized resources (designers) and might even detract from the imagery itself. This is disappointing because as in the offline world, vivid imagery is engaging and can both build brand and increase the chance a customer will buy that item.
(more…)

Several years ago, I had the “misfortune” of being introduced to my first digital SLR camera. I was immediately hooked and since then I’ve been suffering the same symptoms as all other camera hobbyists: a compulsive need to purchase (or drool over) expensive camera accessories and gear. So when I “need” more camera gear, I’ll go online to shop because, aside from the obvious convenience factor, I like the ability to bargain hunt and easily research products. But with so many online camera retailers out there, it’s getting pretty hard to differentiate between the sites. They all sell the same products, offer the same product information, in a similar layout. So when I do my research, I’m usually looking for two things – product price and customer product reviews. These are the two main components that really help me determine whether the product is highly recommended at a price point I’m comfortable with – which ultimately affects my decision to buy. But are there other things that retailers can do to help differentiate themselves above the rest? (more…)

My initial goal was to research and write a blog on sneakers, the sneaker culture, and what drives a ‘sneakerhead’ to seek the most limited/hard to get/wait-in-line-for-2 days type sneakers. But as I set out on my task to contribute to the Fluid blog, I stumbled onto the site miadidas.com. I say ‘stumbled’ because I have not heard or seen much about this site. I knew about NikeID, YourReebok(formerly known as RBKCustom), and the newly updated Vans Custom site among others, but was surprised and somewhat disappointed about just discovering the custom site for Adidas shoes. I’ve seen the in-store experience at the Adidas store in San Francisco, but was not aware it was migrated to the web – or at least a version of it.

With that said, I decided to focus my attention to the site and give my personal review. (more…)

A key aspect of Fluid’s user-centric design approach is to engage in usability research early on in the design process. One key element of our approach is to administer usability tests using interactive low-fidelity prototypes. Throughout the years, Fluid has developed a unique technique of developing richly interactive prototypes by adding HTML, CSS and JavaScript within Adobe Fireworks to create click through prototypes that are easy to use, manage and update.

Recently, Adobe asked Fluid to share our approach of rapid prototyping with the Adobe Fireworks and Adobe Dreamweaver developer’s community and we were both honored and excited to do so.

Our in depth article, “Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4″, can be found on Adobe’s website here:

http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html

Yesterday, we discussed the key elements of packaging design, including messaging, presentation, structure, and brand artifacts. Using our “Oil of Olay” package as a case study, we highlighted the consequences of the “barrier to entry” that is created when packaging fails. Today, we’ll discuss how the design guidelines for packaging design apply to the practice of interaction design using another case study.

First and foremost, think about your web site as your “packaging,” and design accordingly—do not create a barrier to entry that separates customers from their end goal and hinders conversion.

When we reconsider the previously discussed factors of packaging design in this context, they align nicely with some familiar elements and ideas of good usability. We’ll review our packaging design principles in a new context below. As a case study, we’ll use the Rich and Skinny brand jeans site (http://www.richandskinnyjeans.com/RichAndSkinny/).
(more…)