The New E-commerce

In the early days of e-commerce, 1996-2000, we spent an enormous amount of money on the systems that would drive sales. We were working hard to make online shopping part of the consumer lifestyle.

I’ll admit the pricing wasn’t always competitive, however, we eased the transition for the consumer by offering a bricks to clicks strategy. This strategy involved incentives for consumers to buy more online and bundling products to make the value-add proposition stronger.

At the time, Amazon was leading the charge. They were spending an exorbitant amount of money on marketing and planting the idea of shopping from the comfort of your own home.

When we look back from where we are today, Amazon is still leading the charge and is stronger than ever. Yesterday, they posted that their earnings exceeded their projections by 10% and their net sales increased 34% this year. They have become the largest online department store with the built-in e-commerce intelligence to understand what the consumer might want next.

Today, we have much more to consider in our online shopping strategies. If you’re building online shopping around a specific brand, you need to make it social and it needs to be targeted on the consumers’ lifestyle.

It’s not just social for the sake of social, rather it’s social in a way that allows the consumer to find the items that suit their lifestyle and share them with their circle of friends. Fab.com does a great job of building communities around things people like. It’s mostly geared towards Urban hipsters, nevertheless, the idea of making the products seems like treasure – treasure you can’t find anywhere else, is what makes the experience appealing to consumers.

Pricing isn’t so much a problem anymore as most retailers have architected their product fulfillment to factor-in the cost of delivery and the absorption of that cost in order to make buying online much more enticing (free shipping for X-number of dollars).

Consumers are more confident now. Even with clothing, which used to be risky to buy online, it seems we’ve almost cleared that hurdle as consumers settle into the brands that they know in terms of sizing and style.

I think we’re now ready to go a step further with mobile devices. Stores don’t really need to keep as much inventory as they used to. They only need to offer enough sizes and styles for a consumer to try it on.

If it’s not the right color, no problem. They can use a branded mobile app to make their purchase from the store and have the right color delivered to their home for the same price. This tactic in combination with mobile payment through smartphones, makes it easier for the customer to get what they want and builds a great deal of confidence in the brand.

There a number of ways to leverage mobile and we’re just now scratching the surface. Starbucks’ mobile app has seen huge growth. Over 45 million transactions have been made over the last 14 months with their app.

While the idea of the mobile wallet is still in it’s infancy, I think consumers will be much more amenable to swapping their store credit cards for an easy app to make in-store purchases, using the same account to also shop online. Oh, and no more lining up at the till!

This system, coupled with a stronger lifestyle brand can make for a powerful combination when it comes to today’s consumers.

Links of Interest:

Starbucks’ CEO Discusses Q2 2012 Results – Earnings Call Transcript

AMAZON.COM ANNOUNCES FIRST QUARTER SALES UP 34% TO $13.18 BILLION

Are wireframes still valid?

We are now at the apex of cross-device and cross-platform application development.

The world we live in has rapidly changed over the last three years to a point where we are expected to get an application running on several different devices.

In previous posts, I’ve extolled the virtues of HTML5, CSS3 and the new Javascript libraries and APIs for rapid application development. HTML and CSS have come a long way and they’re all grown up now. Not only do they make rapid development more feasible, the same tools can be used to create rapid, interactive wireframes or prototypes.

One thing that has always been true about wireframes, clients really don’t understand them. I have always endeavored to wireframe in a way that is client-friendly, however capturing all the interactions in a static document can still make it difficult to put wireframes into context. You get very good at walking clients through the interactions (because chances are, they aren’t reading the functional notations) and you can capture  a lot of what needs to be communicated if you’ve carefully set-up the flow of your wireframe deck.

In this age of more start-up, less agency, the workflow is very much about the path of least resistance. In the past, I have done both static wireframing and interactive wireframing (or prototyping). I can tell you that it all comes down to time. There are many factors to consider. The scope and scale of the app will determine your approach. The number of core interactions and the fine-line between almost building the app and actually prototyping.

I would say that if it takes longer to place a static element on the screen and annotate it’s interaction, then prototyping is the best way to go. I’ve done my fair share of interactive wireframes in HTML, mostly using tools like Dreamweaver. There are newer tools, specifically designed for non-coders with a WYSIWYG interface that can be useful, such as Balsamiq.

Overall, I find WYSIWYG editors to be more frustrating and time-consuming. There is always something missing and you don’t have the degree of control that you would have when working directly with style sheets.

I’ve always known how to write code and have updated my skills in HTML5 and CSS3, so my preference is to prototype using some of the new frameworks available such as Foundation, which comes with a fairly extensive set of styles to work with. This, in combination with other tools like Placeholdit and Orbit, make rapid prototyping much easier and well, faster. Again, it comes down to time and choosing the right tool for the job. You really need to know whether it’s going to take you longer to create interactive wireframes vs. static wireframes. If your client is paying you by the hour, you need to make a responsible choice.

As I eluded earlier, the modern mindset is to think more like a startup and less like an agency. Today it’s all about product design and not so much about designing for a specific project. Keeping this in mind, it behooves all UX designers and Information Architects to have solid prototyping processes in their toolbox. It’s part of the job, more now than ever.

Here’s my recommendation: If you don’t know how to code using HTML5, CSS3 and some basic Javascript – that’s the first place you need to start. Really, it’s not rocket science and with the new code standards, it’s never been easier.

My toolkit includes:

Omnigraffle for wireframing (lots of great templates and libraries on Graffletopia and you’re probably already using many of them)

Foundation – for rapid prototyping. It’s up to you how you fine-tune the fidelity in your prototype. If you are pitching an idea to a group of investors, you should work with a designer to get a higher-fidelity prototype. Sorry IA community, I know I’m bending the rules on this one but it’s a fact. Investors aren’t doling out seed funding based on wireframes alone.

Orbit: Quick jQuery image slider plugin – this one is slick and dead easy to use.

Placehold it - An easy placeholder generator that really works well.

Did I mention CSS3? Learn to manipulate CSS3 and prototyping becomes a breeze.

Adobe CS5 Photoshop and Illustrator: Everyone in digital should at least know the basics of Photoshop. For a UX designer, knowing your way around Illustrator is a huge bonus. You will, at some point, need to create custom vector elements.You should include conceptual drawing in your toolbox as well. It doesn’t have to be realistic or “polished”. But you should know how to do a good line drawing.

A special thanks to the team at ZURB for pioneering kick-ass processes for interaction design and for providing so many great tools!

Amazon still rules!

Since the death of Steve Jobs, Jeff Bezos is starting to appear more frequently on magazine covers. I still have the Time magazine edition with Bezos as person of the year from December 1999. I remember those clever Dot Com commercials Amazon did in 1997, 98, 99. They were a startup in the hole – in a big way.

They were losing money like crazy but Mr. Bezos just kept on smiling. He didn’t care because he had a vision and the ‘stick-to-itiveness’ that most of us lack. He knew that building up a faithful user-base would take time and they would lose money but it was all part of the plan. Those were the days.

They aren’t in the hole anymore. They have an e-commerce intelligence (machine learning) and basically invented personalization for online shoppers. It’s pretty hard to beat the king.  I’ve used Amazon as a shining example of usability many times. I look to it for how a website should communicate with customers. Still, here we are in 2012 and most websites and apps still can’t get user messaging right.

It’s about three things: service, selection and services!

• Give a consumer the service and they will buy a product from you.
• Give them the selection and make it easy for them to choose and they will buy a product from you.
• Give them some services to expand their activity on your application and return more often and they will buy a product from you.

Amazon is NOT paying me to say this. I can honestly tell you, every time I see someone receive a package from Amazon, they say the same thing before they open it, “I love Amazon”.

They’ve simply done it right.