How to make a new homepage

Recognize homepage

Recognize gets a new homepage

Planet’s primary product outside of agency work is a social professional reputation platform called Recognize. We started working on this project in July of 2012 and launched to the public in February 2013.

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.

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.

Screen Shot 2013-06-10 at 1.01.51 PM

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 –

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.

Recognize homepage showing people

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.

  1. Check your analytics and determine the most used screen resolutions by your users.
  2. Make designs that work well with your most used resolutions.
  3. Use a responsive layout framework, such as Boostrap to easily manage mobile and tablet screen resolutions.
  4. Ensure you aren’t loading large images on mobile and tablet. Use the correct image sizes for your user’s screen dimensions.

Watch analytics

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.

Web design tips for developers

A repost from Recognize’s blog

Think of this article as a general guideline for designing any website. I’ve learned these lessons through photography, working in the Enlightenment Linux window manager many years ago, and developing for a design agency. I apply these rules while designing and building Recognize. Being able to do both has saved our team a lot of time and money. Learn to design along side your web development skills, and your value greatly increases.

Enlightenment window manager on Linux

Enlightenment window manager on Linux

Follow nature

If you have to follow one rule, this is it. Farther in this article I will go through more specific examples of nature, such as the grid, 1.6 golden ratio, and following your senses. In the meantime, try to think more theoretical. Think about Apple, and look at their web design and applications. The reflections, subtle patterns, and momentum scrolling are all patterns taken from nature. Observe how light and objects behave, then mimic that in your design.


Take advantage of the senses

Users will appreciate sensory experiences in your application. Tactile, visual, and auditory are all ways to stimulate your users.

Button example for visual and tactile experience

For instance, a button should suppress, or light up, when pressed. Next time you get in a car, press a few buttons. Try to mimic those behaviors in your application, and you’ll create a more realistic user experience.

Find ways to use vibrations to simulate tactile response

Android innovates with vibration responses. Most people say that their Android’s vibration response gives them a sense of context when a keyboard button is pressed on the screen. Android’s vibration is to iPhone’s momentum natural scrolling- they are both game changing user experiences. See how you can innovate with vibrations.

Are sounds possible for your application?

Auditory experiences are generally faux pas in desktop applications. Most apps steer clear and tend to indicate events through visual indicators, like updating the title tag. Still, audio if done right can add value to your app.

But mobile is a different ballgame. When a push notification triggers a background service, play a sound to indicate a message or event. Give yourself a voice, and allow the user to know when an event occurs with a unique one of a kind sound. Remember ICQ and their weird ho-hoo jingle.

Whitespace is your best friend

Some try to fill empty screen real estate with pictures and useless text. Don’t fall for this fallacy. Apple is again another great example, they place the product in the middle of the screen and leave empty space around it. You’ll find people will be at ease with your design.

Whitespace helped Google beat Yahoo. Google put the primary action front and center with nothing around it to distract the user. Embrace whitespace and start allowing your users to focus.

Screen Shot 2013-04-26 at 2.01.52 PM

Focus focus focus

One of my most famous photographs

Websites and apps need to consider a few things when trying to maintain focus. Here are a few steps to help guide a focused design lifecycle:

  1. What is the primary goal of your application? Keep that in mind as you make design decisions.
  2. Create a styleguide, a one page document with all the colors and styles. Create it in HTML and CSS. To make a styleguide, search and extract patterns from the designs. Things like paragraphs, headers, horizontal rules, and forms all can be included.
  3. Only allow two fonts. I tend to choose one embedded font used for headers and buttons. The other font is a standard typeface, such as Helvetica and Arial, for paragraphs and links.
  4. Keep your colors to a minimum. Create a colors.sass file to save the colors as variables. Choosing colors on future designs will be as easy as scrolling a short list of existing colors.

Follow those four rules, your design will be consistent and well-maintained.

Tell a story

Research shows if you tell a chronological story to a jury, they are more likely to believe your case. This heuristic is innate in humans and extends to all parts of life. Humans are storytellers and if you tell a good story, people will believe in your product. Storytelling is why vertical parallax sites are so popular. They create evocative storytelling. What’s your story, and how will it play out on your homepage?

Nike's famous vertical parallax

Bigger is Better

A/B tests indicate that the bigger the action button the better in homepage sign up conversions. If you beef up your headers and buttons, users will unconsciously associate your site with being larger than life.

This is true for images as well, A/B tests have shown that fullscreen images, when used appropriately, can increase your conversion.


Whenever possible, use the golden ratio: 1.6

The golden ratio is found throughout nature. Trees, shells, and the Fibonacci Sequence all follow 1.6. You can use this simple ratio to your advantage when choosing header styles or how you layout your website’s columns. If your first header (h1) font size is 40px, try 40 / 1.6 = 25px for your header 2 (h2).


Use a grid

Grids are commonplace with the advent of responsive web design. Grids allow you to lay out a site using the golden ratio. It helps to set up your layouts following a grid in your styleguide.


Grids, golden ratio, and storytelling are all part of our natural environment. Stay in tune with nature and your designs will be focused and simple.

Write clear messaging, and drop the evocative hype

Fancy headlines and witty copywriting may be interesting, but if the user doesn’t know what your product does, they won’t want to use it.

  1. Come up with a few clear headlines.
  2. Test them out in person and using Google Adwords.
  3. Go with the slogan that most people understand and also gets the best Click Through Rate (CTR) on Google Adwords.

When in doubt, follow the leaders

If you aren’t sure how to proceed with a design, then shamelessly browse around on all the top sites. See what is happening on Behance, Bootstrap, Apple, or 37Signals. See how they solve an autocomplete list, an image carousel, or an user profile. Adapt your styleguide with their suggestions. After a night’s sleep revisit what you came up with, and create a better version. Innovation comes from copying. Copy away!

Think about the “F”

Users read websites in the shape of an “F”. They browse down and run right to scan over content. I should note that sometimes people read in “E” shape, as shown in the image below. Here’s an article on that.

Draw on paper, then in CSS

If you are a web developer, you probably can skip the Photoshop step.

  1. Get out a big piece of blank paper and a pen.
  2. List out all the features you need to design.
  3. Rate the features in importance.
  4. Fit the features in order of importance in a grid or an existing layout.
  5. When the design feels good enough, jump into CSS and build a prototype.

If Photoshop is needed, I take a screenshot of the website I’ve already built and paste it into Photoshop. It allows the designs to come out more realistic and I am able to Photoshop it faster.

When really in doubt, hire a contract designer

For Recognize, we hired a couple of fantastic designers to design our marketing site based off of our business requirements. Once the marketing designs were done, I used those styles in the rest of our site. A couple mockups acted as the design foundation for Recognize.

Do the same for your business. If your design isn’t at the level of your business requirements, use Dribbble or Behance to find a designer that meets your style needs, and hire them. When you email them, ask if they know anyone else in case they are too busy for new work. Chances are they have a friend that is just as good.

Have fun and keep trying

That’s the most important, if you are having fun you will want to keep trying and if you keep trying you will get better. Simple as that. Expand your mind by learning to design your own sites.