top of page






Design System


Tris and Srishti

Review screen

A review screen allows customers to check their answers before submitting information to a service.
GEL reached a point where we were transitioning from patterns to creating a page in our design system. We faced a challenge with the review screen, which is the last step before confirmation. It's where users get to double-check all their answers before hitting submit. This marked our first page design for SNSW.

Gathered and analysed information to gain insights and understanding about various designs of review screens within the SNSW.
Frame 2.jpg
Purpose of review screen
  • The purpose of a review screen is to give users the opportunity to check the details they have provided before form submission.

  • To reduce errors in form submission.

Must haves
  • Information should be laid out clearly in order to allow users to quickly review their answers.

  • It should also be easy for users to make edits to their answers while reviewing.

  • Related / similar content sections should be grouped together.

  • There should be a visual hierarchy.

  • Consistent but flexible approach

  • Guidance for various transactions/application rather than a rigid pattern

Internal examples review
  • Inconsistency be tween similar transactions

  • Accessibility issues - inaccessible links

  • Inconsistent page layouts

External review and best practices
  • Referred and some accessibility resources


The ideation process kicked off with recommendations and a fundamental page structure derived from observations and secondary research. This was presented to the GEL leadership team, and feedback was gathered from various teams.
image 1.png


Taking into account the team's feedback and considerations for design and accessibility, we finalised the structure of the page.

Structure of the page

image 2.png
  1. The header shows the customer what step they’re up to. 

  2. The transaction summary is optional. This space is to relay critical information only. 

  3. Show the applicant’s details (optional) if there’s a chance of error, such as when applying on behalf of another person. 

  4. Each data group shows a list of all questions and answers within that group. It should be listed in the order the customer completed them and include an edit button at the end.

  5. The edit button takes the customer to the corresponding section in the form so users can change their answers.

  6. The declaration section is optional. This is where the customer can give consent legally to submitting their application. This section can be used to include terms and conditions, or other policies that need consent for from the customer.

  7. The submit button sends the application for processing.

Accessibility considerations
  • If a declaration checkbox is included, links taking the customer to another page or document shouldn’t be within the checkbox content area. This is because links within a checkbox can’t be interpreted by a screen reader. Instead, consider a separate page just before the review screen.

  • When there are multiple data groups on a review page, the edit button should describe the section the customer is editing. 

bottom of page