TELUS Overview Redesign

Matching journey milestones with top actions

As part of TELUS’ Onboarding program, a key initiative was to redesign the Account Overview page, since it is the first place newly onboarded clients go to take action. With the redesign, clients easily found information specific to their stage of journey, without being overwhelmed by irrelevant content.

Discovery Audit

The redesign was initially started by our business product team, but was not resonating well with stakeholders and leadership. I was brought onto the project to help get the team back on track by providing hands-on support, gaining stakeholder alignment and building a go-to-market plan.

Understanding Current State

The unique thing about the Overview page, was that it was a page and not a flow; which meant it needed flexible content that adapted to a client’s account status, services and lifecycle stage.

My first step was to audit the existing experience, keeping track of what was different across devices, provinces, languages and segments. I made notes of what needed to remain unique, and what could be treated in the same way to future proof development effort.

What I uncovered was that 75% of the page content was marketing focused, not account focused. This caused little customer value above the scroll, plus no clear hierarchy. The current experience looked like a landing page of links, had mixed use of old and new design components and did not translate well on mobile. There were a lot of improvement opportunities to improve information architecture.

I then lead working sessions with product, marketing, tech, and business to size risks associated with not improving pain points. These metrics were supported by our COE leads who had similar data, and together we shared back to our leadership team.

Competitive Analysis

To better understand customer mental models and expectations, I spent time reviewing competitor experiences. The majority of experiences leveraged a widget style layout, presumably for the flexibility. Rogers had a unique layout that felt very minimal compared to Virgin Mobile’s busier account overview.

Through chats with my leadership team, we aligned on moving towards a modular layout design.

Discovery Workshop

Since the Overview page supported every team at TELUS, we needed to work cross-functionally to ensure we were accounting for all teams’ needs. I hosted a workshop with POs and tech leads across pods, where we listed out common product team pain points faced with the current Overview page. This surfaced so many features our teams needed to improve, or needed to be built in order for TELUS to innovate the customer experience.

User Research

Our Business Product team had planned on user testing a new page layout concept, but had not yet launched the test, and so we decided to add additional Consumer specific questions. The test plan included user criteria, hypothesis statements, interaction goals and open ended questions about the user’s needs. We ran two usability tests in total.

The first was a moderated test, guiding users through discovery questions and a review of the current business overview page. Next, we followed up with the new page layout concept.

The second user test was an unmoderated prototype walkthrough, where users were asked to share first impressions, comprehension of features and navigation of the new page layout concept. The layout included a new services section, surfaced additional action links, a notification bell icon, and Help & Support section.

From both usability tests, key insights were that customers tended not to read page content and instead just “clicked the green button”. Their top priority was to manage their bill, over all other actions. Customers understood page titles and navigation buttons, but found it difficult to know where specific actions were located on the site or within specific pages; and how to get there from the Overview page. Due to this, customers would stick to the flows they knew, and avoid exploring flows they didn’t know or find value in.

The insights gathered helped us confirm/disprove behavioural hypotheses, identify key pain paints, and inspire solution tactics, including a site-wide navigation redesign.

Delivery plan

Jira User Stories

I worked with delivery teams to plan Jira user stories, refining against Definitions of ready/done. Anything that was reprioritized would move to a review or backlog column for visibility.

Content Alignment

Based on discovery research, I hosted another workshop to plan which features the team could feasibly improve. To guide the workshop, I gave the team a goal statement: “Overview should be an overview of account management tasks”. This meant we should not place everything on overview, just a snapshot.

As a team we shared different content types, organizing into categories (promotions, alerts, etc.), and by urgency (immediate action, passive, etc.). This allowed our team to synthesize what content absolutely needed to be shown, what could be combined and/or hidden using progressive disclosure, and what could be completely removed from the Overview page.

Go-to-Market Planning

In a follow up session, we worked with our technology leads to plot features onto an Impact/Effort Matrix. This exercise informed how we would phase improvements for delivery.

New Component Exploration

Working together with the Business Product team designer, I lead working sessions where we researched what the most valuable features would look like if we were to re-imagine them in a new layout. This took some strategic convincing, since a MVP design concept had been created. I used data, usability test insights and design heuristic principles to position effort as an iteration vs redesign.

The Business Product team’s MVP concept, did not leverage updated design system components. I broke content into widgets and components, and split exploration effort amongst myself and the other designer. This helped us get closer to a modular layout concept. I then defined a purpose for each section, to guide content creation, and communicated constraints to our marketing and technology partners.

Quick Link and Help

Two critical changes I advocated for were an update of the Quick Links button and removal of the Help section. Quick actions should feel intuitive and immediate, but they were being hidden behind a button, which when clicked, opened a modal of more links. What was meant to feel quick, suddenly require much more mental investment than expected, and was being given the same level of prominence as core actions. Then, the dedicated Help section on Overview, presented like a secondary service claim instead of a first. Best-in-class user experiences engrain intuitive support near actions. Usability testing feedback echoed the same, with users not understanding what was within the “I would like to” button, and missed the help section below the scroll completely.

Account Toggle

Some of our customers had both a business and personal account, and needed a way to easily toggle between the two. The original B2B concept was to use two primary buttons placed above the hero section.

Based on the intended interaction, I proposed following industry standards of a switch button, since customers were switching accounts vs being brought to a new page/experience for MVP. The next phase of this functionality, was to use the Sign-in/out button in our top navigation bar, since it was a more intuitive location for clients who already used the button to sign in to their accounts.

Billing Widget

During an exercise of building out the possible states of our components, the “paid/no balance” bill state sparked a question of “why show the billing section if everything is paid?”.

I began reviewing all components and whether the content we deemed important, was important all of the time. This lead to a totally different experience direction.

New Direction

Myself and the Business Product team designer began exploring the art of possible. We leaned into the “snapshot only” concept and began stripping away all unnecessary information. Updates included: new navigation bar, new account toggle placement, notifications moved into the sub navigation bar opening drawer menus instead of modal overlays, dedicated top actions area for contextual messages, dynamic billing and services cards, and lastly, contextual offers that rotate regularly.

When I assessed the new layout, even with new sections added, we had improved the level of account related content by 34%, and increased value above the scroll!

Real-Time Insights

Sadly there was one feature that I would have loved to produce, but was not feasible with our current technology. The feature concept was for real-time insights around spending and usage behaviours. For example, if a client was tending to go over their usage, real time insight messaging would appear in the Services widget to let them know how they could avoid overage charges. The goal was to train our customers on good behaviours, ultimately increasing their lifetime value (quality) to our business.

Final Designs

We gave customers a fully personalized experience, that was as delightful as it was informative. Each widget had a pending, active, alert and paid state to perfectly match real-time account status. The new look helped complex information feel easy to digest, while iconography and colour guided customers to important information.

Pending state

As part of TELUS’ Onboarding strategy, newly onboarded clients had trouble taking next steps as they waited for their services to appear in their online account. Knowing this, I created a “pending” account view, that pushed customers to take non-service related actions as they waited – such as downloading the app and setting up two-factor authentication – via the new top actions area.

In the pending state, myself and my PM leads gained marketing and business buy-in to suppress all offers and promotions from the Overview page for the first 30 days of a client’s onboarding journey. This helped customers stay focused on account and service setup, without missing critical alerts. To compromise, we agreed to displaying three always-on promotions below the main billing and services widgets.

Active state

When a customer’s services were ready to display, the Services widget would update accordingly. If services were in good standing without overages, secondary action button styles were used. If services needed attention or had overages, service cards would update to use primary action buttons, prompting the customer to increase their usage bans and avoid extra charges. Services with alerts would be sorted to appear first in the customer’s services list, with remaining service cards hidden behind a carousel.

This new visual language keeps messaging direct without causing anxiety, which many users expressed feeling during usability testing. The top actions section also updates once clients have begun to complete actions, with a gamified engagement counter.

Paid state

Once a customer pays outstanding bills, their Billing widget messaging updates to congratulate them for paying. Action are hidden within the widget, but still accessible from the bill page if they desire.

Impact across teams

From the success of the Overview redesign, other teams were excited to follow a new page layout as well. For consistency across pages & platforms, our native app teams adopted the same widget style, colour system and logic as our web platform. Our billing team also followed suit, for their bill redesign project.