I love dissecting how the best companies in the world entice customers online. You can always learn something from the big guys because they have the budgets, research, and customer volume you dream about.
You know Apple and Amazon don’t slouch when they design these pages. When you don’t have the time or money to research the best layouts/copy/presentation… draw your inspiration from them.
What you are going to see here is a great information layering approach that’s designed to suck you in and sell you at every turn.
The Apple.com Home Page
We’ll start before you get to the iPhone’s landing page. Apple knows that they need to:
- Warm people up to the idea of a new phone.
- Seed traffic from another popular source.
They do these things with their launch announcement video and making the ENTIRE Apple home page a simple iPhone 5 call to action. Check it out here:
What you see demonstrated here is:
- A big, simple call to action. Every item on this page is a click target that takes you to the iPhone home page. At the top layer Apple’s goal with this content is to get you engaged with it. They want you to click through the layers and become more drawn in with each passing minute until you give in and buy one. You’ll see this pattern repeated throughout.
- People/faces. It’s not just a phone. There are people that stand behind it that you can see demonstrating the product. The faces on the home page (and throughout) are absolutely intentional.
- Short and long form videos. Whether you want to watch the entire event or just a quick teaser video… they’ve got you covered.
- Showcase the upgrade. Since this phone is nearly identical to the 4 when it comes to design details they want to make sure you get the impression that it’s taller. Having the phone at this angle subtly gets that across.
The iPhone 5 Home Page
This page is made for the 90% of people that just need the brochure. It’s three times longer than the Apple home page, but almost exactly three times shorter than any of the detail pages. Not to short to skimp on details, but not too long to bore most people.
Here is what you can learn:
- Repetition works. You need to hit home the basic selling points over and over again. This page expands on the selling points, images, and videos from the home page and adds on another layer of detail. For example: The top level menus are selling points that are repeated in the videos, this page, and then on each of their more detailed pages.
- Buy actions stand out at the top and bottom. There is a unique color used on the buy button on top and the layout of the buying options on the bottom help them stand out. All roads lead to your credit card. :)
- Leading with the differences again. The first thing highlighted is, again, the reasons you’ll like this phone over your existing one. Your phone is now crap compared to the “All new design!”
- Image details accentuate the text. I love how the wireless bar is angled at you in the “Ultrafast Wireless” section. It screams “LOOK 5 BARS OF LTE” to your subconscious.
- Emotion paired with tech stuff. It’s not a chart paired with “Powerful A6 Chip” to show you how powerful it is. This tech detail is paired with a shot of people capturing a happy memory (cruising on bikes – hint – speed) with iMovie… which is, I’m sure, faster because of the A6 chip. So your either a techie reading the details or the average person saying “I can make movies on my phone!”… and they’ll all be of happy times!
- More giant calls to action. Just about everything on this page is clickable to get you to the next layer of the onion. You don’t hunt for links… you just click and learn more.
A feature details page
The rule of three’s is in full effect here. The detail pages all average 3X the scroll height of the primary landing page. There is a lot of scrolling to be done on these pages that have added more details.
They act as a “catch all” for everyone that wants to find that one feature they need.
This page caries forward the best practices from the main landing page and adds…
- The guarantee. The bottom of this page lets you know that you’ll be covered. They offer protection on your investment.
- More happy faces. I just have to call them out. People sell. I can tell you from our own experiments that people sell more than cute dogs.
- Cross promotion. This product works well with our other products. Don’t own them? You should check them out too. :)
- Added details to repetition. The same selling points are here, but now they’ve added details. For example: Instead of one paragraph about the A6 chip you get three here.
- Brand alignment. Note the passbook image that’s designed to Align Apple’s brand with other popular brands you might have heard of. These partners were not chosen randomly and serve to to make you realize that Apple plays nice with other people you may have heard of.
- Visual page breaks. These let you know where you could stop reading each section. It’s important for long form content. I love the use of the icons and horizontal lines that are used to make you pause while drawing you into reading the next section. This is really like 5-6 full pages of content here.
- Education is critical to advertising. Apple uses these ads to education you. The icon for the map section is the same icon used on the phone. That may seem obvious… but it helps teach you to look for that map icon when you buy your phone. The parama image shows off the app. From that image I know what it is AND how I’ll use it. I’ll be more comfortable when I get my phone and therefore happier with it.
- The face of the phone builds trust. Mr. Ive is the man who stands behind this product. He’s real and you can watch a video of home. It’s building trust. This wasn’t some design by committee thing.
- Simple numbers paired with visuals and text. If you have to use numbers to sell then you need to pair them with a simple explanation and a visual to demonstrate the point.
- Make public data yours. The chart in the “Ultrafast” wireless section is great. They didn’t have to generate these numbers. They didn’t invent the technologies. Putting this chart on this page, however, makes you think that the iPhone is light years ahead of everyone else.
- Respond to common fears. I’m still worried that I really won’t like a bigger screen. But, here they are, telling me that it’s OK the screens taller. I’ll still be able to hold it in one hand and type just fine.
What you’ve seen here demonstrates the following best practices.
- Information layering. Start with the least ammount of information possible required to sell someone and then add additional layers that make the case to customers that require more selling.
- HUGE call to actions. Each page is designed to suck you in further and they make sure you can’t miss clicking on a link for more information.
- Happy faces sell. The closer you can integrate the happy faces into your product be better. Faces can also be used to build trust.
- Align your text, data, and visuals to be all saying the same thing. Don’t use random images to prove a point. They should build on the text.
- Repetition is key. What seems obvious to you needs to be beaten into people with less context.
- Educate. The best ads do this in a way that makes you comfortable AFTER your purchase.
PS: A lot of people told us they also liked our related post “How to create a billion dollar landing page like Instagram“.