Service-Oriented eCommerce Design: Part 1

Posted by: Nick

If you read my post on page load times, you may already be privy to the understanding that there are a myriad of factors that can negatively affect the experience of your users. With eCommerce websites these minor idiosyncracies and headaches can pile up quickly, and given how notriously fickle web users are, this can invariably affect the bottom-line by driving them (and their dollars) away from your site.

For a number of companies, online shopping carts have "quick buck" appeal because they represent the ability to sell products to a wide-audience with minimal overhead and support. But this simplistic understanding is what kills many small eComm sites and hinders much larger operations. The fact of the matter is that good, successful eCommerce sites are more than databases filled with products; they're service-oriented experiences that are designed from the ground-up to minimize frustration, remove needless steps, and maximize consumer visibility.

So what does this all mean?  A lot, actually. Conservative estimates claim that the average cart abandonment rate hovers somewhere around 59.8%.  That 59.8% figure represents users who have added something to a cart,  dropped out of a site and never came back. Having a cart abandonment rate sit at that level across a 11,000-site sample speaks to a larger systemic problem in the way eComm sites have been handeled up to this point; poor design choices, poor management, poor direction.

Below are some of high-level issues to be mindful of when thinking about your online store.

Problem #1: Minimize Frustration

Good carts don't anger consumers or try their patience.  While many would see this as a "no, duh" insight, it's not the prinicple itself that people have a hard time understanding; it's the execution.

One of the most common examples of poor execution is the boiler-plate checkout process. For users it's long, arduous, and loaded with potential pitfalls. Worst of all, users who get frustrated during the checkout process are users who have already decided that they want to give you their money. When you have people who are ready and willing to throw their money at you, making their lives difficult is the last thing you want to do.

So how do eComm sites get it wrong? If the shortest distance between any two points is a straight line, then most checkout processes are winding, branching roads. Between pushing users down a different path by forcing them to register an account to making them navigate through page-after-page-after-page of forms, standard checkout processes do a horrible job of providing clarity and keeping the customer motivated.

Solution


The ideal checkout process requires no more than two pages; one page being devoted to information gathering and user assessment, and the second page acting as a speedbump for confirmation purposes.


There is little reason for not allowing users to quickly review their purchase and enter their billing and shipping information on the same page. It removes needless steps, minimizes wait time and allows users to quickly assess and enter any information that's relevant to their purchase in one area.  The one-page method can also accomodate secondary, lead-generation functionality like user accounts and newsletter sign-ups.  In fact, with some clever design tweaks and a sharp eye, there's very little that you can't do within the context of a single page.



In the left column are all of the cart items,
in the right column is the checkout form.
Now was that so hard?



Next Up

Next up, well address other oversights and ways to easily address them with very simple, straight-forward solutions.

Rapid Prototyping in Web Design

Posted by: Nick

When I look at the web design processes being used by various freelancers and small- to medium-sized web design agencies, I find that all too often they're grossly oversimplified, static and inefficient.  Between having to collaborate and bend to the will of the client, many designers often wind up bumping up against time or budgetary restrictions due to the volume of criticisms and requests that are made on the way to producing a finalized design. As a designer myself, being able to quell these demands as early as possible helps me reduce the amount of labor-intensive revisions later on and ensures that the final product meets or exceeds a client's expectations.

What is Rapid Prototyping?

Rapid prototyping is the process of drafting multiple rough states or instances of any given system for future development. Being able to do this in a quick, iterative fashion allows for a continuous feedback loop that can lead to better design and a reduction in the number of changes that occur during development.  Furthermore, because of its quick pace, rapid prototyping can free time up for experimentation because it tends to focus on a project's more easily-understood visual elements; allowing designers, team members and even clients to reach a consensus in less time.

Rapid prototyping is NOT about fidelity or permanency. While there are certainly a wide-range of methods for prototyping a web design, rapid prototyping eschews the need for full-on simulations or near-finalized designs. It is a fast, loose process that is, at its heart, a way to get preliminary ideas on the table so that you can easily test, modify, and finalize design elements. An effective prototype is all at once fast, disposable and focused.

Where Do I Start?

Prototyping a site doesn't encompass all of the site elements, just the important ones.  For the sake of keeping it simple; if you need to explain in vivid detail how something works or why it's placed in a certain area, you need to prototype it.

Drop-down menus, a cart's check out process, slide shows, forms, light box functionality, and galleries are all examples of seemingly simple pieces of functionality that can be implemented (and screwed up) in a million different ways. By prototyping them out within a shell, you're able to better explain how that functionality works within the context of the larger piece.

Once a list of needful is established, designers should then take a broad, high-level approach at presenting those ideas and drilling down into greater detail with each subsequent iteration. For websites, this means building out a rough sketch (literally) of the home page and then revising that framework until all of the important elements are sussed out.

In the case of an eComm website, sketching out the placement of promotional elements, featured products, menu items, and calls-to-action is critical to understanding how users will flow through the site before a single piece of software is opened or a single line of HTML is written.  Later iterations of this initial work can then drill down into the site's interior pages to map out the checkout process or the ways in which the product selection process can be extended once a user is past the home page.

The Tools That Make This All Possible

The best and most effective tools to use in a one-on-one collaborative meeting are going to be a pencil and paper. Nothing is more flexible or adaptable at expressing an idea visually. Even if you can't draw, a pencil and paper still allows you to quickly produce a low-fidelity visual approximation of what you want to present. For all intents and purposes, your output during this process should be somewhat muddy, as the idea is to get as much feedback and information as possible until you feel comfortable with closing that loop. But when it comes to digital solutions, there aren't that many options that afford designers that same range of flexibility.

With web designers in particular, many have come to rely on the Adobe suite for all of their drafting and design work.  And while Adobe's software has become the defacto standard in the design industry for a reason, it's counter-intuitive to use offline, professional-grade software for a relatively simple task like rapid prototyping.

The closest middle-ground to the fast-paced pencil-and-paper method and the methodical digital method can be found at uxpin.com. Not only does it have numerous hot-swappable elements (GUI pieces, icons, templates, frames) to make drafting simple and fast, it also supports a wide-array of features that enable collaborative work across multiple users.  Most importantly of all, UXPin can translate paper sketches into fleshed out wireframes; allowing you to convert your offline drafts into online demos.

Final Thoughts

I've heard from a number of designers in the past that the idea of rapid prototyping is an attack on the primacy of the designer; stripping away creative freedom in the name of saving time and money.  But when done right, rapid prototyping can help bridge the gap between the client and the designer, by allowing the designer to inject clarity into the process through quick and simple iteration.

If the end-goal is to produce something that a client likes while minimizing the need for labor intensive re-workings and communication headaches, there's no reason why you shouldn't adopt rapid prototyping into your process.

(Page Load) Time is Money

Posted by: Nick

As broadband internet connections have become more wide-spread and servers have gotten faster, the scope and complexity of websites have scaled up to keep pace. More often than not a lot of this is reflected on the front-end in the form of content-heavy, image-rich designs that are built from the ground-up to immediately engage and entice attentive audiences. But in our quest to shower users with information, issues regarding overall performance and load times have been tossed aside to make room for aesthetic and functionality.  And while it's difficult to argue that these concessions shouldn't be made, it's becoming increasingly obvious that more effort needs to be invested to ensure that sites load quickly and smoothly.

Load Times Affect Everything

Let's keep things simple: the longer someone stays on a site, the more likely it is that they'll convert, and the longer it takes for a page to load, the less likely it is that someone will stick around.  It doesn't matter if you run an eComm website, a lead-generation site, or a blog; page load times have a profound effect on a site's performance across an audience.

Some of the largest and most successful online companies understand this dynamic very well. Amazon, for example, reported that every 100 millisecond increase in load time results in a 1% decrease in sales.  When Google managed to shave off 930KB from their Google Maps home page (going from 1000KB down to around 70KB), they saw a 10% increase in traffic the following week and an additional 25% traffic increase for the next three weeks.

But this doesn't just affect the big guys. Long load times hurt all sites equally because they annoy all users equally.  What counts as "long" to an average user nowadays? According to a pile of studies, 50% of web users expect a page to load in 2 seconds or less, and 40% abandon a website that takes more than three seconds to load.  Ever wonder why that Adwords campaign is costing you money but fails to produce any conversions? Take a look at how long it takes for your landing page to load.

To make matters worse for business owners and web designers, it turns out that the ever-expanding mobile demographic is just fickle as desktop users.  While mobile users are willing to wait longer for a site to load on their devices (with the majority of respondents saying that they would wait 5-9 seconds), a 1 second delay results in a far higher abandonment rate, driving the overall conversion rate into the ground.

Slow and Steady Does Not Win the Race

Users will never complain if a page loads too quickly, but they will always complain if a page loads too slowly. And while load times can seem infinitesimal on paper, the time it takes for a user to move their cursor over to the back button is just as infinitesimal. Given the shifts that we've all seen over the past ten years and the increasing amount of competition, it would be foolish to start arguing that page load speed isn't an important factor in a site's success.