Shopping Cart Redo
Sometimes, you get one of those golden projects that makes it all worth while. You feel like a real UX Designer, that gets to make a big difference, that gets to improve an experience that will make the users and the stake holder immensely happy! This…was one of those times.
A heat map of our original shopping cart experience showed users spent a MINIMUM of 15 minutes checking out.
The sample we looked at covered around 500 users. Furthermore, possibly partially because our main demographic are older folks, the average was higher with the greatest amount of time being an entire hour. Nobody wants that. A shopping cart should be as easy as possible, since it is the last hurdle between the user and their product, and company and their monies.
So, happily, after presenting this information to the C-suite, another Designer and I were given permission to do a shopping cart upgrade!!!:) YASSSSS!!
The first thing we wanted to do, was shorten the number of steps. The original process took 8 steps to complete, after you had found all the product you wanted and added it to your cart. We (Me, incredible Sr. UX Designer Dale Painter & our PM) started by storyboarding out the process on the whiteboard.
We asked the important questions like, where do the users come from, why are they here, and where are they going.
STORYBOARDING
We cut out several steps in the process by instigating a browser sniffer.
Since we have a global audience, there are more than 38 languages our customers could be speaking, so first off, we decided to have the browser sniffer check where they were in the world, and put the site in that language. In the same breath, they should automatically be connected to their sponsor. BUT.
Going forward is not enough, users need a way to easily go back, for their own peace of mind, and to double check for mistakes.
So, we added a pop-up on the side where they could change the language, location or sponsor if they wanted. We made it so obvious and possibly obnoxious because we didn’t want our users to have to hunt for settings, and to low-key let them know if they were registered under the wrong sponsor.
Next we began the wire-framing step. This is important for developing a layout, before wasting time on colors and lines and whatnot that would only distract you from the layout before you.
WIREFRAMES
Dale set about making the forms, and I got to handle the layout of pages within the online store itself. Then, with numerous critiques on each other’s work, we began to develop the final product. So that you are better able to follow my process, I have included some of my notes on the wireframes below.
“Social reviews and validation are included on this main page, since the first question on people’s minds while shopping these products is, “Do these products really work?” Here is the proof. Also, the MLM business model is almost entirely based on social validation, so this part is really important.” This section got cut in the end, and I think it was a good call.
“The “Photos from our Community” section: I believe this is less essential for our campaign, but the more interactive features for the user the better. BUT would our demographic be able to fully utilize it? Like, social media-wise? Meh. Probably not.”
“I put the call to action (for enrollment) in a pop-up as well as in the final cart, to give people multiple opportunities to ponder enrolling. The more exposure the have the more persuasive it will be. ALSO it is better if they are able to interact with options that they see, rather than try to remember to do something later in the process. While an overlay might be annoying, for our demographic I think they will appreciate the simplicity of it, that they cannot mess up and skip over this option.”
The Final: HIGH-FIDELITY MOCK-UPS
This is our new experience we are terribly excited about, and these designs are set to roll out later this month! Thank you for reading, please let me know what you think!
