Built using a lightning-fast, future-focused tech stack, the new Cancer Council SA website provides a seamless user experience, and enables the CCSA team to design valuable cancer information pages with a flexible yet simple-to-use CMS.
The Cancer Council SA (CCSA) team collaborated in a digital strategy workshop, to understand the views and needs of their web users and how these needs map to the business requirements of CCSA.
Desk-based research, including heatmaps to measure user behaviour, a competitor review and Google Analytics metrics, helped to inform the activities required for the workshop.
In departmental groups, the team noted down the challenges they were facing in relation to the website, as well as the goals they had for the new site. After a round of prioritisation, the groups shared their top three with the wider room to encourage a shared understanding of the project goals.
Next, key user scenarios were explored, with teams delving into the minds of their users and examining the tasks they might need to complete on the website. These key user scenarios formed the basis of the website ideation process, with the objective to help their key users complete the required tasks quickly and easily.
While quantitative website data can provide a good understanding of what might be happening on a website, it does not provide feedback on why.
Online user testing of the previous information architecture structure was instrumental in ensuring that the new information architecture was organised in a logical, human-centric way, seeking to both understand the needs of both the organisation and its beneficiaries.
The task success rate on the old navigation structure was approximately 40%, with a number of users having trouble with the page depth of the website and opting to leave the site in favour of Google to search for the information they require.
After reorganising the pages in line with the feedback we collected from users, three variants of a new architecture were iteratively tested and revised. The task success rate on the final version of the navigation strategy increased to almost 70%.
Qualitative, in-person user testing was completed to identify common issues that people were having with content structures and interactive elements. This feedback was used to inform the wireframes, functionality and creative design.
Our design strategists performed an audit of the most commonly used screen resolutions, prioritising these to create a responsive design. The team made use of REM scaling, to ensure design consistency across all screen sizes.
Cancer Council SA’s style guide served as inspiration for the modern, minimal design, with feature photography and clear, clean typography. White space was used to enhance scannability of the information-rich web pages.
The website was custom-built using the JAMStack methodology, in React.js and using WordPress as the CMS. Previous barriers to using JAMStack, such as delayed content delivery and barriers with SEO, were overcome by the team collaborating on an entirely new process for website builds.
Using a JAMStack approach for the website build resulted in a number of key benefits for not only Cancer Council SA, but also for users:
WordPress was selected as the CMS in order to provide an intuitive, flexible experience for the Cancer Council SA team. The CMS enables content administrators to easily add and update forms, cancer information and resources – something they previously found quite labour-intensive.
The organic search strategy of the website was also a key consideration in the design and build process. On a normal React Single Page App (SPA), the HTML is incredibly lean – resulting in incredibly fast load times, but zero signals to search engines, users and other bots about the content of the site. By using a build pipeline and server-side rendering (SSR), we are able to render these pages early and deliver pre-rendered markup. This is much easier for a search engine to scan.
A separate preview site also enables CMS users to see their draft content immediately, without having to wait for content to deploy to the live website – previously a barrier to the development of static websites.
Get in touch with our specialist team of UX strategists, web designers and developers.
© 2020 atomix web & creative studio