A repost from Planet’s blog
Funny to think that Recognize’s first homepage was designed before the app existed. Martin Karasek did a great job designing our initial homepage. It focused on the sign up form and to visually represent the badges. Ten months later, it was time for a redesign.
In this post, I will try to provide advice as to how to launch a successful homepage redesign.
Start from scratch
We are often attached to our current design or our current code base. Designers will use current designs as base rates for future design. Programmers will comment out code to be used later. Detach from your old work and free your homepage to new possibilities. Delete commented out code and use your company’s current and future business strategy as your design base.
For Recognize, we now have a full product and marketing vernacular. Our old homepage didn’t dive deep enough into our product. It didn’t explain our business as a fully functional employee recognition platform. Here’s a screenshot of our old homepage.
When I started the new homepage, I literally deleted everything in our homepage CSS file and deleted all the HTML in the homepage partial. With a clean plate I was able to think clearly and produce something completely new.
Right at the top show a product
Let the world know your company is actively producing something of value. It can be anything you produce, such as a product, community, or service. For instance, if your company produces shoes, you can display a sponsored marathon at the top of the homepage. Showcasing a product or byproduct at the top allows the user to immediately connect your company with a tangible object.
People more likely to scroll than click
It isn’t easy convincing people to use your website. That’s why it is important to show the gist of your business above the fold, or generally the top 600px of the homepage. For content beyond the first 600px, don’t make users click to find it. Make your homepage long enough to explain everything important. Flickr’s homepage redesign is a good example of a nice scrolling experience.
A scrolling homepages tell a story
Write a story in a half dozen sentences, and use each sentence as a section on your homepage. Think of your homepage as an extension of your elevator pitch. For instance, “We build websites for socially responsible companies. We work with brands like Patagonia and Whole Foods. We are community-driven, recently we hosted a hackathon focused on environmentalism. Let us help your business translate its social responsibility into web experiences.” Each one of those sentences can be a complete section on your homepage. Use a graphic or a photograph to visually explain your point. You’ll find users will get a better understanding of your business.
Appeal to logic and to emotion
In your graphics and your copywriting, think of two groups of people: logical people and emotional people. Emotion-driven people are compelled by abstract marketing copywriting and strong imagery. Apple’s slogin “Think Different” is a great example of emotion-driven marketing speak. Whereas listing product specifications is more attractive to logic-driven people. You’ll hit a homerun if you can appeal to both.
For Recognize’s new homepage, the headlines are emotion-driven, such as “Track success” or “Motivate the workplace.” Then, we provide details for our product, such as “Edit and delete recognitions.” The facts help back up the headlines, and that ties your messaging together.
Learn more about different types of people according to Myers Briggs at Wikipedia – http://en.wikipedia.org/wiki/Myers-Briggs_Type_Indicator.
Show photographs of people
Pictures of real people can double homepage conversion. Learn more about that here. If you have customers who use your product, ask them permission to show their profile.
It is 2013: think responsive layouts
If your homepage doesn’t respond to different screen widths and device sizes, then your homepage is outdated. Make sure your designer and developer build different versions of the homepage to display well on mobile, tablet, laptop, and large desktops.
- Check your analytics and determine the most used screen resolutions by your users.
- Make designs that work well with your most used resolutions.
- Use a responsive layout framework, such as Boostrap to easily manage mobile and tablet screen resolutions.
- Ensure you aren’t loading large images on mobile and tablet. Use the correct image sizes for your user’s screen dimensions.
Watch your analytics, and see if you can increase your homepage conversion with a fresh new homepage. It is a fun game when your conversion rate goes up.