How to design websites for businesses.
About the business
Usually, you would make a briefing about the business that the website is for. This briefing is used to get to know the business better and design the website accordingly. For the sake of this guide, I won’t be including this briefing, because we’re designing a website for an imaginary business. From the introduction, it is already known that the business in question is one that sells a variety of fitness products, so let’s focus on that.
Define the goals of the website
The first step is to define the goals of the website. These are often tied to the goals of the business. Let’s say that the first goal is to sell more products. We have to remember this, so write it down or save it somewhere. It’s important that we save the information we come up with, because this information is needed in the actual design process. Not only does the business want to sell more products, it also wants to create a loyal following, a community, by activating users to sign up for membership with exclusive content.
Define the customers
Who are the customers? This is one of the most, if not the most important question in the whole process. Everything on the website should be targeted towards those people. The easiest way to have a clean overview of the customers is by making a so-called user profile. It’s the profile of the ideal customer that the business would like to attract. We’ll make a profile of an imaginary person. This profile will include the name, age, job, location, hobbies, goals and more. The more detailed the profile is, the better we can adjust the design to target the right customers. Let’s set up our user profile. We want to attract customers who like being fit and healthy, obviously, so what would the basic information (name, age, job, etc.) of a person with this interest be?
- Name: Melany de Bruin
- Age: 25
- Gender: Female
- Occupation: Junior Business Analyst
- Location: Amsterdam, Netherlands
- Education: Business Analytics
- Income: € 32.000 / year
- Relationship: Single
- Favourite brands: WWF, mindbodygreen, The North Face
Now, let’s write down the goals and worries of Melany.
- Wants to visit the savannas of Kenya someday.
- Wants to find a partner who she can share her love for health and nature with.
- Concerned that she isn’t working hard enough on her health.
- Concerned that the stressful environment at her job will be bad for her in the long run.
We now have enough information to set up a basic biography:
Melany loves doing what she does at her job. She loves the people she works with, but she thinks they can be too hectic sometimes. The office is busy, so she wants to use her free time to relax and work on her body. She believes that being healthy is important, especially in stressful environments. That's why she has joined a fitness club that she attends 3 times a week.
She also loves nature. She goes hiking with friends in summers and watches National Geographic at home. Melany is also active on dating apps to find a partner who she can share her hobbies with.
It should be clear now that the business is primarily trying to target people in their twenties that are considerate about their health and about nature. Take all of this information, organize it and save it. A good place that I use to keep everything organized is Milanote. It’s an easy tool that allows dragging and dropping images, text, lists etc. If done correctly, it should look something like this:
Create a mood board
To make it easier for customers like Melany to take action, to buy a product, to become loyal to the brand, we have to make sure that they feel associated with the brand and website. This is done by creating a mood board. It’s a collection of pictures, words and colors that give you a certain mood. Keep in mind that the pictures, words or colors on the mood board don’t necessarily have to be used on the website. It’s simply a collection to determine the style and feel of the website. First, we start off with writing down a few words that are associated with people like Melany:
We take these words and find material that is associated with these words, then organize it and save it. Again, Milanote is a good tool for this. I came up with this mood board:
Remember that it is recommended to make around 2 to 3 different mood boards to choose between. Usually those mood boards would be categorized. For example, one mood board would contain material about health and fitness and the other about nature. For the purpose of this article, there will be only one mood board containing a combination of both.
Build a sitemap
Now that we have enough information about the goals, customers and feel of the business, it’s time to move on to the design process. We start off by building a sitemap. A sitemap is an overview of the pages on a website and how they are linked to each other. Important to remember is that the flow of navigation on a website should be as intuitive as possible. Don’t create too many pages with too much information. Show what is needed to make people attached and nothing more. Earlier in this article, I mentioned that we are only going to design the homepage. This is still true, but there will be links on the homepage and navigation bar linking to other pages and we need to determine what kind of pages these will be. To determine which pages the website needs to have, let’s take the goals of the website: sell more drinks and create a loyal following. To sell drinks, we obviously need a page where people can view the products. For the goal of creating a loyal following, we’ll add a page where people can become a member of the community. It could be a subscription where drinks are delivered to you on a weekly basis. This makes it easier for customers to stick to this particular brand. We also want to have a page where people can learn about the mission of the business and a page to contact the business. There are a lot of tools online for creating sitemaps, but my favourite is GlooMaps. It’s quick and simple to use. The sitemap could look something like this:
This sitemap allows people to quickly navigate to the information that they need. The blue rectangles indicate pages and the white rectangles indicate sections on a page.
Create a wireframe
The next thing to do is to create a so-called wireframe. It serves as the skeleton of the website, the layout. A wireframe doesn’t contain any content other than simple colors like black and white, sample text and figures that indicate media elements. It’s important that we start off with this wireframe, because it exposes the website’s usability, clarifies the features of the website and ensures that the structure of the pages are logical. It’s useful to write down the features that the page you’re creating must contain. Let’s do this for the homepage we are creating:
- We want to have a welcoming message for people when they land on the page.
- There should be a call to action that encourages people to browse through the variety of drinks.
- A section on the mission of the business would be a good way to introduce people to the brand.
- A short display of popular drinks might encourage viewers to read more about the drinks.
- Testimonials are always a great way to earn someone’s trust. We could showcase a testimonial in the form of a video.
- For those who want to search for something on the website, a search button would be good.
- Showing the logos of companies that featured the business could add some credibility.
- Customers should be able to view their cart. A link or button for this purpose should be present.
- A section on the benefits of becoming a member could convince people to become a member.
- For those who are interested in receiving health tips regularly, a newsletter signup form would be perfect.
While creating the wireframe, it’s important to remember that the design needs to be responsive. In this day and age, almost everyone has a smartphone, especially people in their twenties. For the sake of this guide, we’ll make a design for desktop only. A good design/prototyping tool that I like to use is Figma, a collaborative tool for designers. With the desired features in mind, the wireframe for desktops could look something like this:
As you can see, I left a bit of space between each element and on the sides of the page. This space allows for flexibility in resizing the page.
Apply the content
We now have the wireframe for the homepage. If we’re happy with it and we’re all sure that it’s right for the business, then it’s time to move on to applying the content. First thing to do is to determine which colors we are going to use for the whole website. These are often the same as the colors that are already being used by the business, the brand colors. Since we’re doing this project for an imaginary business, there aren’t any predetermined brand colors. For this project, I chose these colors:
These colors are bright and vibrant. They pop-out and make you feel alive. This matches the whole theme of “fitness” and “health” pretty well. A green color would have been a good option too. For the Hero (the main big picture at the top of the home page), I found a picture online that uses our primary color and fits the theme of fitness.
There are multiple sites where you can find royalty-free images for commercial use like Unsplash, Pixabay and Pexels. There are also other premium sites like ShutterStock and iStockPhoto where you can buy stock photos. Another option is to hire a photographer to make a custom photo. From this point on, it’s a lot of playing around with colors, text and images. What’s most important is that you fill the page with meaningful, related content. Headings and paragraphs should explain what the business is about, what it does and why. Images should be impactful and explain more about the business, its products and its customers. Everything should be designed in a way to serve the purpose of reaching the goals determined earlier. For the final design, I decided that this is the version I feel is most capable of reaching those goals:
We’ve finished the design for the homepage of our imaginary business. We started off with defining the goals of the website and defining the customers. We made a mood board to determine the feel of the website and we created a sitemap and wireframe to give structure to the website. After applying the content, we ended up with a design that serves a purpose. The purpose of reaching the goals of the business. This is the single most important thing to remember in the whole process of designing a website. The design should follow a strategy to serve a purpose. Without the strategy, it would just be a pretty canvas. If you follow the steps explained in this guide, you should be able to efficiently design a website for any kind of business.