| The context: | The site sells promotional swag. You're not just shopping products but products decorated with your logo or some other artwork. |
|---|---|
| The feature: | We're looking at a product detail page (PDP), a staple of e-commerce, but with an added layer of interaction — you're adding one or more graphics to the product. The entire conversion funnel pivots on this one feature. |
| The challenge: | Products have up to two “decoration” or “imprint“ areas. When there are two, you can choose one or both. The UI needs to keep clear what your options are, where you're applying an image, and what you have applied. Now add new functionality — images you upload are saved. We need to make that library of images visible without cluttering up the page. |
Spoiler! This is where we end up, but how did we get here, and why?
First iteration(s)
First, a little background. You can't just slap a logo anywhere on a product. Picture a decoration area as an invisible rectangle with fixed dimensions and a fixed position on the product. On an apparel item there may be 12-15 available decoration areas.
So why can't you just let the buyer choose from any of them? Maybe you want a logo on the left sleeve and a large graphic on the back.
Something like this, perhaps?
I thought of that, roughed it out, and built an an interactive proof of concept for picking one or more of any available areas. Technical contstraints, no — this could be done on the existing platform.
However, this is where design is a dance with Product and business strategy: The more options we'd offer, the higher the cost. Cost on the back end in setup. Cost on the front end in production. Who would cover that cost? You, the consumer.
Moreover, more choices isn't necessarily a good thing. It would mean a more complicated purchase flow. Choices are friction. Sure enough, competitors offer lots of options, but their user journeys also involve a lot more decisions, and your out-the-door price depends on those choices.
Simple choice(s).
The final direction was to, for each product, offer up to two curated decoration locations. We could now uptimize the UI for a clear business strategy.
- Choices are kept dead simple.
- We can offer you a predictable, up-front price.
- Checkboxes make it visible and clear which area(s) you have decorated.
When I user tested this in moderated sessions, all my participants breezed right through the mechanics of decorating the product. This part of the UI and the purchase flow was zero friction.
Complexities arise
There's a glaring gap in functionality above: Decorating one product one time takes virtually no cognitive load. It's a good interaction, but the artwork you upload doesn't stick. It's not saved.
New functionality: Images you upload are now saved.
We knew from research — surveys and in-depth interviews — that our customers were often invested in the look-and-feel of the product. Refilling your supply of pens with your logo on them is one thing, it's quite another when you fret over whether the recipients will like the swag you're giving out. Ultimately it's the same uncertainty you have when you give a gift: Will they like it? Will this purchase make me look good?
What that means is the purchase journey involves trying out multiple products. Browse, pick, decorate, browse, pick another, decorate, compare, browse, and so on. That is tedious when you have to upload the same artwork over and over.
New functionality is built out, and we now have a “locker” holding images you upload. For conversion rates we've now reduced friction considerably, and for retention we've added an incentive to create an account, so that your images are saved between sessions.
There is a catch: We see in user tests and sessions that many customer don't notice that “drawer”. They don't know their artwork is saved, so we want your uploaded images to be visible by default. No drawer.
We have two obstacles. One, that's a redesign of the UI. One, we don't just want to jam thumbnails into the current visual hierarchy. Two, pulling in those thumbnails for every page load will tax the servers. Customers will pay that tax in the form of longer load times.
The solution
Upload once, apply to any decoration area.
Load times are a technical problem that's being solved, so after a napkin sketch or two I wireframe up a new solution. Why do you need an upload widget for each decoration area? Everything you upload goes in a “bucket” now. Your artwork isn't tied to one decoration area on one product.
Final UI went through several iterations between myself, our CRO manager, our graphic designer, and our UI designer/developer. I had design goals, or constraints, if you will:
- It must be clear which area(s) you have decorated.
- It must be clear which image you have selected for a given area.
- It must be clear how to remove an image from an area.
When you are ready to click Add to Cart, you need to feel confident you know exactly what's going to appear where on the product. Both locations are typically not in view at the same time. When checkboxes showed what you had selected, that's a no-brainer — “Centered on Back” is either checked or it isn't. Changing to tabs, though, means one is always hidden, so you need some sort of visual indication what you've applied where.
The final, live UI keeps clear what you've uploaded, what you've selected, and where you've applied it on the product.
The interactions are now simple and clear, and they make it easy to play around with options. Add one graphic to the chest, see what that looks like, try it large on the back, remove, try another, and so on.
When you select an uploaded image, you get immediate feedback in the form of an animated uploader.
You might notice the upload artwork is larger than you're used to seeing thumbnails. Doesn't that eat up a lot of space? Yes, it does, but consider these design goals:
- Uploaded artwork comes in all kinds of aspect ratios. If we don't line them up neatly, your collection will be a jumbled mess and hard to scan.
- Horizontal logos squeezed into a fixed-width area would be very small and hard to see unless that area is wide enough.
- You may have multiple logos with subtle differences, like different taglines or location names. You need those logos big enough that you can easily see those differences.
Did we consider mobile? Yes, of course.
Footnote: Why did we not design for mobile first? Well, “mobile first” is not a universal law, it's a useful approach where appropriate. In the case of this site, it is not.
The audience for these products are primarily shopping and buying on desktops. Why? Because (a) these are purchases you make for work, at work and (b) you're not just buying a thing, you're customizing, and the cramped quarters of a phone screen just isn't well suited for that. For one thing, buyers tend to be invested in the look of the product, and a phone screen is just too small to get a nice, big view of it.
Sure enough, stats and research consistently showed that mobile devices were mainly used for browsing and discovery, not the final purchase. You're most likely to poke around in the collections on your phone to get ideas and narrow down what you want to buy, then return at your desk, using a desktop browser to set up the product(s).
