Consulting Website Design Patterns

Here's a small overview of my current repertoire of design patterns for product or consulting websites. They are a bit more abstract than concrete implementations, and are goal-focused. Not just a bar with links, or a box with a button, but elements which are there to do their intended job.

Serving The Audience

This is not a pattern, but an important point of guidance for me. I want the products I create, and the sites I build to serve the people who visit them and help them be awesome.

I also want the sites to be respectful of the visitor's attention and original intent. This does not mean that education is off the table, but that I don't want to impose what I think might be "a better idea" on people who gift me their time and attention. At least not without agreeing on it first. Consent is essential for a respectful interaction.

The Patterns

Bottom CTA Box

At the end of the article, after the reader has gotten what they came for, is the classical box with a text which describes benefits for the visitor if they subscribe to a newsletter. Usually, the form is built-in.

CTA Button

Instead of adding a heavy-weight box with a form, you instead include an easily digestible buton, which triggers a modal to be createad. Can make the site feel lighter, and easier to read. Good for people who don't have much attention to spare, or prefer lightweight designs.

At the end of a site, there's a list of possibly interesting articles for the visitor, to continue reading. This works if they are in a reading-more context. (not looking to fix something and get on to their original goal)

Next article, previous article

Usually at the bottom of an article, similar to a related articles list, but limited to articles which are next in a series, or were written before/after the one the visitor is reading.

Like the previous entry, but not limited to arbitrary temporary ordering.

In-Line CTA Box

Usually slim and lightweight. A CTA which is barely one line, and does not distract from the reading experience. It appears before the reader forms an intent to leave the site, and might fit the context.

Instead of a subscription form, you offer more resources to the visitor, related to their general intent. This can be a link or a buton - "read the complete guide to X". Basically, this is related articles, but the list is longer and "hidden" on another site.

Can help visitors navigate to content which interests them. Instead of needing to organize knowledge in form of article lists (TODO: information design? information architecture?) you make it accessible interactively and on demand.

The only problem is, that it takes initiative and thinking to formulate a search query.

Requires interaction, and can be a source for content ideas from visitors, if the search queries are aggregated anonymously.

Visibly the next action to take for folks, which they can see when they first visit the site, and scroll up to after reading.

Also good for returning visitors.

A way to show visitors an overview of all available topics, if the link footer is large. Can invite to browse.

Can contain product promotions, CTA boxes or links. Often ignored in my ecperience.

Table of content

Useful for longer articles. Can make it easier to navigate to relevant parts of a big piece of content.

About Page

Useful to help people connect to the person behind the site, and establish a less anonymous connection. Usually features the person behind the business.

"Home" Page

An overview of the site for returning or interested visitors. Can be navigated to over a brand link or link footer/header.

"Note" boxes

Suggests useful reosurces, links or relevant things. Like info boxes in books, which are not part of the main text.

Resource Page

A link collection for interested readers. Can be a valuable entry in the header. Can invite to browse around, explore and turn up interest for the rest of the site. Curiosity for the topic in general and time is required.

Email Courses

A series of articles, not published on a page, guiding the initial visitor towards a learning goal. Good funnel towards the mailing list. A type of friend catcher, like cheatsheets, content upgrades

Landing Pages

No navigational elements. Only one action to take. Useful to funnel towards newsletter subscriptions, email course signups or product sales.

Long-form is popular right now. Can be short and sweet as well.

In-Text CTAs

Make sure to check out article X, or consider joining course Y. Less out-of-place compared to CTA boxes which stand out from the intent of reading an article.

Those CTAs should be absolutely in-sync with the intent of the person reading it.

Social Proof

Quotes from former clients, or engaged audience members. Can be good to spark interest and confidence around CTAs.

Can be presented as gallery, cards, carousel...

Tags / Categories

As words, icons or images related to the categories. Can invite the visitor to dig deeper into content about a relevant topic.

Topic Aggregation Sites

Articles related ot a certain category. See above.

Exit-intent Modals

Those damn things need to die die die. They appear when your mouse starts moving out of the window, and try to interrupt your intention.

Maybe efficient. Really annoying.

Social Cards

Constructed from site metadata, to make an article more shareable - a good description and well-formatted image can help.

Decorative Images

Often seen in the header and can be used for social sharing. Provide a little "wow" experience when opening the article.

Author Info

Can convey information about the person behind the writing. Can strengthen trust, provide credibility or establish a personal brand.

People love seeing faces! This can include the name at the top of the article, a short bio box at the bottom, author portraits.

Recency Information

A publishing date or "last reviewed" timestamp. Some people need to have them, some people leave them out by choice.

Microfeedback Widgets

Has this article helped you? Can be a yes or no, or a related question which can engage.

This is more often seen in FAQ help sections, or on news sites. Where people engage out of gratitude or for entertainment.

Can entail an automation, and a query for more detailed feedback. Or to start a conversation.

Chat Prompt

Can be used for support, or to engage qualified visitors in 1:1 conversation. Has been widely used, I find it plain distracting personally.

Chat bots come in play here, if you want to extra-annoy your visitors.

RSS feed

Another way for people to get updates, but this can not turn into a 1:1 communication channel as mailing lists/email can.

Latest articles

A recent-first feed of new articles, can be a good place for people to check out new stuff on a whim.

Social share icons

Can make the effort to share your site lower. A valid CTA.

Legalese

Privacy policy, imprint (in Germany), terms and conditions. Sometimes you need to put in disclaimers or legally required information.

Contact Us

Form or simple email link. If you want to give people an easy way to reach out. An intent has had to be formed.

Portfolio

A selection of past projects, achievements and customers. Kinda like social proof.

Case Studies

A mix of educational content and social proof.

Sub-titles

Can help to break up the page and make it more readable. Or rather, scannable.

Illustartions can help here too.

Products / Courses

A list of paid or commitment-requiring services and offers.

Comments

I hardly see these anymore. Sometimes it's a link to another community where a discussion is happening, or ready to happen.

Kinda legalese. People expect to see it, probably there's a US law reason for this.

More Information for CTA

can be relevant for a signup. Long-form letter from the person behind the project/site, adressing a not-yet convinced reader. Great thing

Embedded Videos

Of a presentation or event you did. Maybe of a personal address. Can be very engaging, and an unusual way to present information

Audio Version

Effective if you expect people to listen to your content instead of reading it. Fancy stuff.

Site Title / Brand

Can be relevant to site icon. Usually in upper left corner, for people to click to get to the homepage and identify what size they are on.

Not to be confused with the title of the browser window?

Attributions and Acknowledgement

A nice way to say thanks to people who helped shape a piece of content.

"Bye" fron author

Can put a personal note on a site's content.

Podcasts

Can be part of a multi-channel marketing strategy. Maybe YouTube or other content on an established platform. Not strictly part of your site, but related to it.

Can warrant a podcast page.