Telus Brand Resources

The Telus Brand Resources is home to all guidelines, tools and asset libraries. It enables users to deliver consistent brand experiences, globally.

    • Design Strategy

    • Qualitative + Quantitative User Testing

    • UX Design

    • UI Design

    • Design System Contributor

    • Headless CMS Platform protected by SSO

    • Design System Components

    • Lillian Hsu - Product Manager

    • Andrew Lam - Lead Developer

    • Julia Dufresne - Developer

    • Elena Verling - Senior Product Designer

    • Chantel Chyb - Content Manager (EN)

    • Stéphanie Parent - Content Manager (FR)

    • Clint Tham - Information Architect

  • TELUS employees, contractors, vendors, agencies & global TELUS affiliated companies.

Challenges

  • Low Discoverability

    Not all content was available or accessible to everyone.

  • High Costs

    High costs and maintenance of many sites like Drupal.

  • Not Inclusive

    Standards were not available in french, only english.

  • High Security Risks

    No SSO protection meant high security and data breaches.

  • Brand Issues

    Telus partners were not executing brand or legal-compliant campaigns.

  • Scalability

    The original Telus global navigation doesn’t scale well for an information heavy site like this.

Information architecture

Using pre-determined categories, a sitemap was created using a card sort and tree test.

First Click Test

Once my content structure made sense to the user, I then moved on to a first click test with two prototypes. My objective was to investigate whether it made more sense to go with:

  • Version A: mirror the category titles as it appears in the CMS, using ‘Standard’, ‘Guide’ & ‘Tool’, or

  • Version B: use category titles users are familiar with, like Brand, Design & Technology.

Prompt example: “You need to find the correct logo to use for a print bilingual project. Where would you click on this page?”

Winner: Version B 70% success rate

Moderated usability testing

Designs were validated through moderated live conversation interviews with high fidelity prototypes. For this we had 6 tasks, a script of questions and 19 users.

Results:

  • Users preferred the search bar vs menu

  • Users didn’t mind scrolling

Constraints

There were definitely constraints and blockers as this product progressed:

  • Contentful: working closely with the devs to make sure designs translated across to Contentful.

  • Contentful: designing the internal portal so it’s easy for a non-designer to add content.

  • Stakeholders: too many layers of sign off.

  • Stakeholders: little to no interest in user testing.

  • Stakeholders: new navigation was not embraced.

Mobile UI

  • Homepage

    Homepage is kept intentionally light, as the main objective is to enable users to explore by category. Lower priority cards sit beneath this with a horizontal scroll.

  • New card component

    Lower priority cards scroll horizontally to reduce visual debt.

  • Menu style

    To ensure the new navigation style was approved by stakeholders, I kept it consistent with the e-commerce nav. This is why it appears in a hamburger menu top right.

  • Drawer effect

    All nav items open in a drawer effect the deeper you click through.

  • Standard example

    We know from testing that our user have a preference for search bars, so each category page has a prominent search bar. Below are a list of Brand guidelines that are protected by SSO, so the user will need to log in at this point. Once logged in, those lock icons disappear, and the user can browse freely.

  • Guideline example

    All guideline pages follow the same layout. Small volume of content is always complimented with relevant imagery, allowing users to skim through content quickly.

  • Content platform styling

    If a user adds a new guideline through Contentful, the pre-styled blocks in the back end means no matter what, the UI will always remain consistent on the outside.

  • Content styling

    Text will always appear with the correct A11Y header order, and images will always sit within a grey container, which re-arranges and resizes for mobile.

  • Global footer

    My updated footer design was adopted by the Global Navigation team, which saved a huge amount of time, money and effort across teams. This component was added to our design system, and is used globally across all Telus sites.

89% of the total web visits are currently desktop

Desktop Figma Prototype

Business Impact

  • High Discoverability

    Users of the site are 10x more likely to find what they need.

  • Low Cost & Maintenance

    $112,608 per annum is saved on hosting costs.

  • Inclusive Learning

    All standards are now available in both English & French, so it is more inclusive.

  • 100% Security

    SSO protection was a success with no security issues or data breaches to date.

  • Brand & Legal Compliant

    TELUS partners are now enabled to execute brand & legal-compliant campaigns.

  • 100% Scalable

    New navigation is 100% scalable. Elements of my design have been added to the e-commerce global Telus nav.

Reflections

    • Yes: we hit our original OKRs

    • Yes: I had personal growth as a designer

    • Yes: adoption was high

    • No: awareness of the product is low, guidelines have migrated.

    • Focus on product growth & retention

    • Increase visibility of product across TELUS

    • I acquired lots of hard and soft skills

    • I don’t feel empowered as a designer if there are too many layers of sign off