Reinventing public transit in the digital era

Context

Before our project began, the RTC used different platforms to communicate with its customers:

• a website
• a mobile site
• a mobile app
• screens displaying information
• information terminals at stops
• text messaging

As the majority of customers have rapidly migrated to digital tools, the RTC intended to standardize the information on all of its platforms to meet user expectations regardless of what tool they use.

One important objective was to create an optimal, unified user experience that would meet the needs of the RTC’s various customers. Find out how we were able to rise to the challenge and enhance the mobile experience using co-creation.

Our project specifically consisted in redesigning the RTC’s management systems. To do so, we had to develop a complex web platform that was responsive to all devices and screens. For the experience to be successful, we had to offer users an up-to-date visual while complying with accessibility standards. On the administrative side, the goal was to simplify the RTC’s management of content, such as real-time schedules and routes.

The objectives included:

• Upgrading the content management system (CMS) so that all website content could be distributed to all of the RTC’s tools
• Integrating the RTC’s existing systems and application modules
• Reviewing the entire site’s information architecture
• Conducting a full review of the site’s graphic design in order to make it responsive
• Creating smooth transitions with respect to the site’s visual appearance
• Suggesting ways to improve ergonomics and content management

We supported the company throughout the process of co-creating, developing and updating its website. Our support provided the RTC with a range of tools to assess the user experience at different levels and points during the design process.

Technologies

• Drupal (headless)
• Vue.js
• Nuxt.js

Our solution 

Leveraging technology to focus on user experience

To meet the RTC’s technological needs, we implemented the innovative Drupal content management system (CMS), an open-source software that is the second most widely used CMS after WordPress. Drupal is a solution that focuses on customization and the user experience. It boasts numerous advantages, including:

• Lending itself well to content that requires a high degree of durability
• Offering robust, fast and agile modules for web development
• Offering additional modules, such as tools for CRM, security, surveys, login modules, backup, performance, social media management, SEO, etc.
• Being known for its strong security measures (many websites use Drupal technology, including the NASA site)

Its simple integration with other systems

It was essential that the RTC’s new content management system would be able to integrate easily with the organization’s other systems. Drupal can handle this type of challenge thanks to its many APIs, including one that makes it possible to build RESTful Web services. In fact, ever since Drupal 8, Drupal’s architecture has been increasingly based on APIs. That meant that we were able to connect several systems and develop import scripts. We were also able to develop a custom administration panel while benefiting from the security and robustness that comes with Drupal.

In short, Drupal provides a scalable, flexible and high-performance platform. It can be configured to meet the needs of the entire organization and individual departments simultaneously, which made it easier to deliver the requested customization. With its new editing functionalities and the integrated WYSIWYG editor, CKEditor, Drupal makes it easy to create and edit content at will.

A modern and dynamic experience

We implemented Vue.js and Nuxt.js for the front-end framework. These technologies enabled us to deliver a modern and dynamic experience that approaches that of an application. As a result, our digital solution met the RTC’s technical requirements and enhanced the user experience.

Testing the solution

We conducted several tests at different levels and stages of development in order to create the most optimal user experience possible. A card sorting process was used to define the information architecture and make navigation as intuitive as possible.

Next, we also:

• Performed user tests and accessibility tests on the functional prototype
• Conducted user testing and an accessibility audit on the ALPHA and BETA versions
• Conducted public user testing in BETA mode over a 12-week period prior to the official launch
• Provided security testing and penetration testing
• Provided load tests

Last, we conducted accessibility tests. As several groups were already working closely with the RTC on the accessibility of its services, the RTC wanted to involve these groups in the website redesign process.

Practical tests based on cases of real-life use were carried out in collaboration with representatives of groups of people with physical, visual, auditory or cognitive limitations or disabilities. We took the time to observe each of the specific challenges encountered, which enabled us to find appropriate solutions. As a result, we were sure that the solution was truly able to meet the needs of all users.

The results

Simplifying the mobile experience

We wanted to deliver a project that met all of our client’s business objectives while also providing users with added value via an optimal, intuitive experience. The RTC also wanted to avoid throwing off its regular customers and minimize the impact of any changes on them.

To enhance the user experience on the RTC mobile site, we did the following:

• Proposed clear, comprehensible titles and wording
• Came up with intuitive submenu navigation
• Created title levels that are easier to navigate and spot
• Developed a seamless transition of the overall experience, despite its concrete differences
• Created an ergonomic interface and a functional, easy-to-understand design with enhanced discoverability
• Proposed an information architecture with content groupings that are more natural and intuitive
• Designed a content structure for the pages
• Developed appropriate, meaningful icons
• Created more effective and meaningful content
• Proposed a breadcrumb trail

Positive results for all users

The new website had many positive impacts on customers. The main benefits were:

• The ability to use a mobile phone to access all information directly on the website
• Site is now easy to use when travelling
• Easy-to-spot, clear information structure in the fare schedule
• Quick access to customer service available directly through the website
• An experience that is accessible to all, including those with cognitive or physical disabilities
• Faster, more efficient site
• Effective search tool with relevant results

The overall performance of the platform makes it pleasant for users to navigate the RTC website from their mobile phones.

It’s also important to mention that the various administrative users of the platform and its content also reaped benefits. In fact, we succeeded in meeting several organizational needs. For example, content can be updated more efficiently and the fact that information is now centralized has improved the performance of the RTC’s internal team. In addition, automating certain tasks has freed up valuable human capital to work on more strategic tasks.

Making the user experience accessible

Accessibility is an important issue for the RTC with good reason: all of its customers need to be included. What does accessibility mean from a UX perspective? An accessible user experience makes it easier for all users to navigate and use a website. That means that people with physical, visual, auditory or cognitive limitations or disabilities are not only able to access the website but can also understand it, navigate it and interact with it with ease.

To achieve this level of accessibility, we implemented several technical elements, including:

• Semantic content structure, which makes it easier to understand and use content via assistive technology, such as screen readers
• A page structure and mechanisms that allow for keyboard navigation
• Forms designed to make it easy to enter, verify and confirm the submission of information
• Iconography that is easy to spot in order to compensate for the reading difficulties faced by some users
• Larger font for easier reading and the option to enlarge text by up to 200%
• A robust page structure that can be used via all popular browsers, mobile devices and assistive technology
• Colour contrasts that meet AA accessibility standards

Practical tests based on real-life use enabled us to verify the mechanisms we put in place to comply with accessibility standards and to illustrate how effective the pages are. They also brought some improvements to light that simplified some of the website’s functionalities to make them even more effective.

That’s a wrap!

The key to stepping up to the challenge in this assignment was to put the user at the centre of the project. When a project revolves around people, there are no unpleasant surprises at launch time! By using various brainstorming and strategy development workshops along with user participation, we were able to to create a complete, enjoyable user experience. And of course, that experience is supported by a robust, high-performance platform. Another plus is that the teams at Libéo and the RTC collaborated in an extremely engaged, transparent and beneficial manner.

Redesigning a website may seem intimidating. Of course, such major changes directly affect the company and its users. On the other hand, the process significantly improves the quality of the user experience, as well as user engagement and satisfaction. . Don’t worry—with our skilled and experienced team, redesigning your website can be a seamless, positive change!