In “Understanding Digital Marketing ” Damian Ryan asks the reader to consider their website as their digital shop window and to understand that visitors will peak through that window only briefly to decide whether a website will serve their needs or not. A successful website is not that different from a shop, it must serve both the needs of the business owner and the customer. A business website is irrelevant unless it takes traffic and converts it into customers. The one of keys to addressing both these stakeholders is through web design.
1. Examples of Good Website Design
Good website design is predicated on providing both a positive user and customer experience (Ryan, 2017). User experience is dependent usability ( how easy it is for the user to navigate the website and achieve their goals). Simultaneously, customer experience is dependent on value (whether your website satisfies a user’s needs in a timely, relevant and engaging manner).
1.1 Hubspot (https://www.hubspot.com)
Hubspot’s website is a superlative example of a click through landing page as it is: lucid, benefits driven and provides value for the visitor while asking little in return.
Hubspot’s headline is clearly benefit drive, explaining to the visitor what they will receive for utilizing the websites services. I feel that the headline empathises with the jobs that the visitor wants to get done, while addressing their concerns. Their site also benefits from clear information architecture, with links to different sections of the website readily visible at the top of the page and also moves down the page with the visitor as they go below the fold.
Hubspot’s choice of image presents a charming visual metaphor for the benefits of using their software while also depicting their role in the user’s journey to success, I think that this simple example of visual storytelling is effective and the use of lego figures is also associated with building, further reinforcing the metaphor.
On the page, the call to action is immediately recognisable due to its positioning below the headline and copy and its large size and contrasting colour. The text on the CTA button simply explains what the result of clicking will achieve. The copy beside the smaller call to action explains Hubspot’s pricing lucidly and the mention of “free” helps to address last minute concerns and hesitation. The same call to action is repeated on the top right of the page, near the search button – an easy place to find place. Clicking the call to action takes the user to a new page, requiring three fields to be filled out.
Below the fold, Hubspot displays social proof by presenting their user statistics helping to reinforce their value to their customers.
Hubspot’s page also features adaptive design, ensuring that their user experience is consistent across different devices.
1.2 MailChimp (https://mailchimp.com)
Mailchimp’s very simple click through landing page is colorful and attractive, above the fold it primarily utilizes a headline, call to action and presents its value proposition.
Mailchimp leads with a clear and conversational benefits driven headline that empathises with the visitor by addressing the goals that they would like to achieve. Further down, Mailchimp presents its value proposition that by reflecting the problems that a customer may face and further reinforces the benefits that a user would derive from product usage.
Below the headline and above the copy is a contrasting call to action that entices user by the promise of something for free.The text on the CTA button details what will happen when the user clicks. Clicking on the call to action, the user is taken to a signup page requiring three fields and further elaborates on what the visitor will receive for free.
Towards the bottom of the page, a second benefits driven headline acts as a visual cue to alert the visitor that there is more information below the fold. The user is presented with a video demonstration of the Mailchimp product and further down social proof is displayed by a list of brands that utilize Mailchimp’s product. Similarly to Hubspot, when the user scrolls down the page, the call to action button reappears near the search field at the top of the page, movement alerts the visitor.
Mailchimps site has clear information architecture with links to other parts of the website, which stays at the top of the page as the user scrolls down. The website is also adaptive for other devices to retain a positive user experience.
1.3 Hootesuite (https://hootsuite.com)
Hootsuite’s click through landing page yet again leads with a simple and compelling benefits driven headline that appeals to the needs of their visitor. The copy below summarises the customer journey which a marketer would wish to influence, displaying empathy for the needs of a Hootsuite visitor.
Below, the visitor is presented with two call to action buttons. The clearly contrasting call to action on the left explains what the action will achieve, leading to another page with a signup for which also details the free trail offer. The call to action on the left provides information about pricing and displays social proof by listing brands that use the platform.
The second headline further down the page provides a visual cue to the visitor that there’s more information below the fold. When the visitor scrolls down, a lead capture form pops up, offering a prize winning social media management report for a first name and email – a mutual exchange of value between visitor and brand.
Hootsuite’s website features adaptive design, ensuring user experience on any advice. It also has clear information architecture, with links to different pages on the website visible at all times at the top of the page.
2. Examples of Poor Website Design
Poor web design is either fails ergonomically, in that is either difficult to understand or navigate or it fails to provide value to the visitor and wastes their time. Often, poor website design is a case of form over function that (Wishpond, 2017) that fails to capture value for both the visitor and the website.
2.1 Yale School of Art (http://art.yale.edu)
Yale’s Art School Webpage suffers from a myriad of poor design choices that render the page confusing and aesthetically displeasing.
The page suffers from insufficient information architecture in conjunction with a lack of headlines. This makes the website confusing, it is not immediately clear where a user should go to utilise the information on the site.
The website itself is unattractive, with the same photograph tiled four times to fill the page. The colour schemes of different sections do not meld well and appear messy. There are also a variety of formatting errors that make the page look sloppy and unprofessional, not at all representative of Yale’s Ivy League reputation.
2.2 James Bond Museum (http://007museum.com)
The James Bond Museum’s website is confusing and fails to effectively communicate with visitors. The website itself presents such a variety of closely spaced text about different topics, without any easily understandable information architecture that it becomes very difficult to navigate.
The website does not have lucid, easily scannable headlines that communicate benefits, value or where to look for information.
The website itself is not attractive, there are many images but none are engaging or function to provide a focal point for the visitor to concentrate on.
Perhaps the James Bond Museum could prove to be immensely interesting if visited but its website fails to engage, fails to provide a visitor of what to do next as it has no call to actions and fails to communicate the value that a visitor may derive from visiting.
2.3 Arngren E-commerce Store (http://arngren.net)
The Arngren e-commerce website immediately presents visitors with an overwhelming display of images of products being offered, paralysing the visitor. Aside from the navigation sidebar on the left, there appears to be a very limited attempt to organise information for the visitor. This causes the website to not have a focal point, stranding the user.
Arngren does not have any immediately discernable headlines, aside from the domain name of the website, failing to communicate the purpose or benefit of the site, making it difficult to decipher what unique value the site provides to a visitor.
The website itself is ugly and claustrophobic due to the sheer number of photographs of product, which are not organised or curated at all. There are also no calls to actions to inform visitors where to go next or tempt them to make a purchase.
In conclusion, good website design is integral in the actual purpose of a website, to communicate with a visitor. User experience is essential to allow a visitor to easily navigate to complete the job they are trying to do. Meanwhile, customer experience must be seriously taken into account to ensure that a visitor derives value from their time invested on the website. In essence, good website should be a mutual exchange of value between the user and the business.
Durepos, A. (2017). 16 Overlay Examples Critiqued for Conversion. [online] Unbounce. Available at: https://unbounce.com/conversion-rate-optimization/16-overlay-examples-critiqued-for-conversion/ [Accessed 19 Jun. 2017].
Ryan, D. (2017). Understanding Digital Marketing. 4th ed. London: Kogan Page.
Unbounce. (2017). What is a Landing Page?. [online] Available at: https://unbounce.com/landing-page-articles/what-is-a-landing-page/ [Accessed 19 Jun. 2017].
Wishpond. (2017). 7 Landing Page Design Mistakes Killing Your Conversion Rate. [online] Available at: http://blog.wishpond.com/post/95467061386/7-landing-page-design-mistakes-killing-your [Accessed 19 Jun. 2017].