A little context about our experience with building a website…
When Supahands first started, we were a mere virtual assistant service that allowed individuals to delegate the smallest of tasks like making restaurant reservations. But 4 years down the line, we found ourselves at the forefront of AI’s awakening in Southeast Asia by providing training data at scale for machine learning solutions. No other company in Southeast Asia focused on this niche area of service and we were the first.
It was a big switch for us and we needed to reflect that change in our website — a seemingly straightforward enough task until we realized that we were going from a static website with just 8 pages, to an information heavy website with over 20 pages. It was a steep learning curve for us and something that we felt could be of value to others, which is why we decided to write a series of articles about it.
With building a website, there are 3 areas of expertise that you’ll need to engage — content, design and development.
You’ll always want to start with the content because a designer can’t start designing anything unless you already know what content you want to have on your website. Similarly, web developers can’t start building a website until they have the pages’ designs and individual assets like icons, illustrations and logos.
In this article, we will focus first on how to start working on the content for your website.
Skip to the section at the end for some handy tips if you’re working with a freelancer for your website’s content.
Step 1) Define your business
You may think you know your business well, but how clearly can you define it so that you can even explain it easily to a 5 year old child?
Before you even start preparing the content for your website, you will need to be able to answer the following questions:
- Who am I talking to?
Be specific about who your users, customers and clients are from their location to spending power - What are their pain points?
Identify the problem that you’re trying to solve that’s related to your target market - How does my product solve the problem?
Always highlight benefits that your product provides, not the features that it has
Step 2) Define your website’s purpose
It seems like a easy thing to define but it’s worth spending some time to be clear about the function that you want your website to serve.
Here are some questions that you could ask yourself or your team to get a clearer idea:
- Are your users expected to carry out any transactions such as purchases on your website?
- How often will content need to be added or updated?
- Will you be collecting information from your users like their names or e-mail addresses?
Tip: Brush up on your knowledge about GDPR and other personal data protection regulations that may affect your business
Step 3) Plan your sitemap
Don’t get confused by the different types of website sitemaps there are. Each of them are equally as important and they serve different functions at different stages in a website’s lifetime.
In this case, we’re talking about the sitemap that will help you visualize your website’s structure. I like to think of it as a flowchart of every single page that you want to have on your website and how they link up to one another.
Your answers to the questions in Step 2 will help you decide how simple or complex your website’s sitemap is.
For example:
If you run a pet hotel and you want your website to tell your customers how to find you, prices of the services that you provide or show them pictures of the place, then perhaps your sitemap might look like this:
If you run a peer-to-peer marketplace that allows users to list items up for sale as well as make purchases, then your sitemap will be more complex and may look something like:
Not sure where to start when it comes to building your own sitemap?
An exercise that I found really helpful was by looking at other similar companies’ websites to have an idea of what their sitemap is and see what gaps your website can fill that theirs didn’t.
Step 3) Plan each page’s wireframe
Think of a wireframe as a webpage’s blueprint. It’s a skeleton that helps you decide the arrangement of the different elements on the page. This includes the placement of text, banners, hero images, text, headers, buttons and sections.
This is the wireframe that we created for our homepage:
Note that the wireframe will not determine the final layout of the page as things may shift around once the design process start. But it will give you an idea of the type and length of the content that you’ll need to prepare.
When it comes to preparing the wireframe for a webpage, we like a technique that takes you through a “reader’s inner monologue” which are questions that you would imagine visitors to your website would be asking as they scroll through.
Starting from the top of the page, run through the following questions as you scroll through your page:
- Ok, what’s the general idea?
- So far, so good. But how does it work?
- Hmm… That sounds like ___, how is this one different?
- I see, so how do I use it?
- Am I sure that I can trust this product?
This will help you structure the layout of the page, knowing where to place different elements and also advising the web designer on what sections to highlight.
While you can try creating a wireframe by sketching it out by hand, it’s often much neater and easier to use existing tools like draw.io or Balsamiq which has ready-made templates and elements.
You don’t need come up with a different wireframe for each page if you plan for your website to have multiple sections with different pages nested under it. For example, the wireframe below is repeated for the pages under our “Solutions” section:
Use a similar technique with the sitemap, and look at what existing companies have already done. Your website doesn’t need to have a radically new layout or design from current existing trends to function well and convert users.
Step 4) Start writing
With the sitemap and wireframes ready, you will be able to start writing in a more structured manner. You’ll have a better idea of how long each part of the content will be and it will actually force you to be more precise with your words.
Again, it will also help to spend time studying your competitors’ websites so you’re aware of what works and what sets you apart from them.
Here are some important points to bear in mind when you’re writing website content:
- Keep your words simple and concise.
- Be really strict with keeping to the word count for each section. You don’t want text on the same row to have different lengths as it may look very messy.
- Keep the tone consistent across your entire website
- Avoid lengthy paragraphs unless you need it
How do you maintain your website’s quality if you want to outsource its content?
Here are some important points to take not of when considering an outsourced web content writer:
- Past clients
- Is the writer familiar with your business and the industry that it’s operating in? - Turnaround time
How long will she/he take to complete writing content for all pages - How are you finding your freelancer(s)?
If you’re going via Freelancer or Upwork, you get the benefit of viewing ratings of past projects that the person has worked on before. Some platforms also allow the freelancer to record their screen activity at certain intervals to provide more transparency to clients - What are the terms of agreement?
Is there going to be a contract between you and the freelancer? Do you have a fixed deadline or scheduled check ins with the freelancer to keep updated on the work’s progress? Do you have a set number of reviews for the content of each page that the freelancer writes? - How will the writer log her/his hours worked?
Freelancing platforms will have features that allow freelancers to log their hours and invoices. Alternatively, you can also opt to use a shared document like Google Sheets.
It’s vital that you find a freelancer that you can communicate with well and responds to you quickly. We often prefer to “overcommunicate” and share as much information with our freelancers as possible to avoid missing out any details.
Most importantly, we believe that this is a two-way relationship that requires cooperation on the client’s part as much as the freelancer’s. Respect must be mutual so that conflicts or misunderstandings that may naturally arise can have frictionless resolutions.
Bear all the tips above in mind, and you should be well on your way to have a seamless start to your website’s build.
This article was written by Juinn Tan, Product & Digital Marketing Manager @ Supahands.
If you have any further questions or suggestions, please do not hesitate to comment below.
