At-Ease Homepage Concept​


Homepage UX


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

Old design

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.

Old Home Page Design UX

New design

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.

Home Page Design UX


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.

Primary navigation

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.

Shopping cart

Further right is the shopping cart icon.

Search field

The search icon is most commonly placed in the farthest right position.

Hero section

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.

Problems solved

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.

Purchase options

The purchase options may include the range or product offerings, a feature and price comparison, and the ability to purchase.

Trust building

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

  • Logo
  • Navigation
  • 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.