WIP it good :: Ecommerce Product Landing Page

I've been noticing a lot lately that many small - mid size ecommerce sites really just look and work the same. I can hit a Shopify powered site and more times than not I can tell right away it is a Shopify site before snooping at any source code. There's a formula to their themes and interfaces and it works well. Clearly it is tried and true as they have the volume for some real research I'm sure so it's hard to argue with their level of success and metrics.

For me though, it's getting kind of stale and disinteresting. The UI doesn't blend with the branding in most cases and it all seems really vanilla and bland. I was hired recently by a client to design and build an ecommerce site and I took this as a chance to flex my brain on some product landing pages that were ecommerce driven. 


Full disclosure, this is all work in progress as of my writing this. I've blurred a lot of the photos and logos to keep the cat in the bag. So much of my descriptions about the client and product are going to be vague, sorry! Shouldn't affect the story too much though.


In the first stages of this project I needed to grasp an understanding of what this company sold, where and how as well as what their goals were. They sell machines. BIG "honkin'" machines. I mean these are not the kind of thing you stick in a cardboard box and ship with UPS. They also sell these machines all over the world. They have an existing ecommerce site built on a popular platform. I don't want to get into discussing why it sucks, it isn't fair really to the platform. It's just outdated more than anything and that isn't a reflection on the platform just a reflection on how quickly the online world moves.

So my first step was to uncover all the pain points with the client in early meetings. There is a bunch of pain here, I could probably write a book but a big part of this job is kind of being a therapist. Listening, understanding and guiding are key components of approach on the early meetings.

For the sake of staying focused, one of the big issues and the one I'm focused on here was that their premiere product line, these big machines, were getting no additional love in their product line. The pages were bland, cluttered, insufficient image size, default looking ecommerce pages. Nothing to set them apart from the range of boring replacement and maintenance parts. Nothing about the experience of what it's like to own one of their machines. No built in elevator pitch experience to show this machine can really sell itself or build any kind of consumer confidence. These machines are thousands and thousands of dollars so it's not the kind of thing you could drum up as an impulse purchase. 

Lo Fi Wireframes

I did some amount of brand standards and style guide work before diving into wireframes so I had some good foundations and ideas heading into wireframes about how to utilize assets to create a cohesive experience.

In wireframes I had already established navigational elements in header and footer too. Part of that work involved a "mega products menu." The purpose of this is to bring the product line to the forefront quickly without asking users to wait for a page or components to load. From any place on the site a user can open the product line in the main menu. Additionally each product had a range of "power" options that is difficult to speak about vaguely but 3 different "production rates" exist for each product essentially which defines what makes one machine more powerful than the last. 

Something that was really missing in their current site was a way for anyone to differentiate the difference from one machine model to the next. So if you were completely new to the product line you would really have no idea which machine would suit your needs. So my solution here was to render those rates as gauges right on the product list in the menu. This helps the shopper make a guided and informed choice. Continuing on that thread, I also conceptualized a FAQ pop-up system, where if a visitor still has doubts about which machine suits their need there is a help icon for further guiding their choice.

For the landing product page itself, I really took the heart the idea of a user journey. Getting the visitor to "feel" the experience of what it's like to own this machine and how it will improve their abilities and life. Each machine is a little different in their own way so this page really needed to be flexible. I could however identify some lanes to paint.

Overall, an in-page sticky navigation menu would be required. These are long detailed pages and ease of use by allowing the user to anchor to key tiers / sections quickly is important.

Tier 1 we introduce the machine, give the elevator pitch as well as establish right away if this machine is internationally available and other points. The planned photography here is the machine in use, showing a happy dude firing the thing up and well.. that's all I can say about that. But yes... in-use imagery, generating excitement. I also proposed here we hit them with a customer confidence building testimonial.

Tier 2 is controversial right now. The client had expressed an interest in cross promoting some bundle options for customers who are buying multiple machines. While I'm in favor of keeping attention singular focused for user flow, I had to accommodate this request to explore it. I've now learned from the client that they are backing out of this choice and it took very little convincing on my part once they saw it rendered. I think for now that will end up on the cutting room floor. But without this exercise we would not have known so it was time well spent.

Tier 3 we hit them with the tech specs. All the nitty gritty details that these clients are looking for, especially the more informed clients who need to satisfy certain industry requirements. Again you can see I am utilizing the gauges. On a mobile / small screen I am converting this space into accordions so it compacts the screen real estate it occupies.

Tier 4, configure and buy. Every machine has a certain level of options and choices to customize it. So this is where those choices are made along with up-close images of the various machine components. We've come this far, we don't want to lose their attention so let's drop in some financing options to reduce concerns of sticker shock and let's also hit them with another confidence building customer testimonial.

Tier 5 is related products. In my journey map, once the product is placed in the cart the page will scroll to this tier to try and encourage the purchase of maintenance parts and accessories for their machine. This is basically the candy in the grocery store checkout lane.

Tier 6 is an optional gallery. Sometimes this client will have customers who share images of their machines doing what they do and so this is something of a fluff piece but it could help build buyer confidence for a shopper to see his peers using the machine the same way they would.

Having worked with the client to develop this page I was open to move to...

Hi Res Proofs / Prototypes

I had done a lot of brand exploration. I knew what I wanted out of the UI and so I began working modularly in Adobe XD. Focused on the Design System / UI Kit with certain key elements. The branding makes use of the angled edge you see throughout this example of UI Elements here. 

My general vibe and approach:

  • Buttons and click-able elements should be slightly skeuomorphic with hard square edges. This somewhat reflects the controls and buttons that appear on their machines.
  • Messaging elements would mostly be flat with rounded elements to clearly set them apart in shape from actionable elements.

Along with my master sheet of UI elements I also explored the palette and typography. For me to create a cohesive user experience all these things are foundational tools that everything else is built upon. 

Fleshing in the mega menu from the wireframe was easy now as I'd modularly established many of these components. It was also here that I discovered something else that was bothering me. There was no standard icon kit that really fit my approach, so I went about creating a custom icon font that I could use, this includes the custom "shopping cart" item. Instead I'm using a palette jack with one of the big machines on it, a little extra custom touch that helps tie in what this company does and their branding. Also... who here is totally sick of seeing FontAwesome literally everywhere? Don't get me wrong, it is a fantastic resource for icon fonts but in keeping with my approach of trying to spice up this ecommerce experience I wanted to limit the usage of such things.

For my icon set, I pulled in that angled edge wherever I could to continue reflecting the brand.

Hell yeah, now we are getting somewhere! Fleshing in these product landing pages was fun. I leaned heavily on all I learned during wireframing and tied in the brand-compliant UI elements. I'm really happy with how this all came out in the end.

Feedback

This work was very well received by my client too minus the bundle deal banner I've got to deal with in the next round along with a couple actionable feedback items to take care off but I really pride myself on being able to nail a homerun on my first round of proofs and this was no different. I am really pleased with the results and I'm looking forward to developing this prototype soon.

For me, building user experiences and visual designs isn't like cooking spaghetti. You don't toss it at the wall over and over and hope it sticks at some point. Listen, understand and interpret. Shut off your ego and use data and logic to address the problems the client faces. Use all the data you can get your hands on. Look at competitors and even look outside at places you might not expect to find inspiration. Apply common sense and strategy to generate a flow and anticipate any places a user might get lost or need a bit of help.  This methodology has served me very well over the years and with each new project I feel I learn a little more and refine that process.

Never stop learning... it's cliche I guess to say but never assume you know it all or you have the perfect solution. Nobody likes a know-it-all. Be confident, sure. Defend your position but always from the point of solving problems. 

Repetition For User Experience to Improve Brand Visibility and Train Visitors With Common Patterns
Repetition For User Experience to Improve Brand Visibility and Train Visitors With Common Patterns
Links to: Repetition For User Experience to Improve Brand Visibility and Train Visitors With Common Patterns
Rapid UX Changes For Weird and Strange Times
Rapid UX Changes For Weird and Strange Times
Links to: Rapid UX Changes For Weird and Strange Times
Required
Required
Required