TELUS WEBSITE REDESIGN
A partial redesign of the Telus website to introduce a new feature allowing users to compare plans.
CONTEXT
A partial redesign of the Telus website to introduce a new feature that allows users to compare phone plans and bundles within the website making it easier for users to choose a plan best suited for them.
OVERVIEW
-
User Research
-
Proto & User Persona
-
Heuristic Evaluation
-
Affinity Diagram
-
Empathy Map
-
User Insight & Problem Statement
-
How Might We...?
-
Feature Prioritization Matrix
-
Value Proposition
-
Storyboard
-
Competitor Analysis
-
User Flow
-
Wireframing
-
Prototyping
-
A/B Testing
-
Iteration
-
Group Project
Designed in 3 weeks
(December, 2022)
PROBLEM
Users who visit their service providers website to compare phone plans find it difficult to do so as plans appear limited and/or hidden, and often don't include exactly what they need for the right price. Users would like to easily find a plan that meets their needs while also getting the best deal.
SOLUTION
Conduct user research to understand exactly what users are looking for and what they need in order to optimize the navigation system and user flow to facilitate a smooth, easy, and simple experience for users. This will consist of:
-
Creating a side-by-side comparison of plans and bundles to reinforce that users are getting the best deal(s) for them
-
Effectively summarizing and visually laying out information for readability
-
Optimizing the navigation and user flow to guide users to information efficiently
-
Pair with succinct and clear summaries to lessen the heavy text while still leaving crucial information
RESEARCH
HEURISTIC EVALUATION
My group and I began our user research by conducting a heuristic evaluation of some pages on the Telus website. Some important things we noticed were:
-
Hero image/banner needs an update
-
Interactions: hover states are inconsistent, ability to interact is unclear
-
Product/plan cards: inaccessible/
hidden information on plans that are not part of the sale/promotions
-
Colour, images,
contrast all meet
accessibility
requirements
-
Breadcrumbs are
accessible
PROTO-PERSONA
My team and I then moved onto creating a proto-persona in order to determine what kind of user(s) we felt would be most likely to visit their service providers website and why.
Some key points we included were:
-
someone who might need a lot of features when choosing a plan
-
saving money - being mindful of expenses and finances
-
someone who prefers to look at all plan options online
-
someone who wants to use the same provider for all services
-
someone who likes animals
After we had a general idea of our user, we began developing a survey to share with the public to acquire a better understanding of what our user(s) might be looking for from their service providers, from their current providers website, what might influence them to switch providers, etc.
SURVEY RESULTS
Some of our key takeaways included:
-
Top 3 major competitors are Rogers, Bell & Freedom
-
Majority of users visit their service providers website to look at plans
-
Almost all users felt a better plan and/or price would convince them to switch providers
COMPETITOR ANALYSIS
Next, we conducted a competitor analysis to determine and understand what other service providers might be doing the same, similarly, and/or differently.
Key Takeaways:
-
Direct competitors all have consistent branding
-
At least half of competitors lack icons
-
All competitors have simple + clear navigation
-
All competitors display deals on the homepage
USER INSIGHTS & INTERVIEWS
For the final stage of our user research, my group and I created a guerilla testing plan and each conducted a total of 4 tests to understand and see where or if users were struggling or having difficulty within the Telus website. We then recorded these results in addition to what we discovered from our survey and organized all of the data into an affinity diagram.
INTERVIEW #1
INTERVIEW #2
INTERVIEW #3
INTERVIEW #4
SURVEY RESULTS
AFFINITY DIAGRAM
ANALYSIS
Now that we had completed our user research, we had developed a better understanding of our user(s) and were able to create a user persona and empathy map. These allowed us to define our target user(s) along with their goals, likes, habits, and pains.
USER PERSONA
EMPATHY MAP
Key Takeaways:
-
Users see too many ads on the homepage
-
Users hear that other providers offer more affordable plans
-
Users question where to find specific information and therefore just guess
-
Users feel there are limited plan options
At this time, we were also able to establish our user insight and problem statement based on our user research.
PROBLEM STATEMENT
Our user who is reliant on technology, needs to be able to easily compare features and stay within budget when looking for a phone plan.
Our solution should allow users to compare different phone plans within Telus by creating a plan comparison feature and bundle options.
USER INSIGHT
Lucas, a young computer software salesman, needs to be able to clearly compare phone plans on his service providers website, to get the most out of his own plan while also saving money.
HOW MIGHT WE...?
For our final stage of analysis, we created some "How Might We...?" questions to clarify exactly what we wanted to target in our website redesign and figure out how we might approach these goals.
How might we...
Help users to find the right plan quickly?
Improve the navigation system to avoid clutter on top of the page?
Organize promotions, bundles, and deals to make them more accessible?
Change the navigation system so users can easily find information on the phone recycling program?
IDEATION
FEATURE PRIORITIZATION MATRIX
After answering our "How Might We...?" questions, we recorded all potential solutions and sorted them into a feature prioritization matrix in order to determine which features are top priority for both our users and for Telus. We decided to start with what we determined were the top 4 crucial tasks: improving the main navigation bar, adding images and icons to improve accessibility, re-labelling categories and sections to improve accessibility of information, and creating a new feature that compares plans directly and also offers bundles to make it easier for users to get access to existing offers, services, and plans.
VALUE PROPOSITION
We then created a value proposition canvas to outline how our new design and feature can target users wants, and needs, while also relieving their pains and frustrations. By the end of this stage was when we realized that rather than creating clever marketing strategies, our main focus needed to be finding a way to communicate the existing products through our design - which also needed to be clear, simple, and accessible.
STORYBOARD
We then created a storyboard to show how simply our user could interact with our new design and feature on the Telus website to easily choose a plan best suited for them.
CARD SORTING
Next we moved onto card sorting to address the organization and order of content on the homepage. Once this process was done, we noticed that there wasn't any misplaced information across categories; however, we thought it would be better to split the products and services items to make it easier for users to search for plans and phones.
USER FLOW
We also created a user flow that outlines the process in which all users would go through if they choose the Build Your Own Plan feature. Through 4 simple questions, the user is directed to a plan that best suits their needs.
PROTOTYPING
Once we moved onto prototyping, we created our UI style guide. We decided to keep everything original and true to the Telus brand. The only difference was ensuring all UI elements were continuous and consistent throughout the site, as this was something we noticed that was lacking when we conducted our heuristic evaluation back in the research phase.
UI STYLE GUIDE
LOW-FIDELITY WIREFRAMES
We then created low-fidelity wireframes from for some of our screens to ensure we were on the righ track with simplicity, consistency, and accessibility.
HOMEPAGE
BUNDLES SCREEN
HOMEPAGE WITH QUESTIONNAIRE
SUMMARY SCREEN
MID-FIDELITY WIREFRAMES
Once we knew what we wanted our design layout to look like, we were ready to create our mid-fidelity wireframes which we would later use for user testing. Since we created 2 design flows (see A/B Testing below for more info), we also created 2 prototypes. Some of the mid-fidelity wireframes below were only included in 1 of the prototypes.
HOMEPAGE
HOMEPAGE WITH QUESTIONNAIRE 2
HOMEPAGE WITH QUESTIONNAIRE 4
BUNDLES SCREEN
HOMEPAGE WITH QUESTIONNAIRE
HOMEPAGE WITH QUESTIONNAIRE 3
HOMEPAGE WITH QUESTIONNAIRE 5
SUMMARY SCREEN
RESULTS SCREEN 1: TALK, TEXT & DATA
RESULTS SCREEN 2: TALK & TEXT
RESULTS SCREEN 3: UNLIMITED PLANS
USER TESTING
A/B TESTING
Before we began user testing, we had a few design ideas in mind that we needed to test. Some of the questions we had were:
-
Do we want our users to complete the questionnaire feature and then be immediately directed to the bundles screen?
-
Would we need a screen in between? Would we need multiple screens in between?
-
How do we want to introduce the bundles after the user had taken a questionnaire regarding plans?
-
Is this confusing for our user(s)?
-
Do we need to show our user(s) what plan options are best suited for them before showing them bundle options?
In order to answer these questions, we came up with 2 design solutions; Design Flow A & Design Flow B. The difference between the 2 flows is the addition of the "Recommended Plan(s)" Page in Design Flow B and the option for the user to select their preferred plan from their results before being directed to the Bundles Page. These results are tailored to the user and are based on how they responded in the “Build Your Own Plan” questionnaire. In order to show the difference between the 2 design flows, we used our original user flow and then created a second user flow to illustrate Design Flow B.
DESIGN FLOW A
DESIGN FLOW B
.jpg)
We then created prototypes that followed each of the design flows. After this, we conducted 4 unmoderated A/B tests. These tests provided us with very valuable feedback and revealed that Design Flow B was highly preferred.
ITERATIONS
Now that we knew which design flow worked best, we needed to make other necessary UX/UI element changes that were highlighted through A/B Testing. These included:
-
Slowing down the speed of our hero image/banner animation
-
Changing the size of our pop-up questionnaire + adding an exit button
-
Adding a landing page to the questionnaire
ITERATION #1
HOMEPAGE BEFORE
HERO IMAGE/BANNER ANIMATION
HOMEPAGE AFTER
WHY WE CHANGED IT:
Initially, we had an animation running as our hero image/banner on the homepage. After testing, we discovered the animation was too fast and needed to be slowed down. Instead of changing the speed, we opted to remove the animation entirely. We felt the animation took away from our feature and made it difficult to notice.
We also added a small clickable option underneath our "Start Here" call to action button. This allows users to skip the questionnaire altogether and go straight to the bundles page.
ITERATION #2
POP-UP QUESTIONNAIRE BEFORE
POP-UP QUESTIONNAIRE AFTER
WHY WE CHANGED IT:
Something else we noticed after testing was that our questionnaire felt more like an overlay on the same page rather than a pop-up. Since it was difficult to notice that there was a difference (or that it was a pop-up at all), we made it slightly smaller and added a dark background. We also felt the dark background helped to draw focus.
We also added an exit button to all questionnaire screens so that users have the option to opt out of the survey at any time, should they change their mind.
ITERATION #3
QUESTIONNAIRE STARTING PAGE BEFORE
QUESTIONNAIRE STARTING PAGE AFTER
WHY WE CHANGED IT:
Our final iteration was the addition of a landing page for the questionnaire. We realized that once users clicked "Start Here" from the hero image, the questionnaire would begin immediately with no introduction. In order to make this process feel less abrupt, we added a landing page to prepare users and let them know exactly what they clicked on.
HIGH-FIDELITY WIREFRAMES
Once we completed all necessary changes, we created our high-fidelity wireframes and prototype.
HOMEPAGE
HOMEPAGE WITH QUESTIONNAIRE OVERLAY
QUESTIONNAIRE OVERLAY 5
