Department of Veterans’ Affairs: At-Ease homepage prototype​

Home Page Design UX

Context

This website homepage prototype was conceived during a project to redesign of a number of websites for the Department of Veterans’ Affairs.

The logo was redesigned by an external agency to that shown in the new prototype. All photography throughout the website was kept.

During the design of this page, I adopted the fundamental principles of home page design. The following is a description of those principles. 

Principles

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.

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 centered 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.

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.

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.

The supporting secondary value statement 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,

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.

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.

The products or services 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:

  • testimonials
  • reviews
  • statistics
  • client logo list
  • awards / certifications.

Secondary calls to action may exist below the fold. This may be a repetition of the primary call to action, or a lesser action.

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.

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. The logo, navigation, contact information and social media are common items to display in the footer.

Conclusion

As can be seen, by adhering to these principles, and combining them with sound UI design, an effective home page design can be achieved.