Skip to content

Test only 16 Feb 2020

ABOUT THIS DOCUMENT This is a Website Map.

A website map is a high-level look at the website you are going to build.

It outlines exactly what framework, pages, plugins, and user capabilities you are going to use moving forward. If you are shopping around you can use this map to accurately compare apples with apples.

What can you do with it?

Now that you've got your website map you can easily move forward with confidence.

Use it as the base

This is a great document to start any website build. It puts a frame around what is in, and out of scope.

Get accurate quotes

 If you are shopping around you can use this map to accurately compare apples with apples.

OVERVIEW About this project

A brief outline of what the client is expecting as deliverables.

New Website

A new full functioning website which will resolve to a live domain. The final website will be easy for visitors to navigate and will be completely responsive on all width devices. It will work across the vast majority of available browsers and every pixel will be editable by the client without the need to dive into code.

text-bgArtboard 1@2x

Website Redesign

A redesign of the current site into a new full functioning website which will resolve to a live domain. The final website will be easy for visitors to navigate and will be completely responsive on all width devices. It will work across the vast majority of available browsers and every pixel will be editable by the client without the need to dive into code.

Logo Creation

Logo is a major factor of your company's success. It is a visual representation of your brand and website's overall design. It must not be taken lightly. Our logo design process involves picking the right colors, elements, fonts and different shapes and putting them together based on your business requirements and goals while keeping your target audience in mind and making sure it communicates to them.

whiteArtboard 1

Brand Guide

Whether you are into massive marketing effort or just running a startup, brand guide plays a vital role in your overall marketing strategy. Our brand guide provides a guideline that reflects your overall business recognition while keeping corporate graphics and elements consistent and uniform across materials with an aim to drive visitor engagement and convert them to delighted fans and winning customers.

Style Guide

Style guide takes the heart and soul of your brand and transcribe it to visual design presentation. Our style guide contains specifications that communicates to the world what your brand is all about from typography, color, shapes, logos and imagery. We focus on overall design consistency of all your content from features, elements, blog posts and data presentation with a goal of having a recognizable and compelling brand story.

BUSINESS SUMMARY About Test only

Suggested Sitemap

Goals

There are a few different types of people that will hit your website. The two types we must make sure we cater for, are those ready to take action, and those who need more nurturing.

Each page will offer a call to action for BOTH usertypes.

The visitors who are ready to take action will most likely click through to a Primary Call to Action. Users who need more nurturing will most likely click on a Secondary Call to Action.

Primary Call To Action

Here is what I am thinking for call to actions for those ready to make contact.

Contact via Phone Call

For those ready to make contact, they can press the number on any device and it will immediately initiate a call

Submit an Enquiry through the Contact Form

There will be a link to make contact via gravity form. This can be used for just about anything you can think e.g. Feedback, Questions, Service/Information Request.

Webp.net-resizeimage (1)

Purchase a product

Users can purchase a product of choice simply by clicking the chosen product and then process payment accordingly via the available payment options.

Book an Appointment

There will be a button to book for booking. This button will open a form for the visitors to quickly take action. We can capture the customer's information from here via gravity form and put them on a list for future reference.

Enroll to a course

This will be a form where students can fill up with their information and enroll. We will capture all the details and put them in the database.

Become a Member

Users will easily be able to see the terms of membership and what benefits they receive by becoming a member - followed of course by an intuitive sign up process.

Secondary Call To Action

For those who want to learn more and need a little more nurturing, here are some ideas for secondary call to actions.

Contact via Phone Call

For those ready to make contact, they can press the number on any device and it will immediately initiate a call

Submit an Enquiry through the Contact Form

There will be a link to make contact via gravity form. This can be used for just about anything you can think e.g. Feedback, Questions, Service/Information Request.

Webp.net-resizeimage (1)

Purchase a product

Users can purchase a product of choice simply by clicking the chosen product and then process payment accordingly via the available payment options.

Book an Appointment

There will be a button to book for booking. This button will open a form for the visitors to quickly take action. We can capture the customer's information from here via gravity form and put them on a list for future reference.

Browse other pages

Users can browse any web pages or hypertext documents within the website which contains specific information they need or hyperlinks that connects to a specific source.

Testimonials and Reviews

A link to take the user to some happy previous customers , helping to overcome objections.

Mailing List Signup

A form is provided all around the website to encourage user/visitors to sign up and get the latest news directly in their inbox.

ic-cross

Explore the FAQs

For users who need to answer a specific question, this page might just overcome any final objections the user has to take action.

Read articles

A link to take the user to the blog articles, helping to overcome objections.

Expected Features

Good Design Practice

  • The entire site should have consistent typography, and all body fonts should match in regards to size, colour, weight, letter spacing, and line heights.
  • Colours should be consistent at all times and exact hex values should match. Same goes for colour values of shadows, background overlays, hover colours, etc.
  •  All padding and margins should be consistent
  • All logos used should be high quality and look good at all scales.
  • It should have great responsive design and look great on all devices from phones through to desktop screens.
  • Ensure Cross Browser Compatibility

WordPress

  • WordPress core installation must be up to date.
  • If someone completes the contact form, then the admin should get an email notification.
  • There should be a styled 404 Page to assist with broken links and ensuring the user can continue browsing.
  • The site should have a sitemap for search engines to easily reference and crawl the site.
  • It should be ready to accept SEO information.

SEO

  • SEO friendly URL permalink structure must be enabled.
  • Keywords will be selected and basic on-site SEO will be done on each page within the main header navigation

Optimisations

  • It must load fast
  • Images must be compressed and optimised for each viewing device

Plugins

  • The site should be built with a minimum number of plugins.
  • All plugins must be downloaded only from trusted sources and must be up to date.

Drag'n'drop Front-end Editing

  • Site will use a top tier builder as a Drag and Drop editor. We recommend Elementor or Beaver Builder.
  • Must be able to save modules, rows and templates to be easily reused at later stages of development

Theme

  • All HTML and CSS codes used must be validated and well formed according to the standards of web. 
  • All WordPress and PHP codes used must follow the latest and updated WordPress Codex standards.

CRO

  • It should be built with the goal of getting conversions

Backups

  • Automated backups should be happening daily
  • For sites under 500Mb Admins will be able to take a backup and restore a backup should they wish.

Security

  • It should be built with security in mind allowing for 2 factor authentication and plugging the 3 vulnerable ways that Wordpress can be accessed.

Required Integrations

Paypal

PayPal is arguably the most popular and largest online payment gateway in the world. Integrating Paypal into your  website enables a plenty functionalities as you can receive payments for your services and products directly from your website. With PayPal, you can power up your website into a fully-functioning eCommerce business with nothing more than a PayPal account and a few clicks from your website.

Stripe

Just like Paypal, Stripe is one of the most widely used payment gateways in the world today which is known for its lower transaction fees, detailed internal analytics/reporting and flexible API. It is trusted and used by big brands such as Best Buy, Target, Lyft, Facebook and Shopify. Integrating Stripe in your website provides your customers straightforward, secured and more payment options including Bitcoin, Apple Pay, credit and debit cards.

Afterpay

Afterpay is a bit like a layaway program as it provides  the option to buy now, get to take home purchases and then pay later. Integrating Afterpay in your website gives your customers the ability to calculate installments below product prices along with the other products, cart and checkout pages. For every approved Afterpay transactions, a system order will be created within your website. Automatic refunds are also supported for various cases.

ZipPay

Similar to AfterPay, ZipPay is another payment option that allows your customers to buy products immediately, and then pay back over a period of time but with a difference of offering customers the option to set up their own payment schedule on their own time and a much lower fees.

Mailchimp

Mailchimp is one of the most seamless tool and best email service for email marketing out there. Integrating Mailchimp to your website supercharge you with the ability to capture leads on your website with a subscribe form, automatically send new blog posts via an automated email newsletter and some more email marketing features to grow and engage your website's audience in a few clicks.

Chatbot

Chatbot provides an efficient way to engage with your visitors and potential customer's live questions. Integrating it with your website enables you to automate your conversations especially with questions that doesn't require your presence. It also offers the functionality to email support, show FAQs relating to inquiries and automated answers in just a few simple steps.

Google Analytics

Every marketing effort needs to be tracked in order to know if it's succeeding or failing. After planning and implementation, tracking tools are necessary so as to calculate the ROI of your marketing effort. Integrating Google Analytics to your website is one of the best ways to learn more about your audience as it provides you with website traffic status, audience demographics, pages and links click rate report. With all of the information it provides, it will help you learn the factors that are working and not working so you can simply adjust your content strategy to serve your audience better and optimize traffic sources.

Calendly

Calendly is a simple calendar app which enables you to provide a list of dates and times to your visitors/customers and book self-select date and time without worrying about time zones. Integrating Calendly in your website gives you the option for multiple calendar commitments and set schedules with privacy settings and the best part is that it can take payments for every booking. Calendly manages to solve two problems at the same time.


Instant Images

Instant Images is the fastest and easiest way to upload high quality FREE photos from unsplash.com directly to your media library. The perfect tool for users who want to save time and frustration by uploading images directly inside their WordPress installation and for developers who want to prototype and develop using real world imagery.

Eventbrite

Gain 24/7 Access To Data, Reports, and Check-In Tools On Any Device For All Your Events! Create, Organize, and Manage Events Easily Through Eventbrite's Online Event Registration. Track Sales. Promote Your Event Today. Real Time Reporting. The real advantage of using eventbrite is you are leveraging the already existing audience on Eventbrite's platform.

My Suggested Plugins

Beaver Builder

I would like to build your site using a Beaver Builder plugin. It is a really easy to use drag-n-drop editor which gives you control of the site once it's built. You'll be able to edit everything yourself without having to dive into code.  I am a huge fan of this builder and have even created a set of tutorial videos that show how easy it is to use here: http://stackedsite.com/getting-started

Gravity Forms

I would also like to use the Gravity Forms plugin. You'll need some forms on your site, and this plugin gives us the control to create really advanced forms and completely customise the look and feel. On top of that we can create many actions that are triggered off a single form submission - for example, the user submits the form and then ALL of the following could happen (just as an example) - send them an email to let them know the next steps, send you a notification email, redirect the user to another page, add them to a mailing list, create a new customer record for them in XERO, add a new spreadsheet row, etc. You get the idea!

Powerpack for Beaver Builder

I would also like to use Powerpack for Beaver Builder. These are highly useful, creative, functionality oriented modules and ready to use Beaver Builder page templates for various business niches to be used as starter pages accompanied with drag & drop premade sections and rows to build a custom page layout according to your website design and development requirements.

Ultimate Addons for Beaver Builder

I would also like to use Ultimate Addons for Beaver Builder which has plenty of ready to use custom modules for row separator templates, modal popup to professionally design your  web pages.

Beaver Themer

I would also like to use Ultimate Addons for Beaver Builder which has plenty of ready to use custom modules for row separator templates, modal popup to professionally design your  web pages.

Custom Press

I would also like to use CustomPress which gives the ability to create custom content like custom post types, custom taxonomies, and custom fields. CustomPress is the only plugin that lets you create all three custom content types in WordPress.

Duplicate Page

I would also like to use Duplicate Page plugin to easily duplicate posts, pages and custom posts in just a single click.

Woocommerce

I would like to build your site using a Woocommerce plugin. This is the most customizable and most popular eCommerce platform for building your online business. Using this plugin you can sell almost anything from physical products and digital downloads to subscriptions, content and even appointments. It enables you to show products available on other sites with an affiliate link for customers to purchase them, add and update product information like name, short description, regular and sale price and manage both orders and customers. Finally, it can take payments via Stripe and PayPal and accept credit cards, Direct Bank Transfer, checks or Cash on Delivery plus shipping rate management system all in one package

Smush

In the old days (3 years ago) , before you could add an image to your site you needed to resize it, re-format it, and compress it. This is why the SMUSH plugin will be great, you'll simply hit upload and the plugin will do everything in the background AND create multiple versions so it looks good on mobile, tablet and retina devices.

Australia Post Woocommerce Extension

I would also like to use the Australia Post Woocommerce Extension plugin to integrate the Australia Post service to calculate the shipping cost and track delivery time for your customer's order by providing the Australia Post tracking number on the order page. A shipping tracking link will be created at their account and also will be included in the order emails.

Learndash

LearnDash makes it easy to create an online course and membership website. It protects your content without the need of a membership plugin using our access settings and manage members / users at the backend. It also has the feature to accept paypal, stripe and 2checkout payments through the popular shopping carts platform such as WooCommerce, SamCart and ThriveCart.

Yoast

Yoast SEO is a great tool for effortless optimization of web pages for Google, Bing, and Yandex. It comes with several optimization options to help you optimize your website for the search engines, social media and improve your chances of getting rank on major search engines.

Sourcing Images

It is expected that the company delivering the website will find appropriate images for the project . If the images are not satisfactory to the client, then the client can find appropriate images from the following libraries to be used instead.

  • IMAGE REQUIREMENTS

    • Must be high resolution
    • Must be optimised for fast load times
    • Must be compressed in the latest WebP graphic format - (yes .jpg is old now)
    • Must be royalty free
  • POST LAUNCH IMAGE REQUIREMENTS

    • Client must be able to easily change all photos on the site without diving into code
    • When images are uploaded by the client, the system must automatically create a version for different width devices and automatically optimise and compress the images.
    • System must support all major image file types - .jpg, .png, .gif
    • System must automatically support the new WebP image compression

Free Image Libraries

To assist in sourcing the correct imagery for this project we suggest looking through the following libraries which offer free, high resolution, royalty free images.

Unsplash

unsplash.com

Pexels

pexels.com

Burst

burst.shopify.com

Content

This is one of the major factors that contribute to cost.

  • OPTION 1

    Write the content yourself

    • You know your subject matter and tone better than anyone
    • Takes time
    • Not writing with SEO or design in mind.
    • Often holds up the process
  • OPTION 2

    Junior Copywriter

    • You'll get at least 500 words per page which will give google something solid to index

    • Text will be written to enhance Search Engine Optimisation (SEO)

    • You will need to go through and edit the text afterwards to suit your tone and messaging 
  • OPTION 3

    Pro Copywriter

    • It will be engaging and convincing copy which will increase your conversion rate

    • It will give the designers the ability to design around the text and ensure the design supports and enhances the copy.

    • Google will love it.

    • More expensive

User Capabilities

User Capabilities Explained

This is an outline of what each user type should be able to do on the new website. 

Visitor

    • Easily navigate throughout the menus 
    • Click through to social media pages which open in a new tab
    • Easily find the information relevant to them
    • Visit all the latest blog posts and archive from previous blogs
    • Subscribe to newsletter via newsletter form within the site
    • View all products
    • Can click on a product to view more information about the single product
    • Can select variables from within a product (woocommerce variations)
    • Can add single or multiple products to the cart
    • Can seamlessly see shipping rules and classes.
    • Can checkout with credit card on the site without being taken to a 3rd party provider.
    • Can supply different shipping address to the billing address.
    • Can process payment on all major available payment gateway option e.g PayPal or Stripe
    • Receive an email confirmation about the product orders
    • Can connect via chat box
    • User can send a message via the contact form

Subscriber

    • Having opted in, they can receive emails from within the mailing list software.

Administrator

    • Add new pages
    • Can easily update the images
    • Update any information on any page of the website without the need for code
    • Add blog posts with ease
    • Schedules blogs for future release
    • Add new product(s) with complete details such as name, price, product image etc.
    • Add product variation e.g size and weight
    • Add shipping options 
    • Add payment options e.g. Paypal and Stripe
    • Manage customer's information
    • Manage customer's orders
    • Mange product's stock
    • Inventory management levels
    • Can reply via chat box 
    • Can send images and documents through the chat box
    • Receive notification of all contacts made through the website
    • Receive any submissions on the contact form and reply directly through email

System

    • System will automatically adjust all elements and image of the website to fit any device and screen size.
    • System will take regular backups
    • System will do automatic monthly updates
    • Security hardening in place including blocking those annoying spams
    • Option to incorporate 2-Factor Authentication on the website for increased security
    • Speed optimization includes CSS and Javascript minification and Image optimization to ensure the website's pages load in mere seconds.
    • System must be scalable and can handle future growth - 10,000+ pages, posts, videos, images, etc. (subject to space allocation)
    • Integrate with MailChimp through an API
    • Integrate with Stripe or Paypal if any purchasing is required

NEXT STEPS What do you do now?

It's a thorough map and now that you've got it you know exactly what needs to be built! So here's how you move forward:

Option 1 Quick Launch Site

$279 Hosting: $29/mo.

Generally this package is completed in a single day for you and the team at Stacked Site will spend up to an hour training you on how to change text and images. The training is recorded for you to refer back to when you need it.

Perfect for:

Validating a business idea

New businesses whose service offerings are not set

Process

  1. You choose an existing template
  2. Based on this plan, Stacked Site will setup your menu, pages and forms
  3. You'll be taught how to replace the text and images yourself
  4. If you need help, support is outstanding
  5. When you're ready, your site can go live.
  6. You can continue to develop the site over time.

Option 2 Stacked Site

$2500 Hosting: $29/mo.

You and I will plan your site a little further together making sure it will kick some goals, and then hand over everything to the design team at Stacked Site. Your assigned project manager will take care of everything from start to finish with a custom design and unlimited revisions.

Perfect for:

Established businesses who want a polished web presence

Businesses whose offerings are tested and proven

google

Process

  1. You'll be introduced to the project manager at Stacked Site
  2. Together you'll collect the information needed for your site
  3. A top-tier designer will create your homepage
  4. You'll have unlimited revisions so you can be sure it's perfect!
  5. The team will create all the inner pages and give you 3 revisions
  6. Placeholder text can be replaced by you or the in-house copywriter.
  7. Your site will be optimised for tablets and mobiles, adding animations where effective.
  8. Your site will have all the appropriate tracking installed. (analytics, webmaster tools, hot jar, google tag manager)
  9. You can then launch your site to the world

Option 3 Specialist Site

$7500 Hosting: $29/month or BYO

I'll take care of everything to make sure the site aligns with your messaging, branding and offering. I'll constantly tweak the direction to make sure your site will get results. It'll have consistent styling, last 5-10 years and you can expect results. (If agreed, I'll be looking to submit your site for a website awards to be judged on Design, Usability, Creativity, Mobile and Developer Categories.)

Perfect for:

Businesses who need there website visitors to turn into customers

Businesses who want one point of contact and a concierge service

Businesses who need a remarkable website

wordofmouth-2019-sa-colour

Process

  1. I'll personally look after your project from start to finish.
  2. I'll start by further developing this site map by including detailed page features, wireframes where needed and develop a plan which works with your marketing channels.
  3. I'll work with a copywriter to write convincing content that is SEO friendly.
  4. I'll create a visual content strategy
  5. I'll work with a designer to create your high impact homepage
  6. We'll create the inner pages and functionality.
  7. We'll also adapt an agile methodology, constantly tweaking and improving the design and user experience.
  8. We'll add the finishing touches - animations and responsive layouts.
  9. You can launch your site to the world.

Current Progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1Artboard 1@3x
Questionnaire

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2Artboard 1@3x
Website Plan

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3Artboard 1@3x
Content Collection

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

4Artboard 1@3x
Homepage Design and Branding

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

5Artboard 1@3x
Inner Page Designs

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

6Artboard 1@3x
Text Replacement

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

7Artboard 1@3x
User Acceptance Testing

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

8Artboard 1@3x
Website Launch

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

9Artboard 1@3x
Handover Documents

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

10Artboard 1@3x
30 days support

DoneIn ProgressTo Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.