My blueprint for building successful websites

Good website design requires careful planning and a thought out strategy to ensure the correct product is delivered to the client. Planning leads to improved and more predictable results, better project scopes and information.

Website design requires us to think beyond visuals and take both form and function into account. A website that performs goes beyond wireframes, mockups, code, visuals and aesthetics. We need to be thinking in terms of a business strategy, problem solving, project plans and process.

The website design process has for the most part followed a structured methodology over the years although with user experience being such a hot topic we now need to consider the following areas as part of our design process:

  1. User Interviews.
  2. Surveys.
  3. Secondary Research.
  4. Competitive/Comparative Analysis.
  5. User Flows.
  6. User Archetypes.
  7. Site Map and card sorts.

These areas of UX are beyond the scope of this article but should be explored depending on budget and project requirements in order to improve the customer’s end satisfaction with the website.

User interviews

Whilst many website projects can succeed without a plan the majority would be better off if planning were used at the start. There are more times than not when a project goes off course and you regret not planning ahead.

No plan = Guess work = Plan to fail = No method to get it right

Problem identification

Before we can create a blueprint for a website or respond to a bid in the form of a proposal, we need to gather information from our client. We need to get specifications, requirements and essential information upfront before the website is quoted for.

My process starts with a conversation, whereby we listen to the client and ask questions. Here we look at the problem that our client is trying to solve with a website. We are trying to find out as much information as possible about the needs of the business and identify their goals. We need to know what the problem is that needs solving. Website design is essentially problem solving – it goes beyond visuals and the way things look. Although visuals are important problem resolution for the business and its client’s will determine whether the website succeeds or fails.

Website design is essentially problem solving – it goes beyond visuals and the way things look.

Website design seeks to solve problems

Our client’s problem will generally fall in the following categories:

  1. Making more sales.
  2. Brand awareness.
  3. Customer engagement with company and promote social channels.
  4. Get more enquiries.
  5. Get signups to mailing list.
  6. Download a digital product.

Be specific about the business goals. Set measurable targets. For example, ‘Sell 1000 more cars in the month of August’ is more specific than the goal to simply ‘Sell more cars’. You may also have secondary goals to the primary goal so right these down too.

  • Who are their audience?
  • What would they expect from visiting the website?
  • What problems are visitors trying to solve?

Find out about your client’s business by asking questions. Find out what they like and don’t like, what’s the mood of the website? Who are their competitors? What websites do they like and dislike?

Does the client have a website? How do people find them? Does the client have an existing brand? Do they have any imagery or video?

One excellent way to gather information and in a structured format would be to ask your client to fill out a form. Here are some example questions that can be asked:

  1. What is the purpose of the website?
    • Explain products and services
    • Provide information to customers
    • Blog
    • Sell products
    • Download something of value
  2. What timeframe do you have in mind for the website?
  3. Who is your target audience?*
  4. What problems are you trying to solve for them?
  5. What actions do users perform when they visit your website?
    • Do they call you?
    • Fill out form
    • Join mailing list
    • Search for information
    • Purchase a product
  6. What pages will your website have? What are your must-haves? These may support your primary or secondary goals e.g. increase sales may need a mailing list sign-up or carousel on homepage for sales messages. Share must-haves with other heads of departments so that important requirements aren’t missed.
  7. Do you have written content for pages? Images and video? Do you need photography or copywriting services?
  8. Is this website a redesign or a new website? What is working/not working?
  9. Are you going to need e-commerce or a membership system of any kind. Are there any additional features you may need for stage 2 of the website?
  10. DESIGN
    • When people visit your website how do you want them to feel?
    • Do you have any corporate branding? Logo? Colour palette? Fonts?
    • If no logo will you need a logo designed?
    • Do you need any branding services?
    • What look and feel do you have in mind?
  11. COMPETITION
    • List 3 competitors’ websites? What do you like/don’t like? What would you like to do differently/better than them?
    • Write down websites you like in terms of style/look/functionality.
  12. MARKETING WEBSITE
    • How do people find out about your website? Google search / advertising / business cards
    • Have you thought about how you are going to market the website?
    • Do you have any social channels? If so, which ones.
    • Do you have a mail service account?
    • Will you need a mailing list?
    • Do you need printed materials?
  13. SEARCH
    • What search terms do users use to find your website?
  14. DOMAIN AND HOSTING
    • Do you have a domain name?
    • Hosting?
  15. MAINTENANCE
    • What pages will need updating?
    • Will you require a blog?
    • What pages might you need in stage 2 of the website?
  16. Further information requirements:
    • Client’s address
    • Email and telephone number
    • Describe stakeholders / other decision makers

Website brief or scope document 

After reviewing the answers from the questionnaire we can now decide on writing a website proposal, which outlines the scope of the project, budgets and timeline. The size and complexity of the website brief will vary depending on the size of the project. Once the proposal has been approved and an agreement is signed the project can start in earnest.

A website brief or scope document explains the needs of the business and provides solutions to these problems. It is used for quoting, providing project time frames and provides the blueprint and website specification for designers and developers when building the website.

Sitemap

Now that you’ve got the job we can build a sitemap. A sitemap is the outline of website pages, at a top level, showing page hierarchy and relationships. The sitemap helps visualise the scope of the project in one or two pages. You can sketch your sitemap using pencil and paper or you can use online tools such as draw.io.

Sitemap example by Housseynou Fall

Scope each page

Once you have finished with the sitemap and this has been signed off by the client each page should now be scoped. 

This involves creating a google doc for each page with information such as  page title, final url for each page, summary of each page and its goal, functionality, images/copy/video requirements and amendments to the page with dates and by whom.

This scoping exercise is very important and will help avoid scope creep, provide technical requirements, project costs and time frames.

Wireframes

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. It is necessary before any page mockups are created.

Wireframes focus on the layout of the website in black and white with basic drawings and without colours or imagery and is similar to an architect’s floor plan. Wireframes show the structure of pages, how they interact with each other and how elements will be arranged.

To reiterate, wireframes do not include imagery and colours. If they do you begin to create mockups and prototypes which are part of the visual design of the website. The website’s visual design will be covered in another article.

Wireframes can be sketched initially and once the direction of the wireframes is approved by the client can be designed in hi-fidelity in programs such as Sketch, Figma or Adobe XD.

A website wireframe.

Content strategy

Your site content is made up of wording, imagery, video and sounds. Content is important to the success of your website and arguably is more important than the design. Take a look at your competitors and see how similar their designs are. To differentiate your client’s website from their competitors you need to focus on creating great content.

Great content will help you to build trust and authority with your website visitors. Your site’s visitors have objectives when they come to a website and content should be presented in such a way to remove obstacles so that they can achieve their goals. Make it easy to achieve client’s goals and find answers.

Your content should be delivered to meet your business goals by fulfilling your customer needs. Your content should assist them in solving their problems and answering their questions.

Considering website content

Content should be deliberate. Written content as an example will need to be considered with SEO in mind so that your website will be seen by search engines.

The above document provides a blueprint and full specification for your website. We will now discuss visual design, which is the next stage in our website project. Please read the following article on website visual design.

Leave a Reply

Your email address will not be published. Required fields are marked *