Website development proposal

Client Pace
Author Sönke Roth
Version 1.0

Overview

Pace have approached LP (via Studio Ongarato) to provide an estimate for the web development project as per the supplied brief document and previous discussion.

Objective

To define a scope of work required to fulfil Pace’s business, customer and technical needs and provide an overview of the solutions, process and budget required to achieve this.

We will provide some technical insight and examples of how we can structure the content management to provide flexibility within the design guidelines without being overly complicated or too simplistic.

We will also touch on some top level hosting suggestions to give Pace full ownership, scalability and control with minimum ongoing costs.

Scope & requirements

Based on the provided brief we’ve identified an initial scope of work and requirements:

  • Create an online framework accommodating all of Pace’s core business activities under one umbrella site with clear division of the key business needs and addressing demographics.
  • Creative direction, design and information architecture will be a lead by Studio Ongarato in collaboration with Pace and be custom built by LP.
  • Content management is to be intuitive, flexible and customisable allowing all aspects to be managed internally
  • Integration to Salesforce/Pardot
  • Ability to create landing pages and LCP
  • Provide a scalable, open source platform for the main websites and other future digital assets.

Creative notes

The creative and information architecture will be lead by Studio Ongarato. So aspects like the sub brand positioning and overall look and feel will be defined in the discovery and design phases. We encourage the design team to take full creative freedom and are confident we can achieve any design that is presented. Whether it involves complex design systems or grids, editorial style typographic treatments or suggestions for scroll based animations, we encourage to push the design and are confidant we can achieve this down to the pixel.

While aspect of creative solves a lot of UX in a visual sense, there is a significant component of interactive work to bring it all to life. This is done with some creative coding and can range from micros-interactions, scroll interaction, typographic animations to full page transitions or mouse and touch effects.

We envisage using Swup which provides app like page loading. It works by only replacing elements of the page that need to change. Pages, or just the new sections of them, transition quickly and smoothly while cleverly pre-loading content in the background. This type of interaction teaches users that when something is clicked or tapped you get an immediate reaction without a hard reload. This encourages more exploring and longer user sessions.

We enjoy the creative side of coding as well as building robust backend system.

Technical solution

WordPress CMS

No matter what CMS you are using, be it an in-situ builder tool like Squarespace or a complicated technical mind dump like Sitcore, you still need a concrete content plan of the page, project, landing page or whatever it is you are creating. Content is king, the CMS is workhorse.

The interface you use to create your content needs to operate within the parameters of your requirements and design guidelines. It should not have confusing processes or options that you don’t need or provide so much creative freedom that you need a design degree to construct a simple layout while remaining on brand. It should also not limit you in what you are creating. 

By using WordPress as the CMS we are able to create a completely custom framework of page types, taxonomies (categories) and relationships as well as rapid integration of 3rd party vendors (e.g. Salesforce).

Some benefits of WordPress:

  • completely customisable: front and back end (can achieve any design requirements with relevant admin tools)
  • bespoke drag and drop content modules
  • open source, fully owned code, no licence, huge developer community
  • multi user platform (each editor has own account and you can see who has done what without overwriting each others work)
  • central media library (auto resizing of images for all required modules, image editor, mange PDF and other downloads)
  • reverting changes (make a mistake, revert to last published version)
  • easy integrations: SEO, form builders, CRM, analytics
  • automated updates and security
  • private content (e.g. user can access private content after signing up)

We will be able to demo various sites admin systems through screen share call.

Hosting

We suggest that Pace acquire their own VPS (Virtual Private Server) and highly recommend Conetix hosting as the supplier for this. They maintain one of the most modern and up to date and secure hosting infrastructure in the Australian market as well as amazing support.

A VPS will provide a hosting platform that can house all of Pace’s websites under one roof with full control and ownership. All domains and websites can be managed within one account as well as being able to provide limited/as needed access to external developers. (i.e. you can provide a developer with access to just one of the websites).

These hosting plans start at $99/month and can be scaled up (highly unlikely to be necessary). We can assist in getting this set up.

Process

The below is a guide to the websites development and deployment process providing a breakdown of the core tasks involved in each stage.

Discovery

Initial discovery phase in collaboration with Studio Ongarato and Pace.

This will explore some benchmarks and best in space examples and determine how we can best position the new website.

It is an opportunity to address the current issues and desired outcomes without focusing on what is currently there, more on what it can become.

We often at this stage find or create some interactive prototypes or design patterns to solve navigation, filters and UX concepts.

Workflow

We generally work locally on our own network for the majority of the development phase, once we have builds that are presentable we push these to a staging site e.g. stage.pacedg.com.au for review and feedback.

  • Set up of local development environment
  • Set up of staging and live environments
  • Workflow between the environments (pushing changes from dev > stage for review > live)
  • Trello board with itemised tasks (we break tasks down into single Trello cards and provide an overview of e.g. what is being worked on, still to do, ready for review, completed etc.)

Technical scope

Once creative has been approved we devise a technical plan and determine the exact number of templates, post types, relationships between post types and what content modules are required to achieve the design.

We also further explore ways to bring it to life and aim to share options and use cases before committing to a direction of how, for example, a navigation system functions or how certain animations are treated.

Main Build

  • Framework (responsive UI)
  • Navigation system
  • Home page (+flexible content modules)
  • Custom post types (Corporate Commercial, Residential, Property, Projects, News,  etc.)
  • Flexible content modules (Slider/carousel, multi column layouts, editorial layout, image galleries, video player etc.)
  • Animations, interaction and UX design
  • Additional templates (LCP module)
  • Footer / Auxiliary links / Social
  • Sales Force/Pardot integration

Initial review

Once core development is complete and the site is ready to be reviewed we provide a staging link along the Trello board  to provide feedback and revisions.

Content & Revsions

  • Content population of initial content
  • Revisions and adjustments based on feedback
  • Initial training on CMS for internal content population (often content population is most productive as a collaboration and also helps improve the admin experience through client side testing and adjustments)

Launch

  • Test and debug beta version of website before launch
  • Testing of integrations
  • Launch live website
  • Site verification with Google, analytics set up.
  • Install security monitoring software and configuration

Timeframe

We anticipate the project to be completed in 8-10 weeks from design sign-off.

(Please consider that this is referring to the development from main build to launch and doesn’t include the design / discovery phases)

Budget

Please note this budget is indicative and we tend to stay on the side of caution. The design process and desired outcomes always define a clearer scope and can optimise the budget. We are also open working towards available budgets and are flexible with payment terms.

Workflow & scope

Technical planning and in-depth scoping for all required modules, functionality and related workflows.

$2k

Main build

  • Conversion of approved design into  HTML/CSS/Javascript framework
  • Interaction, animation, transition development
  • Integration and set up of admin and bespoke editing tools
  • Integration to 3rd patry vendors

$12-15k

Refinement, content revisions & launch process

$4-5k

Total investment

$18-22k +GST

Our Approach

How we approach coding, WordPress, interaction & animations and performance.

Front-end

While we do favour WordPress as a CMS, this has zero to do with the front-end of the website. The front end is hand crafted using a modern Javascript based complier workflow. We do not use any page builder plugins or bloated WordPress solutions. Everything is custom built to spec using our own code base.

WordPress Admin

We often have to explain that WordPress is not a dirty word. It is a really great open source content management system.

Being most popular CMS on the Internet it may appear tainted to some as there are many, many (literally millions) of terrible implementations of it.

We use it to provide the easiest, most flexible and familiar admin interface to mange content.

It also has many integrations that save huge amounts of development and cost. (e.g SEO, SalesForce integration as well as security and monitoring tools)

We use Advanced Custom Fields to tailor each templates administration needs. So each page has an intuitive interface to suit its content and there nothing there that you don’t need.

Each page or post type can be built using the available content modules. We tailor these modules to each template so you never see anything that is not relevant to current context. Content modules are easy to add, drag drop, edit, delete or re-order.

Some Nerdy Detail

  • We refrain from DYI type Javascript libraries or bolt together a series of no-compatible plugin based libraries
  • The few that we use, we use well, eg. ScrollTrigger which is part of the GreenSock / GASP stack, it controls all scroll based interaction. Swup for app-like page loading without hard reloads.
  • Every, hover, fade-in, stop, start – whatever, is created in Javascript & CSS from scratch, not inherited by some plugin.
  • All code is compiled using WebPack

Thank You!

Please send any feedback or questions to sonke@lpip.com.au.