Case Study: CCTS Multilingual WordPress Website

Client Background

About the client

The CCTS is an independent not-for-profit organization that works with telecommunications service providers and is dedicated to resolving customer complaints in a fair manner. For the last two decades, they have been instrumental in helping consumers with issues related to billing, contract disputes, service delivery and more.

Help consumers with their telecommunications service disputes
Have resolved more than 200,000 consumer complaints over the last 20 years
Work with over 400 service providers
Produce annual reports to provide a a snapshot of the industry each year

Visit Website

Where We Started

The challenge

The CCTS website was originally designed to facilitate communications between Canadian telecom and television providers and the general public over any disputes. Originally designed with only a focus on legal requirements, the original CCTS website was difficult to use for most consumers.

An unclear purpose of the organization
A sub-par user experience with the main customer complaint form
Difficult and confusing navigational elements
Poor readability of the mobile version of the website
Accessibility issues with the website not conforming to WCAG 2.0 Level AA
On-site searches returned irrelevant search results

How We Collaborated

Design process

From a purely aesthetic standpoint, the design of the CCTS website was somewhat challenging. On one hand, we had to work with the colour palette from their branding guidelines: a sky blue and black. However, we also needed to build a website that was compliant with Level AA of the WCAG (as opposed to Level A, which we normally conform our websites to).

Unfortunately, the corporate colours didn’t presented limitations it came to creating a design within the more stringent contrast requirements of WCAG 2.0 Level AA. Consulting with the client, we explored the possibility of adding a secondary colour palette to their branding guideline.

So we took on the task of finding additional colours that complimented their existing brand colours, without overshadowing them. We ended up selecting two additional colours: a navy blue and an orange-red.

With this secondary palette approved by the client, we were afforded more flexibility with the design options.

1. Design brief

We documented the client’s design preferences and requirements, making sure everything was in line with their project goals.

2. Wireframe

Prior to any high fidelity mockups being created, we outlined the major elements that the page would be made up with.

3. Initial concept

The initial design highlighted the main purposes of CCTS and ensured that their complaint process was highly visible.

4. Final design

In the final design, the overall layout of the initial concept was maintained. Only minor stylistic revisions were required.

The Results

Our solution

Comprehensive templating system

Along with the Home page, a complete set of flexible sub-page templates were designed. This included:

Standard content pages
Section overview pages
News listings with categories and individual article pages
Careers opportunities listings page
Reports document repository
Search results

Multilingual support

In order to provide a multilingual website, the designs were converted into a custom WordPress theme that took advantage of the popular WPML plugin. This allowed both an English and a French version of each web page to exist within the same content management system. While the website allows visitors to select their preferred language, the system is intelligent and will display the website in the language chosen in the user’s browser settings.

Secure content area

One more involved change request made during the course of the project involved us creating a members-only, password protected page. The page provided telecommunications service providers with private news and documents. Utilizing a single sign-on approach, it also allowed them to directly interface with their custom third-party complaints resolution system.