martes, 30 de julio de 2013

Eight physical product landing pages to inspire you in your next project

Google Nexus landing page

I was recently trying to put together some examples of good landing page design and found there was a lack of blog posts looking at physical products in particular.

There are lots of blog posts about designing effective landing pages, and case studies of websites that are doing it right, but nearly all of the examples given were of landing pages for software or service products.

Yes, you can apply many of the same principles and tactics, but still, it'd be nice to have some examples of physical products being sold. 

While nearly every ecommerce store sells physical products, I was looking for those one-page, mega converting landing pages, probably selling only one product, and doing that as well as possible.

Even this poor old Quora question has gone unanswered for far too long: What are some good examples of landing pages for physical products? I shall be posting an answer to that question once this blog post goes live. 

While researching this post I looked at between 200-300 different products, and while there were many good examples, the vast majority of them followed the same template.

There was a distinct lack of landing pages trying to do something different; perhaps for fear of straying too far from the accepted model of landing page design?

So for this blog post I have decided to pick out three examples which I felt stood out from the rest and were distinctive. Even if you removed the branding, these pages are unmistakably unique. 

But, so you feel like you're getting your money's (or rather attention's) worth, I have included a list of other examples I found which had many good features, but didn't necessarily break the mold.

Hopefully, by reading this post, you will have a host of great examples to refer to next time you're designing a landing page for a physical product. 

Three examples that are doing something different

Google Nexus 

I'm going to start with a company who are getting very good at landing page design: Google, with the Nexus phones and tablets. The Nexus landing page is a big, full screen design that manages to make an impact while being incredibly minimal.

Clicking the "watch video" button causes the other UI elements to disappear and a full screen video begins to play - one of the best examples of making a feature of video I've seen on a landing page. 

You can then choose either the 'Phones' or 'Tablets' option from the bottom of the screen to be whisked off to a separate landing page focused on one of those two product types. 

The new landing page is similarly minimal, using lots of white space, and explains the core benefits as you scroll down the page. Overall, it's an incredibly classy-feeling experience, and I've come to expect nothing less from Google.

As an aside, if you want to see what Google would do with an infographic, check out this one from earlier this year: How Search Works

Nest

Nest is a 'next generation thermostat' that is supposed to save you energy by programming itself, as well as by many other high-tech functions.

What makes this landing page interesting is that it tells a story, and one that's interactive at times too. Scrolling down the page shows you "365 days with Nest", showing you how the product learns over time while teaching you its features as well. 

I love how at certain parts of the journey it will play a short video to demonstrate its features, and the little interactive elements like being able to change the time on the thermostat to see how its temperature settings change, is a neat touch.

The site hasn't been optimised for mobiles, but at least its not completely broken.

Garmin Fenix

This is another example of a landing page that really tells a story. The first thing you'll notice upon hitting the site is that it doesn't scroll down - it scrolls upwards.

Far from being different for the sake of it, there is a good reason for this. Scrolling all the way to the top shows you someone's journey to the top of a mountain, using various checkpoints along the route to stop and describe features, or show you videos. 

And the videos are really great too; they show you a number of different personas, such as The Trekker, or The Alpinist, shot like little documentaries. What's quite odd is that the site isn't mobile friendly, and yet shows a different version of the page on my iPhone than on my Mac, with bits of the text cut off at the sides.

Bit of a shame, because the page on my mobile almost looked alright if it wasn't for the unfortunate cropping.  

Five more examples showing off good design  

Playstation 4

The landing page for the Playstation 4 uses a nice clean design, and shows off various other resources that customers can use to base their purchasing decision on (like videos, and the game selection).

While it's best not to link out too much on a landing page, buying a Playstation 4 is a big decision and you need suitably convincing to buy this instead of an Xbox One. 

Jawbone Up 

The fitness focused wristband UP has a landing page that ticks all the boxes for a modern landing page design.. Parallax scrolling? Check. Sticky menu? Check. Product video? Check.

I'm not fond of the top slider though. It requires being manually switched through, and on a large monitor this places the arrows way off to the sides and it's more likely people will simply scroll down, missing whatever messaging there was to show off in subsequent slides.   

Recon Jet

Thought Google Glass was an isolated innovation? Think again. The Recon Jet is a similar wearable computer, and its landing page is of the classic long sales letter type. I really like that the product video is given a centre stage by being playable directly from the top of the page (below the logo).

They are also sure to provide links to media sites who mention the Recon Jet - although, I think it would be more effective to provide a snippet of text as a quote instead of linking to the website as it gives customers information they need without them needing to leave the site.  

Marshall Hanwell

This page for a Marshall amplifier places the product in the focus of attention, with a massive full-screen image showing off its design. It's enough to connect with the customer on an emotional level as

I'm sure many musicians would see that picture and immediately want to plug in a guitar. Also unique to this site, there is a price and add to cart icon on the right hand side that follows you down the page, but when you get as far as the reviews it disappears.

I rather like this as it feels less like they're thrusting a call to action in your face. 

Withings Pulse

Another pleasing and clean landing page, Pulse is a fitness monitor which monitors your movement, measures your pulse, and everything else you'd expect.

Also, this page borrows many of the same features (if not all) from the other fitness product on this list, the UP: parallax scrolling, a sticky menu, product video... I found the percentage dial near the bottom of the page a bit odd though; as you scroll down, the dial fills up from 0% to 100%, presumably a metaphor for reaching your goals.

But for a time, I just assumed it was a loader for a video that wasn't downloading properly as it appeared to be stuck on around 96%. The idea doesn't really do it for me.  

Important points to pull out from these examples

I thought it'd be nice to end this post with four observations which jump out at me after going through these examples one more time.

  • While I have chosen examples which are very pretty, don't go for beauty over substance. The most important thing about your landing page is that it converts; if making it pretty sacrifices some of its ability to do this, then you need to re-prioritize your aims. 
  • Don't make it hard to buy your product! I have visited many examples in this little journey of discovery where I had to actually work to find the core call-to-action button. That small amount of thinking time is long enough for someone to change their mind. 
  • Use video. Video engages the viewer so much more than a picture with some accompanying text can, so use it to show off your product. This is particularly true for physical products where you cannot see the product in action from a web browser - show the customer what they're buying and try to evoke all of the sensations that come with holding and using a physical product. 
  • Tell a story or journey if it's appropriate. I loved how with the Nest and Garmin Fenix above that as you scrolled, a journey was shared with you. It wasn't just a list of features and benefits, and it engaged me so much more. Whether it made me want to buy the product more is another question however... 

Are there any other examples that you'd add to this list? Or, are there any examples on this list that you'd get rid of? I'd love to know in the comments.

No hay comentarios:

Publicar un comentario