Website Redesign for Visual Accessibility

As part of the Work Integrated Learning program (CDEV6000) at UNSW, I worked on a project in partnership with TPG Telecom. In this course, TPG Telecom provided a real-world brief, and students were tasked with developing a solution. The brief, Project AccessSphere, focuses on achieving 95% WCAG 2.2 compliance for TPG Telecom's products within the next five years, with the goal of ensuring accessibility for users of all abilities.

My team and I devised three primary solutions: a Design for Disability Framework, UX Guidelines, and a website redesign. This page is dedicated to our approach to the website redesign.

The Problem

Statistic and Potential Market

Proposed Solution

The project introduced three key solutions to improve accessibility:

Design for Disability Framework (DDF):

An organizational framework designed to ensure all practices are accessible. The DDF is built around three pillars:

People: Focusing on individuals responsible for implementing accessibility.
Tools: Identifying and utilizing resources to make products and practices accessible.
Procedures: Establishing SOPs to guarantee accessibility is integrated into workflows.

UX Guidelines for Visually Impaired Design:

A comprehensive guideline tailored for web and app design to enhance usability for visually impaired users.

Website Redesign for the TPG Broadband Homepage:

A complete redesign of the homepage, guided by the UX guidelines, to improve accessibility and user experience.

My Role

While I contributed to the development of the UX Guidelines (Solution 2) and led the Website Redesign (Solution 3), this article focuses on the process and outcomes of the TPG Broadband Homepage redesign. We chose the TPG Broadband website due to its status as TPG Telecom's highest revenue-generating platform, yet it holds the lowest accessibility score, according to TPG Telecom's internal analysis.

Accessibility Scope: Visual Impairments

For this project, our team chose to focus on visual impairments, as they are among the most common. This includes people who wear glasses, older people with gradually deteriorating vision, and those temporarily experiencing impaired vision due to external factors like bright sunlight, dark rooms, or pirates wearing an eye patch!

The specific visual impairments we focused on include:

Low vision, encompassing total blindness and varying degrees of sight loss
Colour blindness
Dyslexia
Cognitive load and epilepsy

This targeted approach allowed us to address a broad range of visual challenges, ensuring a more inclusive design for all users.

Accessibility Persona

As the lead for the website redesign and UX guidelines, I created the user persona. Rather than developing a traditional persona, I was inspired by The Accessibility Persona by Mark Boyes-Smith and Alicia Crowther, and chose to use that approach instead.

This persona shifts the focus from conventional aspects like 'challenges' and 'motivations' to accessibility needs, offering a more targeted framework for designing inclusive products. This approach is particularly useful for designers and stakeholders when developing accessible solutions.

Prototypes and Iterations

The process was as follows:

I began by analysing the original TPG Broadband website, focusing on its branding, layout, and organization of sections and elements.
I created a wireframe to map out the website's structure and key features.
In the first prototype, I introduced new elements, such as a product catalog (which was missing from the original site), details about their most popular service offerings, and additional contact options.
For the second prototype, I added a section for the TPG Broadband app, which was absent from the original site, and included TPG Broadband's awards to build trust with potential users.
In the final prototype, I refined the UI design, enhancing elements like shadows, colors, and other visual details to improve the overall aesthetic and user experience.

Preliminary Feedback

We conducted user interviews with 3 people: one with low vision, one with colour blindness, and one with dyslexia. Highlights of the feedback are as follows:

Final Website Redesign

Click here to see the Figma Prototype.

Visual improvements from the original website:

Larger text: This enhances readability for users with low vision, making section headers, prices, and other key information easier to read.
Improved contrast: A white background allows users to focus on the main elements and buttons. Buttons that prompt user interaction are highlighted in vibrant colors (purple and yellow), while less critical buttons are kept neutral in white.
Enhanced navigation: The website sections are organized in a story-like flow. After the landing page, users are introduced to the services TPG offers, setting expectations. Next, the address search feature encourages users to explore available services in their area. Finally, users can view the services and products they can purchase, along with pricing details.

My favorite aspects of this redesign are:

The hero/landing page: It’s vibrant and welcoming, offering a stark contrast to the original website's more subdued design.
The 'Plans' section: This new addition helps users easily understand the services TPG Broadband offers—something the original website lacked, leaving many users confused about the offerings.
The 'Contact' section: It highlights the diverse communication options available, making it accessible for all. Users with visual impairments can opt to call, users with auditory impairments can text/chat, and older users who are less familiar with technology can visit the nearest sales point. This section ensures accessibility for everyone.
The TPG Broadband app: The presentation is dynamic and three-dimensional, and the engaging copywriting invites users to explore more about the app.

Mobile Browser Redesign

Based on feedback from TPG Telecom which prioritises mobile browsers over desktop websites, I designed a mobile browser version of the website. This ensures responsiveness and accessibility for users who may not have access to laptops or computers.

While I believe that adaptive design offers a superior user experience compared to responsiveness, we opted for responsiveness in this project due to time constraints.

Click here to see the Figma prototype.

Redesign Results

We conducted a comparison between the current TPG Broadband website and the redesigned static mockup, revealing a 13% improvement in the accessibility score. The most significant enhancements were observed in page structure and visual contrast, ensuring a more user-friendly and inclusive design.

With additional time, further improvements could have been achieved by focusing on keyboard navigation and interactive element labeling in the HTML, enhancing the overall usability and accessibility of the website.

A Special Thanks to my Team! :)

My team, The Golden Orcas (Evan, Yanbing and Bruce), has been such an amazing group of people to work with. Coming from different backgrounds, we’ve learned so much from each other—not just about making digital products accessible, but about how to embed accessibility into an organization as a whole. I’m so grateful for this experience. Thank you, Golden Orcas!

TPG Telecom: Project AccessSphere

Page updated

Google Sites

Report abuse