Designing Superior Shopping Experiences

Online shopping should be fluid, visually exciting, and immersive.

Article No :432 | November 30, 2009 | by George Plesko

Imagine shopping in a store where the displays never change. Customers select items by browsing through monolithic aisles of products. Store displays are minimal and uninteresting. Items in the displays are hard to find or even unavailable. This doesn't seem like a great shopping experience, does it? Yet this is what online shoppers experience (and accept as standard) on many large e-commerce sites.

At Allurent, our multi-disciplinary team of designers, information architects, user interface and visual designers are passionate about transforming online shopping from a utilitarian activity into an engaging, dynamic experience. We are convinced that online shopping can be infinitely more exciting and rewarding than the banal, page-and-scroll environment many of us settle for today. Improving the shopping experience can lead to the kind of metrics retailers dream about: increased consumer loyalty, better brand differentiation, higher conversion rates, greater customer satisfaction, and higher profits.

Online shopping should be a fluid, visually exciting and immersive experience. By designing great shopping experiences free from the constraints of HTML, we can fully exploit the rich audio, video, animation and user interface capabilities of modern personal computing.

Agility to respond

Traditionally, retailers need to plan to build new features, redesign, and merchandise their sites far in advance. The time-to-market cycle can be surprisingly slow. Today's merchandising tools are surprisingly primitive. At Allurent, we've been working on a set of solutions that enable companies to update and improve their sites quickly and easily.

For Borders, we recently built a feature called The Magic Shelf, which was an interesting challenge. Borders came to us with an interactive bookshelf that had already been built in Flash by an outside agency. Essentially, Borders populates the shelf with books and CDs, and customers can scroll horizontally and vertically across it. But Borders wasn't able to easily maintain the shelf or easily update the merchandise—and it was not commerce-enabled.

We rebuilt and redesigned the shelf and connected it to the Borders product catalog. Using our Visual Merchandiser, Borders is now able to change the bookshelves and merchandise on-the-fly with WYSWIG drag-and-drop simplicity. After Sydney Pollack passed away, Borders was able to populate a retrospective shelf of his work by the next morning. The time to go live was cut to only a few hours.

Catering gracefully to lifestyles

It's essential for retailers to come up with innovative approaches and multiple access points that cater to shifting lifestyles. Similar to having multiple brick-and-mortar locations, the online store needn't have just one location. Soon, there might not just be one Borders site. Rather, there may be a mobile site, an iPhone site, and a downloadable AIR application connected to all of the above. You will likely be able shop through your home entertainment system, via satellite applications, and on blogs through microsites.

Certain vertical markets are experimenting with new shopping experiences more deeply than others. The fashion industry, for example, with its increasing seasonal demands, is apt to innovate more aggressively than most. Fashion by nature lends itself to exciting imagery that can be put together in new ways relevant to different forms of media.

The "Swiss Army knife" approach

Retailers increasingly want to integrate diverse interactivity into their sites—ratings and reviews, links to Facebook and del.icio.us, tagging, videos, blogs and more. Yet retailers also want to their sites to be simpler and easier for customers to use.

The challenge on the part of designers is to take all of these features and make it feel like all feel like a rich, cohesive experience rather than a "Frankenstein" site. I like to use the analogy of a Swiss Army knife, where the customer has all the tools they need at their fingertips and can unfold them as needed. When they're not being used, everything folds neatly back into place and out of the main focus area.

Make shopping serendipitous

Serendipity: the occurrence and development of events by chance in a happy and beneficial way.

Online shopping needs more serendipity to feel like an immersive and rich shopping experience. Customers need to brush up against items they weren't necessarily looking for. The practice is common in catalogues (think Crate & Barrel room views) and in brick-and-mortar stores (think wall displays and mannequins). Shoppers get to see a wide range of products, rather than tunnel down to one product category.

The online approach, however, has typically been organized into strict categories. If someone is looking for a top, they drill through the navigation to find pink tops. Navigationally, it's difficult to add or remove filters dynamically to browse in fluid ways. In the process, shoppers bypass everything else — except for the occasional cross-sell. Most of the site goes unnoticed.

We recently built an interesting serendipitous solution for Anthropologie. Using Adobe AIR, customers can download a portion of the Anthropologie catalog to their desktop. The catalog was based loosely on a theme. The initial version has a beach theme. Sandals, swimsuits, sunglasses and other "beachy" products were scattered along a horizontal strip. The layout had a handmade quality and felt unique and special rather than generic and automated.

Our Display tool allowed merchandisers to easily drop products from the catalog onto the strip, rather than having to open Flash and manually create links or embed imagery in the application. Customers were able scroll through the strip, add notes to items of interest and purchase. Each product felt specially chosen and the experience felt more like shopping at a boutique rather than shopping at the local home center for clothing.

The most unique feature was "shop by color," where customers selected favorite hues from a color palette, and saw products that matched displayed in a color wheel. The randomness in the product selection and the immediate dynamic quality made it fun to use as well as different from other shopping experiences. Instead of shopping for a specific product, customers were browsing in a way that was similar to walking into an Anthropologie store.

Retail role models

So what are some of the shopping experiences I like? In recent years, Nike has been doing an outstanding job extending its brand. Its mini sites are all amazing and unique, yet clearly remain under the same branded umbrella. They're innovative, usable, push the boundaries and are still very shoppable.

Etsy.com is a marketplace where people can sell handmade goods. Etsy offers a number of different ways to view merchandise on the site: chronologically, by color, by story, or by category. Etsy lets consumers discover the products in a way that works for them.

Home furnishing giant Ikea has been doing a great job offering interactive video online to walk potential buyers through fully merchandised rooms—just like you'd shop in any of their physical retail locations. Each room is very different and even employ actors with different personalities that help customers better relate.

Uniqlo is a Japanese retailer that's moving into the U.S. and doing some really interesting things with navigation. Using their Uniqlo Explorer on their US site, customers see a full page product image. The image then transforms into a bitmap image. The bitmap is composed of a matrix of tiny product shots. Clicking on small product shot will display that product full-screen and then transform that image into a matrix of other products.

The Volkswagon.co.uk site does a great job of integrating video and offering a fluid car configurator application. There's a lot of functionality and features, yet it feels simple and fun to use. Finally, Ralph Lauren's Rugby.com site does a great job of extending the brand using video, interesting displays, and styling tips, resulting in a cohesive, rich experience.

Walking the fine line between innovative and useful

As users become more sophisticated and retailers compete more fiercely for online market share, design teams are challenged to find the balance between innovation and usability. We do a lot of user testing throughout our design and development processes, and strive to make it easy for a buyer to make a decision by decreasing steps, no matter how traditional or innovative the design is. We're always looking for ways to streamline the approach by eliminating pages and unnecessary information that customers have to wade through to get to that the ultimate destination: a purchase.

Of course, our clients have specific business goals that drive the project. In some cases, they're looking for a better checkout experience. Other times, they want to improve the overall experience, gain traction over the competition, or rebuild their site from the ground up. If we meet the client's goals, the success metrics will follow. For example, Anthropologie realized a 24% increase in conversion rate with its new checkout system over the previous HTML cart, and Urban Outfitters experienced similar results.

Of course, we follow an internal process that involves a discovery phase, wireframing, and prototyping, user testing, and then implementation. When we go live, we watch the analytics information carefully. The ultimate user test is when thousands of people go through your site and we see where they're really going and where they may be dropping off. At that point, we streamline things further.

Allurent is the first company I've worked where it hasn't felt like designers are throwing things over the wall to the developers. There's a huge amount of back-and-forth between the development and design teams. We have some high-level developers who have worked on really complex backend e-commerce systems, as well as front-facing applications. During iterations, these developers can really help inform our design work. I'm constantly working with developers and tweaking transitions between different types of information, working on the fluidity of applications and how they feel.

It's an interesting, exciting time. Like so many other designers who started out in print, leapt onto the Web, and are now immersed in rich interactivity, I feel lucky. The shopping niche is a corner of commerce where designers can step back and see their efforts realized through real-world success.

This article was originally published on the User Interface Resource Center (UIRC). For more info, please see http://uxmag.com/uirc

Comments

February 15, 2011

I don't think it's about the designs and it's more about the products, as long as the customer is satisfied with the products and services on a website it shouldn't have serious reasons to switch to a different website.

Even shopping has evolved from the traditional forms to more challenging forms that are supposed to enhance customer loyalty. Frankly I don't think it's about the designs and it's more about the products, as long as the customer is satisfied with the products and services on a website it shouldn't have serious reasons to switch to a different website. Incentives in the form of an easysaver may also help, an this is one example from hundred of creative examples.

We need to cop to a mistake with this article. We acquired this article along with a lot of other content from the UI Resource Center. When we selected this article for top-posting, we didn't notice that it was over a year old. Since we published it as new instead of just posting it to our archive, it gives the impression that the ideas and techniques described are the most current ones being employed by Allurent. This from George Plesko, the article's author:

"That article is at least 15 months old and pretty out of date regarding technologies and what Allurent is involved in at the moment with our customers."

So we offer our apologies, both to our readers and to George and Allurent, for the confusion we created.

Thought the article may be out of date, the discussion of the suitability of Flash Platform technologies for applications like this is still very interesting and very relevant. Thank you to everyone who has engaged passionately in this discussion!

This is akin to painting Da Vinci's 'Last Supper' on the head of a pin. Although much blood, sweat and tears were shed to create these experiences, I'm afraid the final product is less impressive. I've been through all the examples cited here and fail to see the advantages Flash brought to the UX. Said another way, I fail to see why other technologies weren't leveraged to create equally rich properties. To Brady's point, this seems less about what users (and clients) want/need/expect versus what Allurent wanted them to have. Instead of asking, "Should we?" Allurent asked, "Could we?"

For example, when I enter Anthropologie, I'm greeted with Flash-based content (immediately following the "Just a Moment" load script. I'm already turned-off) which has some tasteful, albeit slow-to-respond (Brady mentioned CPU drain, right?) interactive bits — all of which could have been handled with sprightlier JS. But, if I were to search for any of those individual items in Google, I'm linked to pure HTML content. Likewise, perusing the site via my iPhone reveals an HTML experience. And one that isn't a "banal, page-and-scroll environment" at that.

This raises some questions:

1. Why offer both Flash- AND HTML-driven content? It's a rhetorical question in my mind (and the answer does not speak favorably of Flash), but feel free to answer.

2. Was any consideration given to open source solutions before the final delivery platform was elected? What did those discussions sound like? What were the criteria by which you made your selection?

3. "Anthropologie realized a 24% increase in conversion rate with its new checkout system over the previous HTML cart." This statement baffles me as it implies (in the context of the overall piece) that the technology toolset was responsible for this success metric – namely, Flash. But the checkout routine doesn't have an ounce of Flash in it. Perhaps I've missed your point, but I'd be willing to bet there were many factors that yielded this increase, the least of which may have been your solution.

I'm not trying to belittle your talents or the incredible efforts that went into these pieces. They are beautifully designed and I’d be remiss if I didn’t say I’m envious of your client roster. Heck, I can even overlook the self-aggrandizing tone of this article (we all need to promote ourselves), but tooting the horn (and touting the promises) of Flash and aligned technologies rings as hollow as it did years ago when I worked with products like Scene7. In fact, it's sounding more and more like a swan song.

My issues with flash aren't immature designers, as you noted in the original comments, it's in the all-inclusive-replacement of the internet. Dive into Mark is on the right track, maybe the wrong wording, with:
http://diveintomark.org/archives/2007/05/02/silly-season

You can create engaging environments (yep, I've dabbled in all their variations for many clients http://bradyjfrey.com, and event tested shopping environments for large businesses such as http://bentlyreserve.com, http://kamalaspa.com and a few others in my portfolio), but at the expense of usability, accessibility, and a refined user experience. You're attempting to redesign the experience of the web in a design dictated by proprietary business perspective, and in your own interest of interactive media, not your clients. Look at all the extensive complaints on Adobe's on very checkout system, built on Flash and limited to basic, proper tabbing and bookmarking because it's stuck in a flash app.

Your magic bookshelf, in itself, seems like something chosen to be a flash application simply because you know flash... when it could be interactive on every device using open standards, without the CPU drain (not just on mac). While I don't advocate Javascript as an end all, which can easily break just as many experiences, it's not locked into a dead system without basic copy and paste or bookmarking functionality!

In that example, I look at Flash as a copout: a sacrifice made by lack of experience in more engaging and available technologies. It's sacrificing a percentage of marketable audience, and a rich interactive environment, and causing your client financial loss because of it. Pitching a 24% (without showing numbers) increase in a story, in the face of studies that show significant flash issues, doesn't necessarily boast for flash... in fact, I'd say that was a fantastic compliment to your design skills, not flash itself! How much of an added demographic would you have added by offering the same experience, and allowing real copy/paste, bookmarking, and other standard browser features?

Seriously, I feel like I'm repeating year old mantra's here - I have a team of designers, front end developers, back end coders, and IT folk I manage every day as an Art & IT Director. I don't hire people who make those bad decisions because I know they're killing long term value with dated technology... and why? Because of lack of knowledge of richer tools? Because of lack of experience in understanding usability? Because their design skills are limited to drag and drop functionality, floored by actionscript and then stapled onto open standards?

All pianos sound wonderful in front of a skilled artists, but some out of the box are built to sound flat. Flash is built to rebuild the web in the image of what Adobe thinks we want, not what I want, and not what my clients want or their clients want. Compliment it with real standards, sure, but using it as a complete solution is not the future of the web... especially with html5, and those of us already using it for clients.

I manage a team of 6 UI designers at a company making e-commerce tools. We've been doing a lot more work in Flex, and I have to echo your enthusiasm. It's opened up a lot of possibilities for us, and allowed the UI designers to some really great work. It's great for visual designers to be able to make really good looking scalable vector images. The developers also like it because of the nice clean dev environment and the object oriented nature of ActionScript.

Like a few commenters I used to be pretty skeptical of Flash, but the platform has really improved over the years.

It is no doubt that Flash has its own place on the web like for videos, audio, animation, and many interactive applications...Other than that Javascript can do all the basic transitions that's required most of the time especially in e-commerce. Using Flash to replace HTML in checkout process seems like a recipe for disaster to me (i think it's just the matter of time that Anthropologie will pull that Flash checkout off their site and replace it with the simple and accessible HTML - sorry no offense here). The web has evolved past the time of Flash splash screens and intro animations - yet we're still seeing a lot of them...Why? Because executives love sizzling animations and cool stuff. And to them, Flash animation is considered 'the user experience'. Another reason for Flash being overused is that many art directors, creative directors and visual designers at these large companies - with the exception of web native companies - don't have technical expertise (most came from Print background - and that includes me). Many just don't know the difference between Flash and Javascript. To them, anything that moves must be Flash. Shoppers don't always need cool animation to have a positive experience. That's we - designers that love cool stuff...
Anyway, the web is lucky enough that companies like Google, Amazon, eBay, Craigslist, Facebook, Twitter and countless others have taken another direction.

@Thomas: Do you think the problem with Flash is inherent to the technology itself, or just to injudicious use of it by immature designers and, as you put it, sizzle-loving executives? My inclinnation is to relate to Flash in the same way as JS: it's a tool that can be used for good or for evil. A hammer can be used to build a house, or to crush skulls... if some people use it to crush skulls, it doesn't mean the hammer is per se evil.

But you're right that a lot of people have gone overboard with its use. I think one of the weaknesses with the Flash Platform derives from one of its strengths: it has very few built-in constraints, and nearly anything is possible. But just because something can be done doesn't mean it should be done. To geek out a bit, I'll borrow a quote from Spiderman: "with great power comes great responsibility."

I think that responsibility rests with members of the UX, IxD, software engineering, and Web design communities. I think part of the problem up to this point has come from the fact that many companies farm out their Web (including e-commerce) projects to their ad agencies, who approach the problem from a branding and "sizzle" perspective, rather than from the user's perspective, or that of technical feasibility, etc. But the trend is that these projects are increasingly going to, or at least filtering through, vendors and business units focused on UX, CX, and real software engineering, with the ad agencies standing on the sidelines trying to influence the outcome.

"With Adobe's new tools, particularly Flash Catalyst, the advancements in Flex, and the introduction of Adobe AIR, it's a really exciting time for design teams."

...you're kidding, right? We are talking about web design, development, and the user experience, and you cite Flash as the future of development? That's not only embarrassing, it's a short sided example of repeating failures in web design. Not to mention a misguided way of teaching new designers!

I got my start in print, and I worked my way up to Art Director and the Web - but even I know that the future isn't flash, and it isn't controlling the page like print. Teach the future, not the comfortable same old.

@Brady Frey: I'm surprised by your response... The Adobe Flash Platform has come a long way from the old ways that people abused it to make irritating Web-fluff. Flash is about a lot more than just high-concept design now...Flash and ActionScript have evolved into full-fledged software development technologies.

Remember that the Flash Platform is inclusive of Flex, AIR, and other technologies that support the development of rich Internet applications. We're seeing fewer and fewer annoying, animated microsites and "skip intro" things, and more stellar examples of innovative UX and interaction design that are only possible using a rich-client technologies like Flash, Microsoft's Silverlight, or Sun's JavaFX. Flash Catalyst is indeed an exciting development since it further blurs the line between designers and developers, allowing for a more seamless and efficient working relationship between the two perspectives.

If I'm misunderstanding your objection, could you expand on your original comment? Thanks!