Last Updated on August 7, 2019 by Micha McLain
Let’s go ahead and just cut to the chase. When approaching how to build a website, the number one thing your website needs to do is deliver clear and basic information to the user. Period.
As easy as that sounds, it’s actually quite surprising how many business websites do not do this. Lots of websites seem to over-explain, give way too many options, have no clear direction, and are just plain obnoxious to use. You end up leaving more confused than you were before your visit and potentially move onto a competitor that does a better job meeting your needs.
Information In Excess
If you haven’t noticed before, just think about how quickly you absorb information. At this point in our tech history, we are constantly being bombarded with data and information. Everything from television to radio, social media (and ads therein) and youtube, and even the billboards that line the motorway. It is our natural response to somewhat go numb and only quickly scan for information we need.
So what am I getting at, you ask? Well you’re obviously here because you recognize the importance of your online presence! Congratulations on making it that far! Lucky for you, in this post I’ll outline the essentials needed to yield a high performing website that will drive traffic and grow your business online.
What We’ll Cover:
Introducing Growth Driven Website Design
- Overview and general explanation.
The Essentials
- Design
- Usability
- Optimization
- Content
Growth Driven Website Checklist
- Planning and Setup
- Content and SEO
- Front and Back-End Development
So what exactly makes a high performing website?
Take a moment and think about some big, high profile companies that rely on their websites for sales. Pick one out and analyze it and just try and recognize what makes it so great to use.
One of my favorite sites to showcase as an example of this would be Tesla Motors. Consider how nearly 80% of their Model 3 sales were online. This would have been impossible if the user experience left a lot to be desired.
I know this may be a crazy example since these guys are basically putting together a paradigm shift in the auto industry, but I think it’s a very powerful example of relying on your website design and user experience for business success.
Remember: Always deliver clear and basic information as quickly and efficiently as possible.
This is the bottom line. Easier said than done, right? Yeah – absolutely. Delivering this message involves clean and responsive design, concise MDAs (most desired actions), social proof, and of course SEO just to name a few.
Your website experience should be fun, intriguing, educational, and perhaps even emotional.
It’s essential to revisit your business’ value and core message.
Before we can get into any sort of step-by-step, what-you-need-to-do type of thing, it’s always worth the time for any business owner to re-analyze their business’ core message as well as their product or service’s value.
One of the biggest hurdles for any small business is really honing into that core message. What do you do? How do you do it? Why are you better than the other guys? Why is your product best? What really sets you apart? Why are YOU the king of the hill?!
If you’re able to answer that question as quickly and efficiently as possible then you’re already ahead of the game.
Growth Driven Website Essentials
Now that you have re-analyzed your business and have yourself a clear, distinctive message to your clients, we can start getting into the fun website stuff.
For as long as I have been building user experiences and websites for all types, it has boiled down to four very important essentials, no matter the project.
1. Website Design: Keep it beautiful, clean, and modern.
When I say “modern”, I mean what’s currently trending design-wise alongside what statistically shows keeps your users on your website longer. Here I’ll outline some of the most important bits that need to be done right in order not to scare away your potential customers. This includes everything from your logo design, overall branding, and making sure you gracefully fit on any screen size.
Your logo. Does it make the cut?
Your logo is hands down one of the most important parts of your business – online or offline. Your logo should be memorable, uncluttered, versatile… and simple. Brand recognition by logo alone is difficult to achieve but not impossible. Think about massive brands such as Nike or Apple. See how simple and memorable they are? Take notes.
Clean fonts only. No Comic Sans, please.
Fonts should be as simple and non-offensive to the eyes as possible. A classic violator of this simple rule would be Comic Sans, which in my opinion is the AMC Gremlin of the font world.
Joking aside, the cleanest and less obtrusive font designs have longer readability and less stress to the eyes. Choose only two fonts for your website max. I tend to use one style for headers and another style for the body.
Your color palette speaks louder than words.
Colors speak louder than words and play a psychological role on how we perceive companies and their products. Our first impressions of any company or product are heavily influenced by their colors. If you want to do this right and gain a bit more insight, check out our color psychology tips to ensure you don’t leave anyone grossed out by your palette choices.
A clear call to action (CTA).
Clear CTAs are what each and every page of your website need. Clear CTAs across the board involve three things:
- Big, high quality images that relate to your product or service.
- Clear messaging on what the page is about.
- A button to link to your most desired action (MDA).
Responsive, mobile first design.
This almost goes without saying in 2019, but for some corners of the internet, this is still uncharted territory. I personally design my work mobile first since a very large majority of the users will be on their mobile devices. If your current design is not mobile friendly, prepare to fail. It’s that simple.
2. Usability
Usability is simply everything that comes together for a clean and beautiful user experience.
Keep the navigation simple and uncluttered.
This is one thing that is often overlooked. What we want to do is give our visitors the least amount of choices possible, and within the main navigation this is most important.
And sure, dropdown menus can be cool looking, but they should not be used unless absolutely necessary. Oh, and one more thing – keep the links short and relevant. No more than one word if you can help it.
A navigation menu can also contain a CTA.
Think about the main purpose of your site. If you’re trying to collect donations or guide people to shop at your store, you would need to make these links on the navigation stand out in the form of buttons. This will help guide the user’s eyes and notice those links more than the least important ones.
Clear defined MDA (Most Desired Action).
This holds hands with the previous bullet point. A lot of the time you have one or two main objectives on the site. If your main purpose is to collect donations and offer support, you want two very clear pathways for your users to take.
Within the navigation, this can be done by styling two buttons to capture the user’s eyes. The ‘donations’ link could be green for example (color psychology here), and the ‘support’ link could be a different color. This differentiates the two but keeps them at the forefront.
3. Optimizations
Fast hosting is worth the investment.
Whatever you do, run far away from shared hosting. Run far, far away. To put it simply, shared hosting puts you on a server with thousands of other people. If you’re hosting your website in one of these messy servers, it’ll take significantly longer for your site to resolve for your users.
That’s precious seconds going to waste! Instead, go with a dedicated server solution like Digital Ocean or Cloudways.
At MVMG, we also offer managed web hosting and maintenance.
Use a Content Management System (CMS).
There are still web developers our there who are absolutely against using a CMS. They feel like these platforms discount their skillsets and they should be able to build everything front-to-back. When it comes to modern development, it’s foolish to not go with the appropriate CMS for your project and do your custom builds within. If your developer suggests otherwise, run far away from that problem, too.
Compress your images.
Since we can all agree that more pretty things to look at on your site is important, we must make sure they’re also optimized properly. Instead of uploading your images to your media pool straight from the camera as this will be detrimental for loading speed, it’s advised you edit and compress these images using something like Photoshop or GIMP beforehand.
You can also use online tools such as TinyPNG to do a quick job. Generally around 300kb per image is ideal, so stick as close to that size as possible while keeping the resolution and quality as high as possible.
SSL certificates must be used.
These certificates are installed on the server-side which encrypt user data and keep it safe from any hackers or code injection. One thing to mention is try to never pay for this service if you can help it. Providers like GoDaddy love to charge up to $300/year for this, but there are so many better alternatives out there.
Again, Digital Ocean or Cloudways provide Let’s Encrypt which is a free SSL solution that is effortless to use and just as good as the paid ones. When shopping for a host for your website, be sure they support Let’s Encrypt. It’ll keep some cash in your pockets!
Site-wide Search Engine Optimization (SEO).
Now it’s time to make the internet search engines happy. Site wide SEO includes tweaking the following:
- Declaring a sitemap, index, and follow/no follow. If you’re using a CMS, there are plugins and extensions that do this. My favorite to use with Wordpress would be Yoast SEO. This plugin does the heavy lifting so you only have to worry about the tweaking.
- Internal Linking. Link pages to other relevant pages and blog posts to other relevant blog posts. Build that spider web!
- Add social share buttons to allow your users to share to social networks easily.
4. Content
Content is the name of the game here. If you can create high quality content on a regular basis that your users will be coming back to satiate their needs, you have it in the bag, my friend.
Your users will become regulars, will link back to your pages and articles, and you will eventually become an authority. Once you establish an authority in your niche, this is when you win the internet (and search algorithms). Here’s what good content involves:
Clear CTAs on All Pages.
Remember the CTA conversation we had above? Well, this is important across the board. Not just on pages, but also blog posts! Just make sure your call-to-action makes sense and grabs your user’s attention.
Social Proof.
Sometimes, you have to prove you’re worthy. Get some testimonials to showcase, show off some previous client work, show a case study, etc. The proof is in the pudding! Show those numbers!
Video and Images.
Remember, people don’t like reading – they scan and look for quick, easy to digest stuff. Images should be big, high quality, and relevant. Video, I would argue, is even more important. If you can help it, have a high quality video for each page showcasing your message. This is also a great way to show off some personality and build a relationship with your users. Don’t overlook it!
Well-Optimized Content.
Don’t forget, we have to be easy on the eyes with our text. One way to do this is to include a lot of whitespace. Break those walls of text up a bit so each section is more digestible.
Use headings appropriately, use bold and italics when necessary, and be sure to use proper keywords! Don’t just ramble, but actually use the keywords on your pages that you want your users to be searching for.
Growth Driven Website Checklist
Planning and Setup
Gather and organize your assets.
- Gather and organize the images you want to use on your website. Make sure these are not low quality.
- If you have video, be sure to make note of which videos you want to use.
- Any copywriting should be organized in a document with clear indication of what its use.
Analyze your local competitors.
- Research your closest competitors locally and review their online presence. Visit their websites and see what they are doing right and what they are doing wrong. Make note of these strengths and weaknesses and see how you can do it better.
- Make note of what you like and dislike about their websites or how they’re delivering their core message.
Create your updated sitemap.
- Create or update your sitemap to a cleaner, simpler version.
- If coming from an older site with messier sitemap, make note of any pages no longer being used and any redirections that need to be later put into place.
Build a wireframe mockup.
- Create a simple mockup of your new design using a program such as Adobe XD.
- During the mock-up build, use only placeholder images and text so you can focus on the layout rather than the detailed content.
Content and SEO
Develop the written content for each page.
- If you have existing copy you plan to use from the old page, this is the time to revisit and revise! Freshen anything up so it’s more up to date.
- Since you probably have fresh and new pages happening, develop the new content for those as well. But keep a consistent voice!
Photo and video content.
- Photographs should be compressed either within Photoshop or a free online tool such as TinyPNG.
- Video should never be hosted on your server (video is quite a hog and will slow down the page load) and is best hosted on platforms such as YouTube or Vimeo. If you don’t have accounts for hosting video, set one up and upload away!
SEO Optimizations
- Optimize your URLs by removing/not using stop words. Examples of these are ‘a’, ‘and’, and ‘the’.
- Optimize your pages and posts for search engines. If using a CMS such as Wordpress, the Yoast SEO plugin enables a snippet area on the back-end of the page which allows you to quickly and easily preview and modify.
- When modifying page titles, put your focus keywords at the beginning and keep your brand at the end.
- When modifying page or post descriptions, try to write an informative, yet compelling description that fits within the character limit.
- Optimize your images so search engines and people with disabilities can know what they are.
- Make sure the image filenames themselves are descriptive. No ‘IMG59689384.jpeg’ please.
- Always use alt tags which is also a descriptor of the image itself.
- Optimize your content hierarchy. In other words, use your headings properly. Heading titles range from H1 – H6. Here is an example of how these are used:
- H1: Page title.
- H2: Sub sections of H1.
- H3 – H6: Sub categories of each section.
- Use a caching engine. Some pretty great ones would be W3 Total Cache used in Wordpress or Varnish/Breeze in Cloudways.
Front and Back-End Development
Choose Your CMS
- There are lots of CMS platforms out there (our favorite is Wordpress) to choose from. If you’re still unsure of what fits your needs, check out our comparison of the big boys.
Front and Back-end Development
- Choose your base theme or framework to start building.
- Use clean code and stick to modern standards. Be sure to comment appropriately!
Plugin Development
- If your CMS uses plugins or extensions and you’re needing a custom developed plugin
Testing and Launch
Thoroughly test site from top to bottom.
- Check for broken links
- Check all pages are loading properly
- Check for all images loading properly
- Check for general errors and if anything is missing.
Bug fixes (because you definitely found some).
If after thoroughly testing your site from the inside-out you’ve discovered a few bugs, now is the time to fix them. Usually these bugs will exist between device screen sizes when it comes to styling.
Time to go live!
- Configure the domain mapping within the CMS platform.
- Configure your DNS to point to the server and new website.
- Install the SSL certificate for the new website. Along with this could potentially be some ‘mixed content errors’. This is easily solved with a find/replace of the staging domain to the actual domain.
- Visit here to ensure your DNS has propagated across the internet!
- Run a speed test to compare your new site speed numbers with the old by going here.
- Celebrate! You have reached the end (for now)!
Final Thoughts
So there you have it. It’s a lot to drink in, I know. But if you follow these steps closely, and refine your approach, in time you’ll have a foundation for an awesome, growth-driven website for your business.
We believe in our process, but if you want to catapult your results and have a secure, powerful website that you won’t have to worry about or spend time building on your own, give us a call.
At Multiverse Media Group, we build and maintain beautiful websites everyday that help our clients grow. Our full time job is working at a marketing agency developing web experiences that only use modern strategies and techniques to better position our clients for the future. We know how confusing and frustrating it can be for any business to navigate a competitive digital landscape.
The websites we design lead to more conversions. Not only will you rank better than your competition, but you’ll have the opportunity to gain more leads, which means better growth for you and your business over time. Check out our extensive project portfolio.
Reach out to us today and get started with your new website. Whether you’re starting from scratch or just looking for a redesign, we’re here to help.