How to create a website that serves your business goals
What makes a website good? It’s not a pretty design or fancy words, although they play an important role. A good website solves the client’s problem quick and easy. That’s what you have to focus on. In this guide, we’ll go over the best approach and learn how you can make your website great!
To actually see how a website looks, we use an in-house developed wireframe template to physically lay out the website! It’s fun and quite cool to do, so we decided to share it with you!
Download it here
But to solve a client’s problem, you first have to know what it is. You got it figured out already? Think again. Do you know what they just told you or did you dig deep and understand their unarticulated needs and desires? Apple saw the potential of a deep analysis early on. Nobody knew they needed an iPod before Apple told them they did and made the iPod become the most sold digital music player in history
There is a particularly powerful method you can use called Design Thinking.
Design Thinking, described in the first part of this guide, will help discover the unarticulated needs of your customers and convert them into a viable solution.
When then implementing this solution you have to consider two different aspects. The first and more important one is your client. Also, you have to consider what’s best for your business in terms of cost and time consumption.
After the Design Thinking phase, we will focus on each side and find the best possible implementation strategy.
Design Thinking
You may have heard the term once, twice or a million times before, but what is this mythical process the whole business world is talking about? The descriptions on the internet are vague and the term itself somewhat confusing.
Let’s clear things up: Design Thinking is a human-centered framework to identify a need and create a solution for it.
With the power of Design Thinking you’ll go from guessing the problem to a beloved product or service in five steps:
- Empathize
Talk to people. Take the time to ask your customers what they like and what they hate about your product. Ask what they truly want to achieve with your help. A practical example: An old lady might be out to buy a new walking cane. Her desire isn’t the cane itself, but the ability to leave the house and visit her family whenever she pleases. She’s not alone, all her friends want the same thing: Communicating with their loved ones. - Define
Write the essence of their desire as a Statement: “I want…”
- Ideate
Sit together with your team. All of them: Designers, developers, C-level, and interns. Brainstorm like a hurricane and come up with as many different solutions as possible. No matter how ridiculous they are, write them down.
Now you need to evaluate which ideas have potential. Also, have a good laugh together about the absurd ones. - Prototype
Create an MVP (minimum viable product) of the most promising idea – or ideas. Don’t create a full-fledged solution yet. More often than not you’ll need to go back to ideate and work out different angles. - Test
Test on a small group of your customers. According to the feedback you receive you have to fine-tune or go back to ideate once again.
True change is an art and a long process. Don’t expect the first thing to be the holy grail.
Implementation
Step one was fun and eye-opening and now you’re ready to implement.
Primary focus: The user
A good website solves the client’s problem quick and easy. To do that, you have to guide her to her goal without giving any distractions. Take a human-centered approach to build a website:
A good website solves the client’s problem quick and easy. To do that, you have to guide her to her goal without giving any distractions. Take a human-centered approach to build a website:
Above the fold
The very first thing visitors see when the page is done loading is the area called “above the fold”. After the user reads the headline and introductory sentence, she should exactly know who you are, what you do and most importantly WHY you do it. Emphasize your statement with a strong visual background.
The pages
Let’s kiss – but not like lovers. Kiss is an acronym for “Keep It Small and Simple”. Make it as easy as possible for the user to find what matters. Don’t clutter your pages with useless information and uninteresting facts.
Header
The first and most obvious element to guide the user is the navigation bar in the header at the top of every website. Here you list the different pages of your entire website and provide the user with a search function.
Footer
The big bar all the way at the bottom of a website is called “footer”. There are some best practice rules to follow. For example, almost every website has the contact information, copyright stamp and headquarter address in this footer. These elements have established over the years and developed to an expectancy of the user. If it’s not there, it’s confusing.
Take a look at how your competition handles their footer and what information they include. This serves as a general baseline for you to improve on.
CTA
This is your most powerful guiding tool! Short for “Call to Action”, a CTA tells the visitor how he should interact with a website. A CTA can be a button saying “Press here to learn more”, an icon with a symbol of a telephone or a chatbot that asks the user to chat.
Use them often and place them smartly. Your website visitors will be grateful and so will be your sales numbers. With powerful CTAs, it’s easy to lead the user wherever you want her to go.
Wireframing
To prototype a website, we use a method called wireframing. We take our template of pre-created website parts, so-called modules, print them out and arrange them physically on a table to see if the user will be guided well.
To help you design your own website, we decided to publish our wireframe template! You’ll find the download link at the end of this guide, but don’t skip ahead (it’s not a limited time offer?)!
Secondary focus: the company
What approach you take and what technology you use play a major role in production cost and time. There is the dumb way, where you create each page individually like 15 years ago, and there is the smart way: Responsive web design and modules.
Responsive web design
A website has to be different on a phone than on a tablet or a computer. Luckily you don’t have to create a whole new version for every screen size like you’d have had to 10 years ago. Today we make use of a technique called “responsive web design”. We create websites that naturally adapt to screen sizes, browsers, and devices using a predefined grid.
You code your website once and technology does the rest. This approach predefines that you structure your content in a clever way using modules.
Long live modules!
When the internet first became a thing, everything seemed possible. Every website had a unique and extremely creative design. This sounds great but comes at a cost. It was very confusing for the user to find what she was looking for since all pages had a different structure. For the business, it was extremely expensive, as they’d have to rush to their web development agency for every new page and feature on the website.
In response to these problems, Content Management Systems began spreading rapidly. These CMS enabled the businesses to choose from existing templates, coded by web experts, for whatever type of page they want and upload them directly. Now they didn’t need to go to the web agency for every new page, but in exchange, they had to use a standardized design. Creativity was sacrificed for efficiency.
We blend together the best of both worlds and chant: “Pages are dead, templates are dead, long live modules!”
Imagine modules as building blocks – like lego. There are blocks for images, for a short paragraph, a three column text, a four column text, one for the navigation bar, and so on and on and on. The possibilities for these building blocks are endless! Place them as often as you’d like anywhere on your page to create a unique website, responsive to all screen sizes.
Now it’s your turn. Download the free wireframing template, print it out and prototype your module-based website!
Wireframe Template