The challenge

PIPSC represents over 57,000 members and is the bargaining agent for dozens of groups. With a broad mandate, PIPSC provides information, education, advocacy, and representation. This means their site needs to serve the needs of a large and complex audience. A user on the PIPSC website might be an IT professional looking for information about their rights in the workplace, a member wanting to apply to be a steward, or PIPSC group administrator looking for a template. 

Their old site had become bloated with scattered content and confusing navigation. The IT department had become overburdened with the task of content management and site maintenance. Also, the connection between the old site and the organization’s Oracle member management database had become problematic and difficult to modify. The design needed to be responsive and flexible with an intuitive navigation.

PIPSC needed to greatly improve their content management workflow as well as opening it to other roles within the organization. Authors from different organizations needed to be able to create content, without the ability to make it live. 

 

UX Strategy for Engagement

We used collaborative, hands-on, user story mapping sessions with PIPSC stakeholders and our own team members to brainstorm the variety of audience groups. Story mapping is one of our favourite techniques for building consensus among stakeholders, transferring knowledge of the client’s domain to our team, and organizing information. 

By organizing the audience across a spectrum of engagement, from the infrequent visitor to contributor, we created ad hoc personas. The advantage of the story mapping technique in this situation is that we were able to identify, create, and confirm the personas with the client, in a single session. We also identified the core calls to action that needed to be prominent on the site.  

From there, we continued to use content auditing, story mapping and stakeholder interviews to create an information architecture that could handle the breadth and amount of content that PIPSC serves.

 

UI and UX Design 

In the new design, we reinforced the PIPSC brand through colour, typography, and layout. The PIPSC website needed to convey an organization that is knowledgeable, connected, professional, strong, and engaged. With strategic use of imagery, intuitive navigation, clear calls to action, a smooth search, and clean look and feel, we created a user experience that is intuitive and professional.

Open Source with Oracle integration

It was important to PIPSC that the technological framework be open-source. We deployed Drupal 8 and integrated ElasticSearch for advanced indexing capabilities.

Working with the PIPSC IT Staff, it was obvious that they had development skills in-house. Rather than have us do all of their Oracle-Drupal integration, we created a set of prototype “portlets” for the PIPSC team to use as a starting point for their own integration development.

 

Sub-sites

We developed a “sub-site” infrastructure within the Drupal 8 site for PIPSC groups to create their own sites-within-a-site. The sub-sites meant that groups can publish their own content online while PIPSC can maintain a consistent look and feel and provide a unified search experience across the sub-sites.

 

Find a Steward and Faceted search

Users can now search across the site by keyword, news type, publication date, and tag. Throughout the website, stand-alone portlet-powered searches facilitate targeted search functions in addition to the overall site search. These portlet search tools include Find a Steward and search PIPSC staff. The Find a Steward functionality is an important tool for visitors, so we included it in the global utility bar in the UI, putting it at the user’s fingertips.

 

Accessibility

PIPSC is an organization with 140+ staff and so needs to comply with the more rigorous requirements of the AODA. To ensure that the new site design and user experience are accessible to users of varying abilities, the design follows WCAG guidelines for web design and development. These guidelines include techniques for design principles and browser markup. The final design was crafted with accessible markup, accessible contrast and font sizes. 

 

Industrial’s impact

We pulled out our favourite tools from the toolbox for this project: close collaboration with stakeholders, UX strategy sessions, iterative development, and open-source technology. For the front-end user, the UX on the new site is intuitive, efficient and painless. For the content managers of the site, the CMS is user-friendly and practical. We removed pain points for IT staff at PIPSC by getting them on an infrastructure of modern technology.

 

You can visit the PIPSC site at pipsc.ca