How you can launch websites faster using the DTA Design System and how the system can be put into Squiz Matrix CMS
- Read time: 3 mins
- Tech level: medium
- Key resource: see the Design System demo website built in Squiz CMS
- Key take-away message: The DTA Design System can save you time and money. These efficiencies can be extended even further by setting the templates up in an enterprise CMS such as the open source CMS named Squiz Matrix.
Summary: This article talks about the DTA Design System, its components and how the system can be put into an enterprise CMS such as Squiz Matrix.
Concepts / tags:
- CMS: Content Management System
- Design elements and components
- Branding and style guides
- Project management of large-scale website design projects.
About the DTA Design System
The Digital Transformation Agency (DTA) has created an accessible Design System that essentially provides the fundamental design elements of a government website – designed, developed and ready for you to use. This DTA Design System means that rather than ‘reinventing the wheel’, a new website can be developed and deployed in a fraction of the time it would take to design and code a bespoke website.
The DTA Design System framework is a great initiative because it means that it will be faster and more efficient to build a government website. New websites will come with all the common components, such as:
- Accordion
- Call to action
- Buttons
- Form elements.
Future maintenance will be streamlined because bug fixes will be fixed and new elements can be introduced centrally.
The next step would be to apply the respective brand to these components to match the organisational unit’s approved style guide.
At the time of writing this article, a beta version of a suite of website design elements was available.
Major benefits of this framework
This framework will enable shorter website production cycles, more consistency across government websites and better accessibility on government websites.
Common uses and scenarios for the DTA Design System
What are some of the common scenarios in which a template framework would be helpful?
You need a new website deployed quickly
Instead of starting from scratch:
- An organisation could quickly deploy ‘the skeleton’ of a website that already has many standard design elements. This would only take about 30 minutes, and less if the government agency is using an enterprise class CMS.
- They would then remove any elements that are not needed and replace placeholder photos and text with actual website content. This would take approximately one day.
- Branding would then need to be applied.
- If these templates were set up in a CMS, then the process would be more streamlined and scalable.
You have many old websites that need to be rebuilt quickly
Another scenario where this design system is useful relates to scalability. A government agency may have, say, 10 sub-websites that are all out of date. Rebuilding all the websites using a unique design for each could take years. An alternative is to take an iterative approach.
An iterative approach would mean that improvements to the websites are made much sooner and more often. There will be a trade-off though: websites built using a common template framework often look like they have been built using a common template framework. While these new websites won’t have an overly unique look and feel, it will be a vast improvement on an outdated website.
Furthermore, a template-based website could be the first step in a practical, long-term timeline which includes the application of a unique design at a later date.
Release early and release often
You could spend a year working on a grand design with a unique look and feel that will perfectly represent your organisation. The problem is that in the mean-time, the most important stakeholder, the visitor, will have a poor experience with an outdated website.
Another option is to release a new website quickly using a template such as the DTA Design System, and then as a second phase, release a second version using a unique design.
Replacing an underperforming website with a Minimal Viable Product is better than your visitors having a poor website experience for months – while the gold-plated masterpiece is being carefully fine-tuned. Your masterpiece would still be launched – but in a later phase.
The DTA Design System aligns with the concept of ‘Minimal Viable Product’
Enterprise-sized website projects frequently go over time and over budget. Why? A common reason is ‘paralysis through analysis’. As the ‘shopping list’ of website requirements grows, so does the development timeline. To avoid this, the concept of a Minimal Viable Product (MVP) helps focus attention on the critical components of your website.
An MVP approach involves launching the critical components of a website within a relatively short timeframe, then periodically releasing improvements in subsequent phases.
A faster return on your investment
Replacing an outdated website with an improved website will mean a better experience for visitors and a faster return on your investment. It also means a faster time to market.
In the case of government websites, releasing early and releasing often means that taxpayers will receive an improved website faster and therefore experience less frustration.
Brand damage from an outdated website
In a way, the DTA Design System can be seen as a solution to the brand damage that results from an outdated website. The longer an outdated website is published, the greater the damage it’s doing.
Accessibility
One of the best things about the DTA Design System is that it's accessible. A lot of time and effort goes into building new government websites and making them accessible.
Considering how many government websites exist in Australia, this design system will lead to greater efficiencies and cost savings. If your website is built using this design system, then far less time and effort will be required to make your website accessible.
Look and feel of a website built using this design system
The DTA Design System will no doubt shorten the project timeline and reduce costs. When using any design template, limitations in customisation is the main trade-off of shortening the design and development phases of a website project.
This is not to say that government agencies cannot have unique-looking websites. And, as far as I know, this template system is not compulsory; it's just an option which can be downloaded and set up. Choosing this option, however, drastically reduces the time and costs associated with designing and developing a new website.
Once the template system has been set up, the colours of your brand / style guide can easily be applied to these templates.
Standardisation vs unique branding
Using a design template enables you to enjoy time and cost savings – while still applying your own brand to your website.
Applying your own branding has been accounted for in the framework. Developers can start with these components then change branding elements such as:
- Colour scheme
- Font size and spacing
- and more.
The framework is also well documented, including instructions on creating new components.
Demonstration of the DTA templates in Squiz CMS
As a tangible demonstration, Polish Pixels has built a CMS-based website using DTA templates. We chose to build it in the open-source CMS named Squiz Matrix CMS.
This is just a demonstration website and contains stock photos and placeholder text. The point of this website is to demonstrate that these templates are compatible with an enterprise CMS and to allow you to click through the website yourself.
Building a website using these templates in an enterprise CMS adds a new level of efficiency, because enterprise CMS platforms are excellent at enabling efficiencies within large organisations that have many websites.
Squiz Matrix can be configured to efficiently manage multiple websites that share a common design system or set of templates and elements. Once set up correctly, applying a customised branding in Squiz CMS is a matter of a small number of mouse clicks. Furthermore, once set up, deploying a new website that uses a design system is very quick and straightforward.
This demonstration website also shows that we have tried and tested this functionality for you and can confirm that it all works.
Ongoing maintenance of template-based websites
Using Squiz CMS, ongoing maintenance is streamlined because improvements and fixes can be efficiently rolled out across many websites. This is an important point because at the time of writing this article, the DTA Design System was in beta. Over time, as it is further developed and extended, applying changes efficiently will be very important.
Website upkeep by non-technical website editors
Squiz CMS is excellent for enabling non-technical editors to place or embed elements within a page.
Squiz Pty Ltd offers a product named Edit +. It’s a very powerful and user-friendly WYSIWYG editor that makes keeping websites up to date extremely intuitive. Editors can focus on the quality of their content without getting entangled in the technical side of maintaining a website.
This is very important for government organisations because Edit + would enable a team member (with the appropriate training and permissions) to easily insert pre-approved components into a webpage – without the time lag of seeking technical support.
Pages can be assembled from these building blocks according to the content. At the time of writing this article, the DTA was in the process of designing and building a new set of templates, based on the existing components.
Questions
If you've got any questions on setting up a website using the DTA templates, feel free to get in touch, or visit the DTA design template website.
