Preview: new add to cart flow

Baldy

Hey everyone,

We’re re-writing the Buy This Photo option as phase 1 in modernizing the shopping cart. Phase 2 is re-writing the cart itself.

Here’s a preview of Phase 1. We’re doing preliminary QA on it now, but I expect that it’s weeks away from shipping. We’ve done quite a few user tests, but we thought you’d appreciate a preview, and maybe you’ll see some red flags or details we haven’t caught.

Looking at the data for our (your) buyers, there are millions of first-timers for SmugMug’s cart, most of whom are not very computer savvy. So we made the decision to optimize for ease of learning for computer phobic people, rather than optimize for power users (like yourselves).

Here’s a screenshot:



Not shown here is that the fonts and colors will match your customization.

The image is larger now (SmugMug medium) so will carry your watermark if you have one on that size. We’ve eliminated every distraction except your image and what you can buy. The language is placeholder and won’t have redundancies like you see here.

(To be continued on next post.)

Baldy

The way the UI works is you tap or click on a selection and the right panel slides to the next screen. Very mobile friendly and keeps the UI consistent between large and small screens.

In this case, if I tap on Ready To Hang Prints, I get (placeholder wording again):



And if I tap on metal prints I get sizes:



(Continued in next post.)

Baldy

As you hover over any of the sizes, croplines appear to show how the image fits the size you've chosen. Cropping is the #1 issue customers have when buying products. It wasn't an option in the previous add to cart flow, but it's an option here and in the cart itself.

Choosing a size gets me to finish, and croplines appear along with a crop tool:



And then I get quantity and the chance to add to cart:



(Continued on the next post.)

Baldy

If you choose to adjust crop (we plan to add the word crop to the screenshot), here is what it looks like:



When you add to cart, you're given three options:



The wording for the button Checkout will likely change to View Cart, depending on the outcome of more user tests.

The wording for the button that says Continue Shopping is still being worked on. The idea is it lets you order different items for the same photo.

(Continued in next post.)

Baldy

There will be a more info icon next to most products (all of them if I can help it), that when clicked leads to a screen like this:



This one just has placeholder wording but we hope to have substantial product photos that we're in the process of shooting now for as many products as we can. Also, we're planning to re-shoot the 30-second product videos. We're better at them now.

The X to close the product info may change to a < as a result of user tests.

(Continued in next post.)

Baldy

When you select another image, we present you with a shortcut to choose the previous options. This makes it easy to quickly add the same product for a few different images in the gallery.



Questions? Concerns?

Thanks!
Baldy

photoclick

Thanks for the preview. I would move the "Previous Options" away from the image area to the right pane. It can be rendered just as another option (as a list) under the "Downloads".

AdamNP

Everything looks great, I just have one related question. I have thousands of SM "buy" links embedded in my various websites. First, will the structure of those links be changing in any way? We are talking weeks of work for me if that ever happens. The main question is: if someone clicks on one of my buy links, will they now be taken to this new, and vastly improved screen?

[edit] The only potential problem I'm seeing is the larger photo, and the increased likelihood that a watermark will be on the larger photo (I presently have medium+ as my watermark setting). The #1 question I get from people is whether the watermark will be on the photo they buy. The answer seems obvious to me, but clearly it isn't to most people. Perhaps add language under the photo that watermarks will NOT be on the purchased photo?

MomaZunk

For Previous options, I would verify the cropping somehow, if it was applied.

Also, for several of my fine art prints, I do not want people to be able to crop, and it may not match a standard size, but want it printed as shown.
Are than any plans to handle this in the future? Currently, I direct customers to Fine Art America to buy/print my fine art stuff, so I do not have to spend time setting up separate price lists or managing each fine art print individually to get it to fit in a standard size.

Thanks for the preview.

Sheaf

MomaZunk wrote: »

For Previous options, I would verify the cropping somehow, if it was applied.

After you click "Use for this photo" it will take you to this screen where cropping can be adjusted before choosing a quantity and adding to your cart:

MomaZunk wrote: »

Also, for several of my fine art prints, I do not want people to be able to crop, and it may not match a standard size, but want it printed as shown.
Are than any plans to handle this in the future? Currently, I direct customers to Fine Art America to buy/print my fine art stuff, so I do not have to spend time setting up separate price lists or managing each fine art print individually to get it to fit in a standard size.

We get this request occasionally. It's certainly a valid use case and I think we could probably solve it at some point, hopefully sooner rather than later. Thanks!

Edit: Hmmm... I have may have misunderstood this. The request I usually see is to only show sizes that precisely match the aspect ratio of the photo itself. So I might price quite a few different sizes, but when my customer goes to buy a 3:2 photo it would only show the sizes that don't need any cropping.

Sheaf

AdamNP wrote: »

Everything looks great, I just have one related question. I have thousands of SM "buy" links embedded in my various websites. First, will the structure of those links be changing in any way? We are talking weeks of work for me if that ever happens. The main question is: if someone clicks on one of my buy links, will they now be taken to this new, and vastly improved screen?

This replaces the "This Photo" option in the Buy Photos menu inside of galleries. I believe it should work, but I would like to see a page where you have an embedded link.

Sheaf

photoclick wrote: »

Thanks for the preview. I would move the "Previous Options" away from the image area to the right pane. It can be rendered just as another option (as a list) under the "Downloads".

Thanks. We have tried it on that panel in a few different design iterations and ultimately chose to move it to the left. I think whichever way we go on it, we'll have to watch to see usage and whether or not people find it out of place or confusing.

Baldy

MomaZunk wrote: »

For Previous options, I would verify the cropping somehow, if it was applied.

Also, for several of my fine art prints, I do not want people to be able to crop, and it may not match a standard size, but want it printed as shown.
Are than any plans to handle this in the future? Currently, I direct customers to Fine Art America to buy/print my fine art stuff, so I do not have to spend time setting up separate price lists or managing each fine art print individually to get it to fit in a standard size.

Thanks for the preview.

Hey MomaZunk,

Can you help me understand what happens if they don't crop but the image size doesn't fit the product size? Do they get the product with two white strips on the ends?

Thanks,
Baldy

bwg

AdamNP wrote: »

Everything looks great, I just have one related question. I have thousands of SM "buy" links embedded in my various websites. First, will the structure of those links be changing in any way? We are talking weeks of work for me if that ever happens. The main question is: if someone clicks on one of my buy links, will they now be taken to this new, and vastly improved screen?

yes, the buy links will still continue to work. in fact they will be enhanced with the new interface, adding the ability to link directly into any step in the process, including a specific product/size/finish.

AdamNP

Sheaf wrote: »

This replaces the "This Photo" option in the Buy Photos menu inside of galleries. I believe it should work, but I would like to see a page where you have an embedded link.

I am just referring to what you get from the "get a link" option under sharing. The buy link is the last choice there. Here's one I just grabbed:

http://www.nationalparked.net/buy/10036549_ZcCZbB/687543560_zn2Zr3P/

I am in the process of completely rebuilding my main site (not my SM site), and I am putting thousands of links of that format into the site. I just don't want to have to spend weeks replacing them later. I just need to know where that exact link will go with the new setup.

AdamNP

bwg wrote: »

yes, the buy links will still continue to work. in fact they will be enhanced with the new interface, adding the ability to link directly into any step in the process, including a specific product/size/finish.

Enhanced how? Will the format of the links change? See my previous post for the format SM currently gives us in the "get a link" area. Where will that lead to?

And while we are here, I've noticed that the link, as I've posted above, changes to this in browser:

http://www.nationalparked.net/National-Parks/Arches/i-zn2Zr3P/Buy

Is it safe to use that to link with, or does it matter? I'm just fearing suddenly having thousands of links on my site that don't do what I need.

leftquark

Well, it's certainly less of an information overload now! My one concern is that there's a lot of clicks that the user has to go through to add an image to the cart (5 to be exact). Has user testing shown that people don't mind this many clicks? Many shopping carts, including Amazon, only require 1-2 clicks to add an item to a cart (granted they usually don't have all the options for size, finish, etc).

I know you spent a lot of time researching shopping carts ... Did the research show that people actually want to specify a quantity when they purchase? I imagine that the majority of users are only purchasing a quantity of 1 of a given photo (perhaps I'm wrong?). Amazon, for example, skips the quantity until you're at the checkout page. 1 extra click could be eliminated by following the Amazon model and adding the item to the cart when they select size and skipping the extra click of choosing qty.

If I've disabled certain options in my Pricelist will it also be reflected (aka REMOVED) in the shopping cart? For examples:
-if I don't offer ThinWraps will the "Ready to Hang" still show "Canvas", "ThinWraps" and "Metal" or will it just show "Canvas" and "Metal"? It would be confusing if ThinWraps stays and then the user is presented with a blank screen because there are no sizes available.
-Can some screens be eliminated if there is only 1 option available? For example, if I only enable "High Gloss" Metal Prints, can we skip the step to choose the finish since High Gloss is the only option?
-If I don't enable Merchandise, will it be hidden from the initial screen?

Lastly, can we make sure to distinguish "MetalPrint" vs "Metallic Paper". I know you mentioned the final wording is still TBD. I've had a few customers who ordered Metallic prints by accident when they really wanted Float Mounted Metal.

Definitely a big step in the right direction. Great work!

Baldy

Here's what it looks like on a small screen:

denisegoldberg

This looks like it will be a great improvement.

One question though - you showed a screen shot in this post that shows Photo Options. Will screens like this one include only those options that are available on the site the viewer is browsing?

I am assuming that if I don't offer some of the larger groupings of things (like Merchandise) that the entire section will be removed from the cart. Is that how you envision this working?

--- Denise

Sheaf

leftquark wrote: »

Well, it's certainly less of an information overload now! My one concern is that there's a lot of clicks that the user has to go through to add an image to the cart (5 to be exact). Has user testing shown that people don't mind this many clicks? Many shopping carts, including Amazon, only require 1-2 clicks to add an item to a cart (granted they usually don't have all the options for size, finish, etc).

It's certainly something we have talked about and debated here. In nearly all of our user tests, it wasn't a concern. But some did find it tedious.

leftquark wrote: »

I know you spent a lot of time researching shopping carts ... Did the research show that people actually want to specify a quantity when they purchase? I imagine that the majority of users are only purchasing a quantity of 1 of a given photo (perhaps I'm wrong?). Amazon, for example, skips the quantity until you're at the checkout page. 1 extra click could be eliminated by following the Amazon model and adding the item to the cart when they select size and skipping the extra click of choosing qty.

We get a surprising number of orders with quantities greater than one. 1 is the default quantity we use of course. In the example from Baldy's screenshots, they just need to add the item to their cart after selecting the finish. So they don't need to click the quantity buttons unless they want to change it.

leftquark wrote: »

If I've disabled certain options in my Pricelist will it also be reflected (aka REMOVED) in the shopping cart

In short, yes. We don't want to complicate the interface and confuse the customer with options that are not available. We pare down the list and skip steps when possible.

leftquark wrote: »

Lastly, can we make sure to distinguish "MetalPrint" vs "Metallic Paper". I know you mentioned the final wording is still TBD. I've had a few customers who ordered Metallic prints by accident when they really wanted Float Mounted Metal.

Noted. Thanks!

Sheaf

denisegoldberg wrote: »

I am assuming that if I don't offer some of the larger groupings of things (like Merchandise) that the entire section will be removed from the cart. Is that how you envision this working?

That is indeed how it works.

denisegoldberg

Sheaf wrote: »

That is indeed how it works.

Thanks Sheaf, that's awesome!

--- Denise

Baldy

leftquark wrote: »

Well, it's certainly less of an information overload now! My one concern is that there's a lot of clicks that the user has to go through to add an image to the cart (5 to be exact). Has user testing shown that people don't mind this many clicks? Many shopping carts, including Amazon, only require 1-2 clicks to add an item to a cart (granted they usually don't have all the options for size, finish, etc).

We were very concerned about this. I expected it to be the first question asked in this thread, and for it to be an issue in the user tests.

Part of what's happening is you're browsing to the product you want to buy. At Amazon, I just bought some men's running socks, and I had to click clothing > men's > socks > active wear > many pages of navigation > select product > color > size > quantity > add to cart, 10 clicks not counting pagination. They get around 5 of those clicks with search if that's how you find the product.

But we knew we could design our add to cart flow with fewer clicks. The question was, could we make it as easy to learn?

What we saw in the user tests, to at least my surprise, is there was almost no resistance to clicking or tapping something that was fast and just slid the next panel in. I suspect that if it took you to other pages, as in Amazon's case, there would have been resistance. But this UI was clear and except for one user (a power user like you and me), there was no perception of too many clicks. In the land of trade-offs, we decided to favor less computer savvy buyers and have the power users make a few more clicks.

I hope this helps.

Thanks,
Baldy

leftquark

Sheaf wrote: »

It's certainly something we have talked about and debated here. In nearly all of our user tests, it wasn't a concern. But some did find it tedious.

We get a surprising number of orders with quantities greater than one. 1 is the default quantity we use of course. In the example from Baldy's screenshots, they just need to add the item to their cart after selecting the finish. So they don't need to click the quantity buttons unless they want to change it.

Interesting to know! I suppose my use case as a landscape photographer is different than others ... Peopel typically don't hang the same photo in their house twice. I can see, however, families who buy multiple copies to give to grandparents, friends, etc.

My fear is that the longer (time or more clicks) someone has to change their mind, the less likely you are to make a sale. Less clicks in my mind is more ideal. The quantity select page was the only one that I saw could be eliminated or moved to another place. As you mention, though, it's not very tedious or time consuming to leave qty at 1 and continue on.

Good to know you'll simplify and skip steps if items aren't available! That makes me a happy camper.

Also sounds pretty neat that we can link into any step of the process. Bravo on adding new and nice features!

Allen

I think buyers ought to be able to just throw a bunch of photos into the cart (singly selected) as they
browse and later go into the cart and do this process.
With this method they have to go through a bunch of steps for every single photo before returning to browse.

Kinda like flagging which photos to later buy.
Then first step in cart is see thumbs of all flagged photos.

Baldy

leftquark wrote: »

Interesting to know! I suppose my use case as a landscape photographer is different than others ... Peopel typically don't hang the same photo in their house twice. I can see, however, families who buy multiple copies to give to grandparents, friends, etc.

It's a good question wrt quantity. I don't remember the numbers in terms of number of orders where quantity > 1, but I remember that it was quite significant in terms of dollars. For people who order more than one, they sometimes order a lot.

Baldy

Here's an example of someone whose colors and fonts are a little bit different:

Baldy

Allen wrote: »

I think buyers ought to be able to just throw a bunch of photos into the cart (singly selected) as they
browse and later go into the cart and do this process.
With this method they have to go through a bunch of steps for every single photo before returning to browse.

Kinda like flagging which photos to later buy.

That's an important use case in terms of dollars (big orders of wedding prints proceed that way) for people who are going to buy a lot of prints and have an idea of what they want. They are typically buying paper prints and there isn't much confusion over the product they want. This is the use case for buy multiple photos option.

But the vast majority of purchases are for an image or two, and the buyer immediately wants to know what are the product options and prices for them before they add to cart. That's the use case for this option.

I hope this helps.

Thanks,
Baldy

Baldy

leftquark wrote: »

Lastly, can we make sure to distinguish "MetalPrint" vs "Metallic Paper". I know you mentioned the final wording is still TBD. I've had a few customers who ordered Metallic prints by accident when they really wanted Float Mounted Metal.

That's a good suggestion. We really need to focus on better descriptions + photos and videos to sell the products.

leftquark

Allen wrote: »

I think buyers ought to be able to just throw a bunch of photos into the cart (singly selected) as they browse and later go into the cart and do this process. With this method they have to go through a bunch of steps for every single photo before returning to browse.

Kinda like flagging which photos to later buy. Then first step in cart is see thumbs of all flagged photos.

There is the option to buy "Photos from this Gallery" for this case, no?

Is this going to get a revamp too so that the design is consistent? I imagine you could just replace the Right Panel in the current implementation with what you showed us for a single photo and wallah, all set!

Allen

Will "Previous Options" show all options used? Example all 4/6 and some 4/6 and 5/7.