This website homepage concept was conceived during a project to redesign of a number of websites for the Department of Veterans’ Affairs.
This image shows the original website as it appeared in December 2017. The logo was redesigned by an external agency to that shown in the new concept. All photography throughout the website was kept.
This website homepage concept was conceived in 2018 during a project to redesign of a number of websites for the Department of Veterans’ Affairs. The structure of the page was designed using the following principles for home page design.
The header is largely constant throughout the website. It should not change from page to page.
The website logo will usually sit in the top left corner. A centred position is also popular. It should be linked to take the user to the home page from any page.
The navigation will usually sit top right in line with the logo. It may also sit either side or below a centred logo. There are many exceptions and different placements according to individual designs.
Further right is the shopping cart icon.
The search icon is most commonly placed in the farthest right position.
The hero section is a large, eye catching area. It should sit above the fold.
Hook or primary value statement
The first line of text in the hero section is large and bold. It can take the form of a hook such as a question or statement. It can also form the primary value statement spelling out the core value of the website offering.
Supporting or secondary value statement
This will be in a less substantial font, and will be wordier than the primary value statement. It may consist of one, two or sometimes even three sentences. It will support or expand upon the message in the primary value statement,
Primary call to action
The primary call to action is one of the most important elements on the front page. This button begs the user to click / tap it. For example, it may ask the user to sign up to a premium subscription. The primary and secondary value statements seek to convince the user to interact with this button.
Secondary call to action
The secondary call to action button isn’t always used next to the primary call to action button. It may also appear below the fold in a different section (or may not be used at all). Whereas the primary call to action may ask the user to sign up to a premium subscription, the secondary call to action button may be to sign up to a free subscription.
The hero section should contain an image that alludes to or supports the written content. It should be eye catching, and meaningful.
Services or products
The products on offer may be listed. This is pretty straightforward. For example, a digital design company may list their services in a row of icons such as web design, app design, etc.
The feature content is closely aligned to the services or products. They may even be mutually exclusive. The feature content simply spells out the features of the product or service on offer.
The benefits are also linked to both the features and services / products. The befits section will talk about the advantages the offering will provide the user, or perhaps how it is better than a competitor offering.
A different and perhaps more relevant way of looking at benefits is deferring to problems that the product or service solves. This indicates why the user needs the product in a similar way.
The purchase options may include the range or product offerings, a feature and price comparison, and the ability to purchase.
Word of mouth has always been an effective method to spread good or bad experiences about a product or service. This is achieved on the home page by displaying the statements of the experience of other users. Social proof and trust building elements include:
- Client logo list
- Awards / certifications
Secondary call/s to action
Secondary calls to action may exist below the fold. This may be a repetition of the primary call to action, or a lesser action.
Link to resources / learn more
For the user to learn more about the product or service, there may be a link to a resource centre or another page within the website that provides more in-depth information.
Offering e.g. free article, subscription
Providing the user with some sort of free offer such as a free newsletter or white paper will validate the product or service.
The footer is similar to the header but in a more compact form. Additional information may be displayed such as social media and direct contact information. E.g.
- Contact information
- Social media
The order of the content will form a hierarchy in terms of its relevance. However the layout may form a path which the eye follows such as:
- Z model
- Zig zag pattern
- F pattern
Not all of the above need to be included. However careful consideration of each of the elements above is worthwhile when deciding what to place on the homepage. As you can see in the concept homepage above, the new homepage design is laid out in a far more logical and engaging manner.