Creating a new overview page for users to view and manage their mobility accounts on a consolidated page to improve findability for self-serve information and actions.
Client
Role
Lead designer
Year
2025
Platform
Responsive web
Background
TELUS mobility users currently access information about their plans and device actions in a fragmented user experience. Currently, tabs separate the information structure and other key account info—like data usage and roaming—resides elsewhere, reducing efficiency. The page was one of the last legacy pages using the outdated TELUS Design System.
As the Lead Designer, I partnered with a Content Strategy Lead to reimagine this page—developing a long-term strategy and applying consistent IA and design system patterns used across My TELUS.
Key User Insights
Past user interviews completed for the My TELUS pages revealed that users visiting the Plans & Devices page often overlooked tabs, delayed locating actions, and felt frustrated by outdated visuals.
Design goals
By leveraging these user insights, our main goal of the redesign was to improve the efficiency for customers looking to review and manage their mobility account.
1
Consolidate essential info on one page
2
Make self-serve actions more findable
3
Transition to new design system with updated UI
Strategy & Layout Exploration
The main exploration we first wanted to understand was how customers viewed the information architecture of their mobility accounts. This would inform what main sections users expected to see where, and how they could get key information and if needed, apply any changes to their account.
Our first iterations explore how the Mobility page should interact - should it be a launching pad to more detailed views and actions, or should key information and actions be consolidated on one page? We mapped these two versions of the homepage, before presenting the low-fidelity wireframes and site map to our stakeholders, which including various managers of the My TELUS Web experiences.
V1 Sitemap: Overview as a launch pad into subpages for more details
V2 Sitemap : Overview as a page to consolidate all information
V1 Wireframes: Overview as a launch pad into subpages for more details
V2 Wireframes: Overview as a page to consolidate all information
Refining the design
After reviewing with My TELUS stakeholders, we were aligned with Version 2's simplistic approach of consolidating all information. The design aligned with the goal of improving findability of both information and actions by displaying it all on one screen, and reducing the amount of taps/clicks to achieve their goals.
We refined the site map, and outlined the different modules on the page. Within each module, we define the information and self-serve actions to group together by related themes, as well as the potential for personalization such as offers.
Usability Testing & Iteration
Once the designs were refined to high-fidelity, we conducted an unmoderated A/B test with our current experience (A) vs. the redesigned experience (B). The users had the same tasks to complete, and to reduce bias, half the participants started with testing Prototype A, while the other half started with Prototype B.
Overall, 78% of participants preferred our redesign, highlighting the two-column layout, clean display of information and consolidated single page. These aspects improved the readibility of the page, as well as the findability for main information, sub-information, and call-to-actions.
However, the remaining participants preferred the amount of detail on the Plans section of our current experience (A), citing that they want to know what they are paying for in full detail. As a result, we revised the final designs to include an option to view more plan details if a user desired.
“I prefer Design B, as I can see both plan and device details together and don’t have to switch between tabs. Less clicks needed, saves time.”
“I prefer Design B as it groups the information in a clean way and easier to find.”
“B. More modern and I like the two buckets of information. B made it easier to find information because I didn’t have to change tabs.”
“I wish I could hybrid these two. I like B’s layout, but I like A’s level of information. For me, the level of information is more important so I’m going to pick Design A - but only for that reason. If all this information could be on B’s page, I would pick that one.”
Final launched designs
Above-the-Fold clarity
Aligning with the name of the page, users can see both their plan and device information simultaneously. These are the key high-level sections that customers look for when landing on the page. With our new sections, related self-serve actions are grouped accordingly, making it intuitive for users when managing their plan and device.
Reducing cognitive load with modals
To reduce cognitive load and visual clutter, the important high level information is displayed on screen and modal links give users the option to view more details. When opened, the modals will highlight more detailed explanations and breakdowns of their plan, and device financing.
Logical grouping for self-serve actions
Unlike the current design, the self service actions are grouped into the plan or device section in order to keep related information and actions together. Any self-serve actions that are more generalized are grouped together in the Quick Actions section in the center of the screen. With the position and iconography, the individual links stand out within the page.
Promoting offers
At the bottom of the screen, we highlighted offers and promotions available to a broad customer audience. This allows us to push sales towards new products and features to customers who are already looking to review or optimize their existing mobile plan and device.
Takeaway & Future Vision
The project was long awaited, as our team is typically funded for GTM projects and rarely has time and resources to dedicate to optimizations. However, the upgrade to both the design system and information architecture of the page will provide more clarity for users looking to understand the different components of their mobility account. Because of how outdated the page was, the Content Lead and I were able to work with a blue-sky approach to imagine what the new page could be like from the ground up.
Some improvements that were out of scope for the project for the MVP, but will be explored in future phases include:
Adding Usage and Travel modules to the page: The complexities of retrieving and surfacing the information was brought up during prioritization.
Creating a notification center for statuses and personalized promotions: The center would reduce potential clutter on screen, but there is no precedent for a design system component that behaves similarly.
For a more detailed presentation on the design strategy and process for this project, please reach out.