Updated @November 9, 2023
There are many ways to get started with Data Standards CX Open Source Assets. It all depends on your team’s needs and whether you are a developer or a designer (or somewhere in between).
About CX Open Source Assets
The Data Standards CX Open Source Assets contain wireframes that demonstrate optional examples for how to put key CDR requirements into effect. These wireframes reflect CX guidelines published elsewhere on this website, and were informed by research, CDR agency collaboration, community consultation, and best practice.
Open Source Assets are version controlled and have been internally and externally reviewed for accessibility compliance. Assets are partially conformant to Web Content Accessibility Guidelines (WCAG) 2.1 level AA.
All our assets build on the GOLD Design System; component rationale, accessibility support, and code documentation are available on the GOLD Design System website.
The CX Guidelines provide optional examples of key requirements and recommendations to help organisations build best practice consent models.
Wireframe designs do not necessarily prescribe how to put key requirements into effect, but the rules require CDR participants to have regard to the CX guidelines (see rules 4.10(1)(a)(ii) and 4.22(b)). Aligning with these guidelines is recommended to support a consistent and familiar CDR ecosystem that consumers can trust.
CDR Participants should also refer to the CDR Rules, data standards, and privacy guidelines for a complete view of obligations to facilitate compliance.
Design assets
Open source design assets contain wireframes and working prototypes that reflect various parts of the Consent Model.
Figma is used for wireframe creation and interactive prototyping.
Figma is a browser-based design and prototyping tool available on Mac and Windows. Figma makes it easy to:
- build and test components and wireframes,
- receive updates and share files, and
- collaborate in real-time with other teammates and stakeholders.
Figma files are available for download at the end of this page as well as on individual CX Guideline pages. Each file includes documentation layers that can provide more information and detailed design specifications for the build process. This includes:
- Wireframes with annotated rules, standards, and/or guidelines
- Focus order notes for ‘default example’. To help with WCAG Success Criterion, focus order notes highlight:
- the intended navigation sequence of content when operated from the keyboard (2.4.3: Focus Order)
- instances where link text is programatically determined to help users understand the purpose of each link (2.4.4: Link Purpose (In Context))
- instances where a text alternative should be provided for non-text content (1.1.1: Non Text Content)
- Working prototype with limited interactions and screens for simplicity
![Layers tab of left sidebar in Figma showing:
[1] the section in ‘All pages’ for clickable prototypes;
[2] the section in individual pages for ‘focus order notes’; and
[3] the section in individual pages for annotated rules, standards, and/or guidelines.](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/14032330-a080-43a0-9ed7-110238ee5edb/figma/w=1080,quality=80,fit=scale-down)
- Prerequisites: Sign up and create a free Figma Starter account.
- The open source asset files use the default system font for OSX, San Francisco. San Francisco is not usable in Figma by default, to use the typeface in Figma you have to download and install San Francisco.
- Download files from individual CX Guideline pages and open in Figma.
Figma has created some easy to follow guides and video tutorials that can help you through different processes.
- Setting up a Figma account - Guide | Video tutorial (3:26 mins)
- Understanding the Editor interface - Guides | Video tutorial (6:38 mins)
- Accessing local fonts - Guide
- Customising components - Guide | Video tutorial (3:55 mins)
- Using variants - Guide
- Prototype - Guide | Video tutorial (3:58 mins)
Coded assets
Open source coded assets contain the coded prototype that reflect the Consent Flow, showing the “happy path” for Consent, Authenticate and Authorise.
Storybook is used to build User Interface (UI) components to develop and update a library of components. Each UI component is built and tested to align with CX standards and accessibility criteria of the Consent Flow.
The use of Storybook enabled the development team to streamline page development, accessibility testing, and documentation. Azure DevOps was used to manage, build, test and deploy code to the dev-site for testing online through the Azure Web Apps.
Tools and technologies
- Node.js
- ReactJS
- Storybook
- Jest
- Azure DevOps
- Azure Web Apps
The coded prototype is a Proof Of Concept (POC) using a Single Page Application with React JS.
- It was built for mobile experiences and dimensions.
- It reflects v1.16.1 of .The Consent Flow
- It excludes connections to API’s and most external links.
Preview the CX Consent Flow POC on GitHub.
- CompareBanks – a fictional Accredited Data Recipient (ADR) with a banking product comparison application, where the consumer provides consent for their data to be shared in order to receive tailored products based on their banking data.
- Bank 1 – a fictional Data Holder (DH) used for the purpose of the scenario, where the consumer has requested to authorise disclosure of their banking data to CompareBanks.
Prerequisites: Download and install Node.js
- Download and unzip the prototype code:
- In the project directory,
- Run
npm installcommand to install all dependencies. - Run
npm startcommand to run the app in the development mode. Open http://localhost:3000 to view it in your browser. The page will reload when you make changes. You may also see any lint errors in the console.
| Item | File | Date released | Version introduced |
|---|---|---|---|
August 25, 2022 | 1.16.1 |
To view the storybook, run npm run storybook command to view all UI components used in this project outside the application in an isolated environment. Open http://localhost:6006 to view all stories in your browser.
To test all components, run npm test command to launch the test runner in the interactive watch mode.
Download Open Source Assets
This is a consolidated list of all latest version open source assets across the Consent Model. For additional information on the Consent Model, see the individual CX Guidelines pages in Consent, Authenticate, Authorise and Consent Management.
| Item | File | Link | Date released | Version introduced |
|---|---|---|---|---|
Consent: Collection and use consents | May 1, 2024 | 1.30.0 | ||
Consent: Disclosure consents, Accredited person disclosure consents | March 6, 2024 | 1.29.1 | ||
Consent: Amending consents | May 1, 2024 | 1.30.0 | ||
Consent: Disclosure consents, Trusted Adviser disclosure consents | March 6, 2024 | 1.29.1 | ||
Consent: Disclosure consents, Insight disclosure consents | March 6, 2024 | 1.29.1 | ||
May 1, 2024 | 1.30.0 | |||
Authenticate: Redirect with One Time Password | February 22, 2024 | 1.29.0 | ||
Authorise: Authorisation to disclose | February 22, 2024 | 1.29.0 | ||
Authorise: Amending authorisations | February 22, 2024 | 1.29.0 | ||
March 17, 2022 | 1.16.0 | |||
Consent management (Data recipient): Disclosure consents | May 1, 2024 | 1.30.0 | ||
Consent Management (Data recipient): Collection and use consents | March 6, 2024 | 1.29.1 | ||
Consent Management (Data recipient): Withdrawal | March 6, 2024 | 1.29.1 | ||
Consent management (Data holder): Authorisations | April 9, 2024 | 1.29.1 | ||
Consent management (Data holder): Withdrawal | April 9, 2024 | 1.29.1 | ||
June 8, 2022 | 1.17.0 | |||
June 8, 2022 | 1.17.0 | |||
June 8, 2022 | 1.17.0 |
For past versions, refer to
Quick links to CX Guidelines:
