Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Principles of Website Design LW.pptx

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Starting Out with Xero.pptx
Starting Out with Xero.pptx
Loading in …3
×

Check these out next

1 of 71 Ad

More Related Content

Recently uploaded (20)

Advertisement

The Principles of Website Design LW.pptx

  1. 1. The Principles of Website Design
  2. 2. Learning Outcomes • Importance of good website design • Website Essentials • UX • User testing and Analytics tools
  3. 3. Why is Website Design Important for a Business?
  4. 4. Why is Website Design Important • It sets the first impression Visitors will judge your business within seconds. In these first few seconds, you want to make a positive impact on your audience • It is a crucial part of your Search Engine Optimisation (SEO) Strategy If your on-page SEO fundamentals are not up to scratch, you’ll struggle for visibility from the start • It sets the impression for customer service People can judge how you will treat them by looking at your website. If you don’t put any effort into your website’s design, your audience assumes that you won’t put effort into helping them • It builds trust with your audience If they see your poor design or the information looks outdated, they won’t trust your site • Your competitors are doing it If you want to remain in competition with them, you must use web design for your site
  5. 5. Great site design = More trust = Better conversion
  6. 6. Mobilegeddon (2015) • Google posted this message on the official Webmaster Central Blog, as they sometimes do, and explained the update in brief detail accompanied by a picture to show the difference between what mobile-friendly was and wasn’t • This update provided no grey area. Your pages were either mobile-friendly, or they weren’t. There was no in-between.
  7. 7. Exercise 1- How Good is Your Homepage? • You've got a website. But is your homepage any good? • How can you improve it? Complete the quiz and we’ll discuss the results! https://gillandrews.com/quiz-how-good-is-your-homepage/
  8. 8. Website Design Essentials
  9. 9. First things first! Are your visitors in the right place? • What does your product do? What does your service offer? • What makes you/your business better or different • What are the benefits? • Who is it for? Demographics, lifestyle, online behaviour and what makes them tick The most beautiful website will fail to grow your business if it’s aimed to the wrong audience
  10. 10. Every Page Should Include Relevancy • Content must be relevant to your target audience • Content matches the expectations of your visitors based on the link they clicked to get to your page • Page content delivers what the title has promised Clarity • Clear copy • Avoid Jargon • Use short sentences • Avoid meaningless words “Welcome to our website!” & ‘Click Here’ • Focus on your customers use “you/your” not “I/my”
  11. 11. Copy Examples Self-centred: X I teach great marketing X We oversee one project at a time X These windows are double-glazed Customer-focused: ✓ Learn how to turn great ideas into great marketing campaigns ✓ As we oversee one project at a time, you’ll have our undivided attention ✓ These double-glazed windows will save you heating costs in winter
  12. 12. Clear Design • What’s important is prominent • Logically related elements are also visually related • Clearly defined page areas • Links visually stand out (anchor text) • Text doesn’t look like clickable elements Don’t include all the ‘bells and whistles’. The best design isn’t the most beautiful, it’s the one that converts the most visitors
  13. 13. Add Value • Put your customers needs first, not your business goals • Build trust by solving their problems or answering their questions • Provide tips, hints, how to’s • Provide unique content based on your expertise • Research the appropriate content formats • Add a tool (mortgage calculator) or a special feature (360 degree tour)
  14. 14. Trustworthiness • Use, like, proper grammar and don’t missspeell nufin (Bing prioritises error free content) • Avoid superlatives (“best”, “greatest”, “awesome”, etc.) • No capitalisation (Exception: Section headings) • Include trust indicators and evidence any claims, USP’s etc • HTTPS domain
  15. 15. Avoid Distractions • No auto play of video / audio • The rule of one • No elements that are moving on their own • Reduce number of ads (ideally no ads!) • Use pop-ups wisely • Make sure each goal can be reached in 3 clicks If your website doesn’t get much traffic yet, your interstitial (interruption ads and/or banners) may cost you more money than they bring in.
  16. 16. Minimise Friction • All pages on you website must be: • Easy to read • Unobtrusive background • Readable font types and sizes • High contrast between font and background • Text is well-formatted and scannable • Headings • Short paragraphs • Text highlights (bold, italic, etc.) • Lists / bullet points
  17. 17. Minimise Friction • Easy to use • Meet your visitors’ expectations on where to find certain elements and how to interact with them: • Make clickable elements look like buttons or visually prominent links • Non-clickable elements (body text or headings) shouldn’t look like buttons or links • Navigation labels and CTA copy should be obvious and understandable
  18. 18. Makes Calls to Action Clear, Obvious & Enticing • Create every page with one action/goal in mind • Calls to action must be visually prominent • Calls to action are clear and understandable (fill in the blanks - “I’d like you to…” or “I’d like to…”) • Use strong action words (shop, order, reserve, try, get started, claim, learn more) • Provoke emotion or enthusiasm
  19. 19. Call to Action Examples Bad: X More info X Become a hero X Evolve with it Good: ✓ Find out more ✓ Book a free course ✓ Register for this webinar
  20. 20. What Must a Homepage Include? •A clear website tagline and a paragraph of text (if necessary) that explains: • Who are you? • What do you do? • Why should your visitors care about your busienss? • What’s the benefit (to your visitor)? Does your tag line explain your business to a stranger? Would you personally use those words to explain your business to a prospect?
  21. 21. Navigation • Plan your navigation and prioritise important pages • Stick to conventions - no more than 7 navigation labels • Positioned as your website visitors expect it (one row at the top of the page) • Link the logo back to the homepage • Mouse pointer changes on clickable links • Label your menu clearly and be descriptive • Add a search bar • Ensure visitors can reach any page from any page Navigation is the last place you should try to be creative. Your visitors won’t read it. They’ll scan it for familiar labels. Anything that is unclear or requires them to pause and think will cause irritation or will be overlooked
  22. 22. Other Homepage Musts • Photo of yourself or your team • A paragraph about yourself / your team • Call to action (you can have multiple calls to action) • Logo • Search box • Social proof e.g. Credible client testimonials, Client logos, Certifications & Awards • Smart Footer e.g. Copyright, Navigation to main pages, Privacy policy, Terms of use, Contact, Postal address / link to a map etc (Just select the most relevant for your business). • Featured posts & Videos • Social media links • Prominent phone number and email address
  23. 23. About Page • Useful and informative • Your photo or a photo of your team • A short personal introduction that shows you as. likable, relatable & approachable • Your mission - what problems do you solve and for whom? • Credibility enhancers, such as, qualifications, awards, features in famous publications & client testimonials • Examples of your work • A clear Call To Action
  24. 24. Service Pages • Short description of what you offer and for whom • Featured services (one section for every service): • Service title • Brief service description • Link to the corresponding page in a form of a call to action • Credibility enhancers • Client logos • Credible client testimonials • Link to your contact page Create a dedicated page for each major service you provide. This will help you rank better for the relevant keywords.
  25. 25. Service Pages Unique value proposition • What is it? • Service title • Whom is it for? What’s the benefit? • Expose reader’s need • Demonstrate importance • Tell what’s in for them • Focus on benefits, not features • Tell them what makes your offer unique Slack – Be More Productive at Work with Less Effort
  26. 26. Service Pages •Earning trust • Add a short description of your process (what happens next) • Answer frequently asked questions • Address and remove possible objections •Credibility Enhancers •Call to Action •Link to contact page or embedded contact form (minimal fields) You must show your prospects that you are the right person to solve their problems. Make your them feel comfortable to contact you by keeping the conversational tone and anticipating their questions.
  27. 27. What makes a website credible?
  28. 28. Service Pages • Try to avoid drop-down menu in the navigation • Users tend to skip top-level navigation labels if there is a drop-down menu • Users find drop down menus irritating and confusing • Drop-down menus don’t work on certain devices • Drop downs encourage visitors to skip important top-level pages. • They can hide information • They can affect SEO
  29. 29. Alternatives to Drop Downs • Create a main Services page that features separate services on it and link to the corresponding pages Link only to your main Services page from the top navigation without a drop-down menu • If you offer only a few services, you can omit the main Services page and link directly to the single services from your top navigation. • Consider sticky menu’s or scroll panels
  30. 30. Blog Pages • Links to your blog posts (internally link blogs from the same topic cluster) • Enticing titles relevant to your target audience • Only a short snippet of the posts’ text • Add a paragraph of what to expect on your blog • Feature several categories above the fold to increase the chances of your readers to find a topic they are interested in • A short paragraph about your blog’s focus, featured categories, featured blog posts, etc
  31. 31. Blog Posts – Step by Step • Step 1: Plan your blog post by choosing a topic, creating an outline, conducting research, and checking facts. • Step 2: Craft a headline that is both informative and will capture readers’ attentions. • Step 3: Write your post (minimum of 300 words, however studies show long blogs (1500+ words) rank more easily • Step 4: Use images to enhance your post, improve its flow, add humour, and explain complex topics (also think video, infographics, diagrams, charts, tables etc) • Step 5: Edit your blog post. Make sure to avoid repetition, read your post aloud to check its flow, have someone else read it and provide feedback, keep sentences and paragraphs short, don’t be a perfectionist, don’t be afraid to cut out text or adapt your writing last minute.
  32. 32. Blog Posts Engaging Content • Keep the promise of the tagline • Grab readers’ attention from the first sentence • Use cliff-hangers to keep them reading • Get to the point quickly • Use short sentences • Use words anyone will understand • Optimise for SEO
  33. 33. Blog Posts Choose the right format • Break content in sections with headings and subheadings Use font big enough to make it easy to read (also on mobile) • Use short paragraphs • Use enough white space • Use bold and italic highlights wisely • Use visuals – images, videos, charts, graphs etc • Bullet points • Internal & External Links to related content
  34. 34. Search Engine Optimisation • Target medium & long-tail keywords • Use words that are semantically related to the main keyword • Use keyword in • URL • Meta title • Meta description • Beginning of the text • Throughout the text where it sounds natural to do so • H1 Header and H2 Subheadings • Images (file names, image titles & ALT tags) • Add internal links & calls to action Apply this process to every page you want to be found in search
  35. 35. • Se •Earning
  36. 36. A very high % of keywords lie in what’s called the ‘long-tail’ of search. The long tail contains hundreds of millions of unique searches that might be conducted a few times in any given day, but, when taken together, they comprise the majority of the world’s demand for information through search engines.
  37. 37. Blog Posts Blog Authors Biography: • Create a separate Bio URL and link all blog posts to it (Medic 2018) • Keep the Bio Short and Concise • Include Information on Job Title and Function • Include Your Experience • Highlight Expertise & Trustworthiness • Include Social Media Profiles • Include a Good Photo • Inject Your Personality
  38. 38. Contact Page Must haves: • A photo of you/the team • A friendly paragraph explaining why prospects should contact you and how you’ll solve their problem • Mention how long it usually takes you to respond to inquiries • Use contact form instead/or along with an email The advantages of a contact form: • Ask for particular information • Track submissions • Reduce the number of spam emails • Add a “thank you” page (conversion tracking) Link to your contact page from your main navigation, service pages & footer
  39. 39. Testimonial Pages • Short and direct • Believable • Full names and, if possible, headshots of the clients • Specific enough to sound authentic • Backs up your claims • Reinforces your USP • If possible, includes the keyword you’ve optimised the page for
  40. 40. FAQ’s • Use service data to identify your most common questions • Make is easy to navigate • Make it scannable (headings, lists, highlights, spacing, follow conventions) • Most asked questions come first • Avoid duplication of content • Answers are succinct and to the point • Link to contact page In addition, think about which questions visitors may ask when on certain pages and add them in so visitors don’t have to leave the page to get an answer to a question.
  41. 41. UX
  42. 42. What is UX and why is it important? The user experience (UX) is what a user of a particular product experiences when using that product. A UX designer's job is thus to create a product that provides the best possible user experience. UX ENSURES USERS FIND VALUE IN WHAT YOU ARE PROVIDING TO THEM
  43. 43. The 7 factors that influence UX USEFUL: should be original and fulfil the need of the user VALUABLE: the website must offer and deliver value to the customer by solving a problem and providing solutions to it USABLE: easy and enjoyable to use, effective (goal completion) and efficient (speed) FINDABLE: the website must be easy to find and so must its content – SEO + organised sections CREDIBLE: the user must be able to trust and believe that what you are telling them is true – give your users a reason to stay and not leave after a few clicks DESIRABLE: UX makes sure all the visual components come together to make the website desirable ACCESSIBLE: to everybody regardless of disabilities
  44. 44. Empathise – with your users Define – your users’ needs, their problem, and your insights Ideate – by challenging assumptions and creating ideas for innovative solutions Prototype – to start creating solutions Test – solutions
  45. 45. • Who is our main user and what do they want? • Are we using data to back up our assumptions or is it a subjective feeling? • Have we collected enough evidence to validate our idea of our target market? RESEARCH your CORE DEMOGRAPHICS DEVELOP a basic understanding of your USER BASE Empathise
  46. 46. Fictitious person representative of your target market based on the data and information you have collected - not imaginary people Create Your User Persona • What are the users going to do when we they first approach our website? • When will these users most likely use our website? • What goal will our users like to accomplish on this page/through this flow? • What would make their user experience better?
  47. 47. Ideate WIREFRAMES are the rough guide of any website. Void of any visual element they are only about structure, hierarchy, content and leading the users where you want them to go. • What’s the page content (picture, text, video…)? • How do you link the different sections? • Where do you go from each page? • What comes first and where are the hyperlinks? FREE WIREFRAME TOOLS
  48. 48. Prototype • UX COPY focus is on trying to get things done quickly and efficiently, it is not about the feel and tone of the brand. • Does this motivate the user to accomplish their goal and is their goal our goal? • Is the bigger text more important than the smaller, why? • Does this copy inform the user enough or does it assume a certain level of prior knowledge? • Is it clear, direct, functional? • Does it work?
  49. 49.
  50. 50. Journey Mapping • Once you’ve created a detailed buyer persona to help guide your website’s content, messaging, and design, what is the next step? • Think about your buyer persona’s relationship to your website, and how they engage with it before, during, and after they become a customer. • It’s important to identify the key interactions at each stage, and pinpoint what the user is feeling, what questions they may have, and what motivates them. • Many customer journey maps depict this information via an infographic or diagram for easy visualisation
  51. 51. User Testing • It’s hard to evaluate your own website because you already know how it’s supposed to work. • Find a few friends or volunteers willing to help you out. Don’t worry too much about finding the “perfect” tester. Since you’re testing universal website behaviour, almost anyone will do. • Give the tester a specific task to achieve on your website, then see what they do. Ask them to narrate out loud as they click so that you can understand their thought process. • Keep your tasks open-ended. No hints! For example, instead of saying “Use the navigation bar to find the ‘Contact Me’ page,” say, “If you wanted to get in touch with me, what would you do?” • Apply lessons from the test to your website. If the tester encounters a problem, use this information to improve the design of your website.
  52. 52. User Testing and Analytics
  53. 53. Website Analytics • Web analytics is the measurement, collection, analysis, and reporting of web data to understand and optimize web usage. • Web analytics is not just a process for measuring web traffic but can be used as a tool for business and market research and assess and improve website effectiveness.
  54. 54. Thank you Please complete the feedback form for this course using the QR code or this link. https://forms.office.com/r/6G0cgGKLA1

Editor's Notes

  • 1. If your website looks unappealing or outdated, your audience will immediately have a negative impression of your business, deterring them from your page. You’ll miss out on leads because they’ll leave your page for a competitor’s page. Web design impacts how your audience perceives your brand. The impression you make on them can either get them to remain on your page and learn about your business or leave your page and turn to a competitor. A good web design helps you keep your leads on your page.

    2. Many web design elements and practices influence how you publish content on your website, which in turn affects how search engine spiders crawl and index your website. This is one thing you cannot afford to mess up. If are not up to snuff, you’ll be fighting an uphill battle for visibility from the start.
    Aside from how content is published on your website, certain web design elements can directly affect SEO in and of themselves.

    3. Your website is like a customer service representative. If your website is bright, modern, and inviting, your audience will feel more welcome on your page. You’ll give the impression that you are open and welcoming to new people who visit your website. On the other hand, an outdated and unappealing site makes your business appear cold and aloof. People don’t want to check out a business that doesn’t value them enough to make a good first impression.
    Think of your web design as the digital face of your business.

    4. a professional site signals trust with your audience. They will trust your business and feel comfortable checking it out further. It’s important to build trust with your audience so they remain on your site. When visitors remain on your site longer, you create more opportunities for your business to capture those leads.

    5. You want your website to stand out from the competition. If you have an old, outdated, and low-quality website, your competitor’s will outrank you. Their well-designed website will perform better than your website. Your website’s design is an opportunity for you to set your business apart from the competition.
  • Responsive web design describes when the website’s design is automatically adjusted based on the size of users’ screens.
    With responsive design, users can easily browse a website regardless of what device they use.
    The site’s layout and the content will change based on the width of a browser on a device.
    As the term suggests, mobile-first design is an approach in which web designers start product design for mobile devices first. 
    Although it can be largely successful to implement a mobile-first strategy, it has not necessarily been adopted by every business or all web agencies as it may not be the right fit for all involved.
    This is can be the result of the fact that it is notably expensive and may not garner the exact results you are searching for.
    Questions you need to ask yourself:
    Does my clientele mainly use mobile devices to browse the web?
    Do my customers prefer searching the web on computers or mobile devices?
    What’s important for visitors is the ability to quickly and easily find the information they need—and perform the actions they’ve set out to do. In fact, when designing a website, I like to think that we should all adopt a consumer-first strategy.
  • Trainers choose a site they are familiar with and points out how it sets a good first impression, good SEO fundamentals, look & feel setting the impression, emotive copy, builds trust.
  • Allow 15 mins to do the test and discuss findings
  • Business website all should be about the customer
    You only have a couple of seconds to show visitors they are in the right place.
    Demographics: Age Gender, Education Family, Situation Occupation, Income, Geographical location
    Lifestyle: Hobbies, Favourite TV shows & movies, favourite books, Pets, Where can you meet them offline?
    Online behaviour: Preferred social media platforms, Forums, Websites, Preferred way to get information online (videos / podcasts / blog posts, etc.)
    What makes them tick? Problems, Fears, Dreams, What’s important in life? (Values) How do they make the decision to buy? Whom do they trust?
  • Whether it’s your homepage or your blog post, if you want your website visitors to keep reading, pay attention and connect with you, make sure you have these points covered on every page
    Matching expectations – this comes from in depth competitor analysis and research of topics.
    Research the types of content clients want to see (Google Search, Ubersuggest, competitor research)
  • Each time you add value through your content you build a little more trust with your consumer. Instead of being frustrated and leaving, perhaps they explore your website, follow you on social, even subscribe to your email list. Each of these things helps keep you top of mind without them feeling sold to.
  • Trustworthiness. Trust is about the legitimacy, transparency, and accuracy of the website and its content.
    E‑A-T- stands for expertise, authoritativeness, and trustworthiness. It comes from Google’s Search Quality Rater Guidelines—a 168-page document used by human quality raters to assess the quality of Google’s search results.
  • It is more polite and more effective to leave the video off until the audience chooses to engage with it.
    Rule of One - Every page on your site should have one purpose, one call-to-action and one point of focus also helps to avoid keyword cannibalisation
    Moving elements = Blog carousels Testimonial carousels Client logo carousels, etc.
    Don’t use intrusive pop-ups on mobile. Make sure you are not interrupting your visitors before they reach their goal. If using a pop-up, make sure it can be easily closed
    On average, small and medium business owners need 1319 people to see their opt-in pop-up to get one engaged subscriber.
    The 3-click rule assumes that users will become frustrated and will likely give up on tasks that require more than three total clicks to be completed.
  • Friction happens when something on your website slows down or stops the progression of a prospective buyer from moving through your sales funnel. Identifying points of friction in your sales process and addressing them can help increase sales from your existing traffic dramatically.
  • How to minimise friction:
    Improve The Website Design
    Increase Site Speed
    Simplify Options
    Multiple Ways To Pay
    Reduce Requirements i.e. don’t make a prospect register, login, signup, create an account, or become a member just to make a single purchase.
    Critical Fields Only


  • Calls to action aren’t only for sales page. Even if it’s just a blog post, you should write it with that one action in mind you want your visitors to take: For example, to share this post, to leave a comment, or to check out your Services page
    Provoke emotion or enthusiasm - If you want to evoke an emotional response in your users, opt for a longer CTA. You’ll need to incorporate more modifiers in this case to get the desired effect. Here are some examples: Add numbers: “Buy now and get 50% off!”; Add adjectives: “Find your dream home with us!”; Make a promise: “Lose weight in just 6 weeks!”; Influence their FOMO: “Limited time offer. Get your free T-shirt!”; Play up your USP: “Order a hand-made soap now!”;

  • Can you see the Fathers Day Offer? Where on earth would you click to check it out? The image? There’s no button, no invitation to check it out… it’s just.. there. To navigate to the product page, you have to click the text, which doesn’t look like a link.
  • This call to action hits several major marks. First, it establishes why trying out Crazy Egg is risk-free, using simple language that reinforces the safety of trying out their service.
    It lists several reasons why you’d want to do this, using simple verbs. Finally, the CTA button itself (“Show Me My Heatmap”) taps into the power of using the voice of the customer, making it irresistible.
  • Check your call to action against the LIFT Model
    For example:
    Download = relevance
    this ebook = clarity
    now = urgency
    Download this ebook = value proposition
    Use the text surrounding your call to action to: Reduce distractions (i.e., remove unnecessary links, images, etc.) & Ease anxiety (e.g., add the disclaimer “no credit card required”)
  • It’s tempting to put too much information on your homepage. Yet, if it fails to clearly communicate what you do and offer an easy way for your visitors to navigate your website they won’t stay for long. Use the following checklist to make sure your business homepage is as effective as possible
    When in doubt, use this sure-fire tagline formula: {What you are}. I {do what} {for whom} {with what benefit}.
  • This is a great example of a tagline for a personal website. It gets straight to the point and addresses the burning need of Sarah’s prospects – making their emails convert.
    Mentioning her specialty, the emails for course and program creators, helps Sarah appear more relevant to her target audience – course and program creators.
    Website tagline: High converting emails that sell your courses and programs
    Website tagline formula: {What} {with what benefit} {for whom (implied)}
  • The secret to creating a copywriter’s headline that stands out is to either specify your niche or to specify what kind of copy you write, like Damn Write does it on their website.
    Website tagline: Attract your ideal clients with personality-driven copy
    Website tagline formula: {Get this benefit} {with what}
  • A website can have the best content generation and marketing out there, but if visitors can't find what they're looking for they can't find the solution to their problem. This makes your business insignificant to your visitors.
    Vague labels: Get to Know Me; How can I help? Fees & Charges; Read My Columns; Support yourself; Get in Touch
    Clear labels : About; Services; Pricing; Blog; Books; Courses; Contact
  • If your site has menus on multiple sides of the page, or too many drop-down options under each heading on the main menu, a visitor’s eyes can quickly glaze over. The likelihood of them finding the information they need to convert is slim to none.
  • Your About page isn’t a place for your ramblings about your career path, your hobbies or your philosophy. The main question it should answer: What problems do you solve and how you can help your customers?
  • https://www.blueapron.com/pages/our-team
  • Your services page is one of the most critical pages on your website whose purpose is to not only reveal what you offer but how your company stands out from the rest. It starts with the messaging. Based upon the service you have; you need to figure out the best way to explain it.
    Before creating your service pages, think about how you want your visitors to find them. Do you offer many services and want to link to them from the top navigation menu? Avoid using a drop-down menu.
  • Hootsuite used their training services page to address the stages its team implements and executes to show that the journey doesn't stop, but instead, evolves into monitoring and continuously improving their customer's success.
    To put icing on the cake, they also added some client testimonials below the service 'set up' section to make sure they have proof to show their service strategy works.
  • A value proposition tells prospects why they should do business with you rather than your competitors, and makes the benefits of your products or services crystal clear from the outset.
    SLACK - Essentially, Slack distils its value proposition in the example above – it makes users’ “working lives simpler, more pleasant, and more productive.” The NASA JPL example is also very clever in that it subtly implies that if it’s good enough for large teams of scientists at NASA – the kind of people who put robots on other planets – then it’s good enough for anyone.
    You will want to convey the quality of your services and/or products, you shouldn’t focus too much on the features. Rather, explain the benefits a prospect will receive from buying from your company instead.
  • Credibility is a term that reflects the absolute trustworthiness and expertise of your website to site visitors. That is how the website communicates to visitors that visitors can trust business and the business is competent enough to deliver its promises.  
    What Makes a Website Trustworthy?
    High-quality design
    Good mobile version 
    Domain with HTTPS
    Certificates and badges provided by credible institutions 
    Well-know past clients shown on the website in logos trust bars and portfolio
    Detailed testimonials, easy to verify by customer
    High-quality content 
    Grammatically correct texts
    Age of company and website
    Contact methods and availability
    Business information (company name, address, tax number) on the website
  • Concise navigation is also important for SEO. When your navigation has too many links, less authority and trust passed down to the interior pages. The link juice is diluted. The more concise your navigation, the more home page authority will flow to interior pages, making them more likely to rank.
  • Longlands image is a link. From Homepage Click on Lodges to display non drop down sub menu
    Sticky menu A sticky menu is a fixed navigation menu on a webpage that remains visible and in the same position as the user scrolls down and moves about a site.
    Utilising a scroll panel design gives you space to create an impactful design and utilise large, striking imagery. You just have to be sure to clearly segregate different panels as make it obvious to your user where they’ll be taken if they click on that panel


  • The purpose of a blog is to provide content on your website that answers your prospective customers' questions and helps them learn about your product or service. It expands your brand's visibility by giving Google and other search engines content to index and serve up in search results.
    On your Blog page, your visitors expect to see the links to your blog posts. So, make sure the first links to the posts are visible above the fold and add additional information only if it helps your visitors achieve this goal.
  • Good example, ticks a lot of boxes from previous slide
  • Capsicum Mediaworks agrees with this. Their research shows that, on average, the top 10 results for most Google searches are between 2,000 and 2,500 words. 
    Writing long-form blog posts will boost your SEO ranking so that more users can find your awesome content online!
  • Mention links to authors bio
    An internal link will pass PageRank (or SEO value) as well as context through anchor text and surrounding content
    Linking to external pages e.g. source of research you site, demonstrates your expertise to your visitors and adds to usefulness
  • Having more semantically related keywords means that your webpages provide more contextual background on a topic and therefore they can perform better in search results.
    Google will be able to make connections between the semantically related topics that your content covers and understand the bigger picture of how your information answers the questions that are being searched.
    Internal links can improve your SEO, as they pass authority from one page to another. To give a ranking boost to a post that almost ranks on page #1, add an internal link to it from a page with a high authority.
    Calls to action aren’t only for sales pages. After they’ve read your blog post, point your impressed readers towards the next step you’d like them to take – CTA’s contact you, share post, leave a comment, visit a service page, read another blog

  • For 3 hour workshop demonstrate Ubersuggest
  • Having an Author’s bio after every post on your website will make your impressed visitors remember your name and recognize it next time they see it, for example, in their inbox or social feed. Adding the links to your social profiles and to your lead magnet will encourage your visitors to connect with you on other platforms or subscribe to your updates.
    Medic Update (2018) - If you are in a more scrutinised niche such as YMYL, make sure to go into the details that demonstrate E-A-T
  • If you want more people to contact you, you need to do better than having just a generic contact form on your Contact page. Here’s what you should include on your Contact page to make your prospects feel welcomed.
  • Sleeknote takes a more traditional approach to contact page design with this vertical form aligned next to a trio of almost-CTA prompts: Book a demo, get inspired and become a partner.
    Sleeknote makes it very clear which type of actions users can take via its contact page and this reduces the number of irrelevant messages coming in. Those who want to book a demo will click the link and be directed to the relevant field
    People with more specific or general queries can fill out the contact form although it’s a safe bet these contacts won’t be treated as a priority over the clear conversion goal Sleeknote is aiming for: bookings.
    Don’t be afraid to encourage specific actions on your contact pages and prioritise leads that bite.
    There’s one other conversion trick Sleekbot uses on its contact page – a chat widget that calls out to users and asks them if they have any questions. This means users don’t even need to fill out a form to put their questions across, which not only increases conversions but also limits the number of not-so-useful messages reaching Sleeknots email inbox


  • Testimonials are most powerful in context: On your homepage, About or Services page next to the claims you make about your offer. So, believable client testimonials are a must every time you make a claim about your service or product. Whether you also need a Testimonials page depends on your industry and your visitors’ expectations. If you already have a Testimonials page, look at your Google Analytics to see how many people are actually visiting it.
  • ZenDesk’s testimonial page is beautifully laid out AND functional, with a silent customer video playing on loop to serve as the banner, a menu to filter testimonials by location, company size, industry, and use case, and lastly thumbnails linking to the full customer stories for a variety of big-name brands. This is a clean and concise way to showcase their happy customers, and help prospects gain the assurance they need before investing.
  • While sometimes overlooked, FAQ pages are an important component of most customer support strategies and save time for both the customer and employee. Customers don't have to go through the trouble of contacting customer support to get answers to simple questions, and employees can offer standardised responses for recurring questions.
    Saves you time; Weeds out the clients who won’t be a good fit; Reassures your ideal clients that you are what they need; Can boost your SEO
  • Ask if they know what UX is…

    This is the definition of UX
  • Designing for accessibility is often seen by companies as a waste of money—the reason being the enduring misconception that people with disabilities make up a small segment of the population. In fact, 19% of working age people in the UK are disabled. That’s one in five people in the audience for your product who may not be able to use it if it’s not accessible—or 20% of your total market!

    FINDABLE: if you cannot find the content you want in a website, you’re going to stop browsing it. If you picked up a newspaper and all the stories within it were allocated page space at random, rather than being organized into sections such as Sport, Entertainment, Business, etc., you would probably find reading the newspaper a very frustrating experience. The same is true of hunting down LPs in a vintage music store—while some may find rifling through randomly stocked racks of assorted artists’ offerings part of the fun and ritual, many of us would rather scan through alphabetically arranged sections, buy what we want, get out and get on with our day. Time tends to be precious for most humans, thanks largely to a little factor called a ‘limited lifespan’. Findability is thus vital to the user experience of many products.

    Effective: e.g. payment options – can the user complete their goal?
    Efficient is all about speed
  • UX is an Iterative and non-linear process – based on Design thinking
    Design thinking revolves around a deep interest in developing an understanding of the people for whom we’re designing the products or services. It helps us observe and develop empathy with the target user. Design thinking helps us in the process of questioning: questioning the problem, questioning the assumptions, and questioning the implications. Design thinking is extremely useful in tackling problems that are ill defined or unknown, by re-framing the problem in human-centric ways, creating many ideas in brainstorming sessions, and adopting a hands-on approach in prototyping and testing. Design thinking also involves ongoing experimentation: sketching, prototyping, testing, and trying out concepts and ideas.
  • Another important benefit of wireframing is that it allows companies to forget about styles and colours so that they can focus on the essential elements of navigation and information. Creators can ask themselves what they want their users to do when they visit their website, and establish the information that needs to be provided to move the user along to the correct pages, and find the information they need.

    When a wireframe is created, designers and clients can see which page elements are more important than others, and the black-and-white or low fidelity nature of the frame allows each person to easily see how the information on each page falls neatly into place.

    As we mentioned above, wireframes have the unique ability to draw unparalleled attention to the basic structure and function of a website – the elements that will have an impact on user experience. Designers who skip the wireframing phase can easily get caught up in the elements of making a site look good, and forget about things much more important than design – such as usability, functionality and user experience.

    By eliminating imagery, colour, and other details, a designer is able to think more about the functionality of each element on a page, placing a strong focus on developing the best possible user experience.

    Wireframing helps you to determine which features are wanted on a website, and which elements are needed. In the early stages of development, clients and web designers can work together to try out different potential applications and tools that might offer better usability to their visitors, to aid conversions.
    Sometimes, you may choose to remove a feature once it has been wireframed because you can see that it simply doesn’t help towards the goals of your website. Seeing features without creative influence can help you to focus on clarifying which elements really matter.

    UX copywriting makes digital branded experiences more efficient, by helping readers navigate their way to their (or your) desired outcome. It’s UX design, but with words.

    Why UX writing?
    Users connect to the narrative/story; it’s like subtitles to a movie.
    It feels natural; it’s like a conversation you have with another person or a friend.
    Communicates your idea or message clearly.
    Builds your brand presence with the language you use.
    Minimise doubts in user’s mind while performing the task or experience your solution.
    Sets the tone of your brand.
    And most importantly, to make people smile.

  • Another important benefit of wireframing is that it allows companies to forget about styles and colours so that they can focus on the essential elements of navigation and information. Creators can ask themselves what they want their users to do when they visit their website, and establish the information that needs to be provided to move the user along to the correct pages, and find the information they need.

    When a wireframe is created, designers and clients can see which page elements are more important than others, and the black-and-white or low fidelity nature of the frame allows each person to easily see how the information on each page falls neatly into place.

    As we mentioned above, wireframes have the unique ability to draw unparalleled attention to the basic structure and function of a website – the elements that will have an impact on user experience. Designers who skip the wireframing phase can easily get caught up in the elements of making a site look good, and forget about things much more important than design – such as usability, functionality and user experience.

    By eliminating imagery, colour, and other details, a designer is able to think more about the functionality of each element on a page, placing a strong focus on developing the best possible user experience.

    Wireframing helps you to determine which features are wanted on a website, and which elements are needed. In the early stages of development, clients and web designers can work together to try out different potential applications and tools that might offer better usability to their visitors, to aid conversions.
    Sometimes, you may choose to remove a feature once it has been wireframed because you can see that it simply doesn’t help towards the goals of your website. Seeing features without creative influence can help you to focus on clarifying which elements really matter.

    UX copywriting makes digital branded experiences more efficient, by helping readers navigate their way to their (or your) desired outcome. It’s UX design, but with words.

    Why UX writing?
    Users connect to the narrative/story; it’s like subtitles to a movie.
    It feels natural; it’s like a conversation you have with another person or a friend.
    Communicates your idea or message clearly.
    Builds your brand presence with the language you use.
    Minimise doubts in user’s mind while performing the task or experience your solution.
    Sets the tone of your brand.
    And most importantly, to make people smile.

  • Metaphor usage to make complex content, simple to the user.
    It’s like explaining a concept to a child.
    When you talk about insurance or loans, there are lots of question bubbles one has. The heading ‘Forget everything you know about Insurance’, actually tells the user, not to believe the traditional way of claiming insurance, and pulls the user for more simple way of understanding and taking insurance.
    3 pointers for better consumption of data for the user.
  • A customer journey map outlines what your personas, leads, and customers will experience once they hit your site. How they interact with your brand from the first point of contact until the sale, and even after.
    Whether you sell product, software, service, or other offering, a customer journey map is an effective tool to understand how your leads interpret and interact with your website
    Mapping out your customer’s journey allows your organization to understand exactly how a person is feeling at each point of interaction with your brand; what key questions they may have (that perhaps you aren’t currently answering), and their specific needs at each stage of their journey.
    Using a customer journey map, your entire organization gains a better understanding of not only your customer, but how your website affects their decision making process.
  • Here are some ideas for to help you develop tasks:
    What the first thing my visitors want to find? This might be finding your opening hours or contact information. If a visitor can’t find this info quickly, they might “bounce” and leave your site.
    What’s the most important thing I want a visitor to do? For example, you might ask users to complete a purchase in your online shop. Or if it’s really important that visitors view your portfolio, design a task that asks them to find examples of your work.
    What does a visitor need to do to convert or “seal the deal”? – e.g. pay for an item or sign up for a newsletter. If a person gets stuck at these key moments, it doesn’t matter how nice your site looks—the website won’t do its job.
    Does your site work well on mobile? Ask people to perform basic tasks from their cell phones to make sure your site follows the best mobile website design practices.
    Also, remember not to give away clues in your tasks! If you give hints for the “right” way to do something, you won’t learn how people really use your website.
  • Hotjar is a powerful tool that reveals the online behaviour and voice of your users. By combining both Analysis and Feedback tools, Hotjar gives you the 'big picture' of how to improve your site's user experience and performance/conversion rates.
    Basic is free. Plus £35 pcm.
    Heatmaps visually represent where users click, move, and scroll on your site. See what gets peoples attention. What's ignored. Compare Desktop and mobile.
    Live playback of visitors using your site

×