An in-depth look at the anatomy of the perfect website
Most small business websites stink. Don’t believe me? Visit your local ice cream shop’s website. Does it look like they hired their 13-year-old niece to build it?
Exactly.
Whether you own a physical mom-and-pop shop or an online coaching business, it’s important to have a website. However, it’s even more important that your website is more than a fancy business card.
Your website is a business tool. If it’s not generating revenue or bringing in customers then it’s just taking up space.
Why are websites so bad? I have a hunch.
The majority of web designers are freelancers, which means they are paid to keep their clients happy.
When a business owner comes to them asking to build a website, it’s usually the business owner who lays out what they want. A big photo of them here, a bio there, a few cool buttons, and a contact form.
Before long, a hot mess of a website is born.
I’m not saying all web designers are bad, I’m saying business owners think they know what they want. They design a website from their point of view, not the visitor.
Which brings me to this article. The purpose of any business website is to:
Prove you can solve your visitors’ unique pain points
Ah yes, the old PYCSYVUPP acronym. Before setting out to build a website, ask yourself, “Why would somebody come to my site? What are they really looking for?”
They aren’t looking for a biography about your life. They aren’t looking for a 1997 “Contact Me” box. They aren’t looking for jargon or text blocks the size of Madison Square Garden.
They are there because they have a unique pain point, and it’s your job to prove you are the one to solve it.
In this article, we will cover the four main jobs of your website and how to practically implement some of the suggestions.
I’ve designed over 30 sites for dozens of clients that have brought in over $100,000 over the past 10 years. However, I’ve written this article for those without web design experience. I’ll keep jargon to a minimum and I promise you won’t see one line of code.
When we’re finished, you’ll be equipped with simple theories you can apply to your website yourself (or ask your 13-year-old niece to do it for you).
What do customers want?
Your website is not a fancy business card. If a customer wants to contact you, a quick Google search will do the job.
Your website is also not a storefront. Even if you operate an online business the first thing visitors see when they land on your site should not be dollar signs. Save those for later.
Instead, your website has four specific jobs:
- Show who you are and what you do
- Help visitors self-identify their pain points
- Give visitors quick wins over their pain points
- Offer higher-valued information/products/services (only after the first 3 jobs are met)
Let’s look at these one by one, shall we?
1. Clearly show who you are and what you do
Without writing a thesis or resorting to jargon, in one sentence can you describe what you do? It doesn’t have to sound fancy, it just needs to be clear.
A quick trick is to ask your customers or clients to describe what you do. They are the ones who’ve paid you to help solve their pain points so why not go directly to the source.
Keep it short and simple.
“Creating your own online course doesn’t have to be hard”
“I help you beat writer’s block…and write with intent.”
“Traditional Ice Cream at its Best”
These are all real examples from real businesses. We’ll even take a look at the second one in the case study at the end of this article.
For now, note how clean and simple each one of them is. One is a website to help online course creators, the other helps people struggling with writer’s block, and the third is an old time-y ice cream shop. (I like ice cream if you haven’t noticed.)
Don’t overthink it, but do spend some time crafting your one line. Place this text up high in your “above the fold” section of your site (more on that in the “Practical takeaways” section).
2. Help visitors self-identify their pain points
Don’t humor your visitors by pretending to understand their woes. Let them self-identify their pain points.
Your website doesn’t have to mimic a Seen on TV ad, it just needs to layout your area of expertise. Find a way to tell your story that speaks directly to your ideal customer.
I’ll use my own website as an example:
I include a short bio, but I kept it whimsy and lighthearted. Why? Because I only want to appeal to potential clients who are whimsy and lighthearted but also struggling creatively.
If Joe Schmuck reads this bio and doesn’t like my style or isn’t interested in being creative, he can see himself out. It saves me from dealing with Mr. Schmuck who doesn’t have a sense of humor.
However, if someone comes along and enjoys this tidbit about me and thinks “Hey, I kind of like this guy. And yes, I am struggling to make my stuff,” then my website has done its job.
3. Give visitors quick wins over their pain points
The next job of your website should be to quickly give your visitors the option of exchanging their email address for a quick win.
For folks in the online business space, you know this is as a freebie, a pdf or short eBook that you send to someone when they sign up for your mailing list.
For folks in brick and mortar businesses, this job still applies. It applies even more so because so few brick and mortar businesses take advantage of their website’s potential.
Yes, your customers might be looking for your location or figure out what hours they are open, but is there something else they want? Imagine being an ice cream shop and exchanging a free ice cream cone for their email address. It gets customers into your shop and a reason to contact them later.
And here’s another trick I’ve picked up. Offer three quick wins. If you only offer one, you end up segmenting your visitors into one of two groups: One who is interested in your quick win, and 98% of everyone else who isn’t.
With three quick wins, you give visitors the option of properly segmenting themselves. It is also a subtle way to signal your areas of expertise.
I’ll use my personal site as an example again:
I help people build better websites, better careers, and better creative lives. Simple. Straight-forward.
4. Offer higher-valued information/products/services (only after the first 3 jobs are met)
This isn’t so much a job of your website, but something to keep in mind (especially those with online businesses):
If the first thing visitors see when they land on your website is dollar signs, you’ll lose them.
Your website should earn their trust, it should communicate your expertise, it should fit your style, and it should guide visitors along a path.
It is not a billboard.
Therefore, tuck away your high valued products and services in another part of your site.
The goal is for visitors, the right visitors, to take the first step. Once they’ve done that then you can initiate the sales process.
Practical Takeaways
Now that you have an idea of the jobs your website has, let’s look at some practical applications.
If you aren’t web design savvy, that’s okay. My goal is to break down some design elements so that you can communicate to your web designer what you want (or at least make sure they are doing a good job).
Or if you use a drag-and-drop website builder, you’ll at least come away with some new ideas.
1. Take advantage of your “above the fold” space
This is the first thing people see when they land on your website.
It’s the most important space because this is where you quickly communicate within the first few seconds who you are and what you do. Remember Job #1 above? This is where it happens.
You never want to crowd this space with too much text or too many buttons. Keep it simple.
Remember that whatever you have on your desktop version responds well to a mobile version. In other words, what you see on the desktop isn’t going to look the same on mobile. But the concept still remains: keep it simple.
2. Don’t neglect the top right corner
This one applies more for desktop versions instead of mobile.
At the top of your site is typically a menu of pages visitors can click on. Reserve the top right corner to be the main action you want your visitors to take. I call this place the postage stamp.
For example, on my site, I have “Work with me” in the top right corner. I don’t expect people to always click it, but it’s a subtle way to communicate why I have a website: to get people to work with me.
Use this space that directs visitors to take a simple action. For example:
- Sign Up
- Download my eBook
- Take the course
- Join the club
Don’t neglect this valuable space.
3. Do not add “contact me” boxes unless you love spam
This might just be a personal preference of mine, but don’t put contact boxes on your homepage unless you really love spam.
Instead, you can add a “Contact Me” button (or “Connect with me”) discreetly towards the bottom of your homepage.
Have this button direct visitors to another page that contains your social media links, your email address, and then a contact form.
4. Less text better
Less text is always better.
Include a lot of white space.
If you want to go more in-depth, link to an About page.
5. When in doubt follow Dieter Rams’ 10 design principles
I apply Dieter Rams’ 10 principles for good design any time I build a new website for a client.
Yes, he originated his 10 principles for physical products back in the 60s, but they still apply here.
- Good design is innovative
- Good design makes a product useful
- Good design is aesthetic
- Good design makes a product understandable
- Good design is unobtrusive
- Good design is honest
- Good design is long-lasting
- Good design is thorough down to the last detail
- Good design is environmentally-friendly
- Good design is as little design as possible
Number 9 doesn’t quite apply to web design but it’s still good to keep in mind.
A case study in effective web design
I’ve referenced my own personal site for examples above, but here we will look at another site as a case study.
Marion Roach Smith is a well-known memoir writer and writing coach. Her website marionroach.com exemplifies the concepts we’ve covered so far.
For simplicity’s sake, we will only review her desktop version.
I should disclose that Marion has been a client of mine in the past, however, the website we will review was not built by me. I’ve built other websites for her business.
Let’s begin with the above the fold section:
It’s a good start. Although her menu needs cleaning up (she isn’t taking advantage of the top right corner) it’s clear who she is and what she does:
“As a memoir coach, I help you beat writer’s block…and write with intent.”
Simple and straight forward. By now a visitor is able to answer two questions:
- Am I looking for a memoir coach?
- Is my main pain point writer’s block?
If they answer yes to both questions, the visitor’s next question is: How can Marion help me?
Marion answers that question in the section below by introducing her “Memoir Project”:
It still doesn’t answer how she can help, but it brands her approach. What does she offer? A portal that’ll hold all the tools a struggling memoir writer needs to overcome writer’s block. What tools specifically? Let’s look at the next section.
Here the visitor has an array of options to choose how they want to overcome their pain point. However, Marion structures them in such a way to give the visitor a pathway to move forward:
- A newsletter with free advice about memoir writing
- A book that outlines Marion’s writing system
- An online course that goes more in-depth into her system plus a webinar
- An advanced online workshop that covers more nuanced topics
- One-on-one coaching to work directly with Marion
Although we don’t see any dollar signs in this section, the pathway is obviously ordered from lowest to highest priced solutions (from a free newsletter to coaching which costs a few grand).
At this point the visitor will answer a few more questions:
- How much am I willing to pay to overcome this pain point?
- How committed am I to overcoming this pain point?
I don’t know exact numbers, but I’m assuming visitors who are experiencing writer’s block begin with the free newsletter. It’s no cost to them and low risk. Other visitors who’ve been struggling for some time and want to finally finish their memoir might jump right to the book or online course.
If visitors still aren’t convinced of Marion’s expertise, or if they are only perusing her site, she smartly includes her best free articles to teach visitors on a variety of writing topics.
Quick case study recap
Marion does a lot of things well with her website:
- Quickly and clearly communicates who she is and what she does: memoir coach helping writers struggling with writer’s block
- Offers a branded five-step pathway that has visitors put a price on their pain point
- Summarizes her expertise with carefully chosen articles
- Simple design with not too much text and a lot of white space
But Marion can still improve a few more things:
- Clean up the menu and include a clear call to action in the top right corner
- Include one photo of herself, possibly in the above the fold section to the right
- Redirect visitors who choose the sixth option “Show me how the entire system works” to a more in-depth review (currently it redirects to a page with the same list of options)
Overall, Marion’s website works. It’s a tool for her business that converts visitors into customers and some customers into clients. It’s not a fancy business card and it doesn’t have a “Contact Me” form.
It’s clean, it’s simple, and it does its job.
Now go make small business websites great again
Most small business websites stink, but they don’t have to. Like Mad Men’s Joan Holloway tells the new girl in the office, Peggy Olsen:
Go home, take a paper bag, and cut some eye holes out of it. Put it over your head, get undressed, and look at yourself in the mirror. Really evaluate where your strengths and weaknesses are. And be honest.
It’s harsh feedback, even for 1960 standards, but the underlying helpfulness holds true here. Take a look at your website from a visitor’s point of view. Evaluate your strengths and weaknesses, and be honest.
If you aren’t technically savvy to implement any of the suggestions we reviewed, ask a web designer to help. Only this time around you’ll be more equipped to know what to ask for.
