Improving the learning and buying experience for new customers
Plans & Build Your Plan Pages
Background
Fido is a Canadian cellular telephone service provider owned by Rogers Communications Canada.
Fido will launch a new top-tier plan with two exclusive benefits for new customers by restricting access to the benefits to our top-tier plans only.
My role
As a primary product designer, my role is to uncover any potential CX pain points and discover opportunities to elevate top-tier plans, and help the customers easily understand this program and its value-added.
Tools
Sketch app & Figma
Duration
4 weeks
Contributions
Research, user experience map, wireframe, high-fidelity prototype, interaction design, design system, usability testing
Goal
OVERVIEW
The purpose of this project was to uncover any potential customer pain points in order to discover opportunities to elevate the top-tier plans, and help the customers easily understand this program’s value-added.
A review of related research findings
EMPHASIZE
Instead of conducting a new usability test with the Fido Plans page due to time and resource limitations, I contacted the UX research team to obtain the results of previous studies that were related to the Plans page in order to better understand how customers currently browse and purchase plans.
Problems
INSIGHTS & ANALYSIS
I began thinking about design options to match client preferences with business requirements. The main challenge is valuing the exclusive benefits of top-tier plans while making low-tier plans seem comparable to top-tier ones.
Building & Buying a Plan Experience Map
Based on the findings, I created a visual representation of a customer's thought processes, requirements, and perceptions as they move toward completing their tasks and meeting their wants.
The persona
Target customers are new customers. They are young and tech-savvy. When purchasing something, they weigh all the advantages and pay a fair price.
"How Might We" statements
WORKSHOP SESSION
Stakeholders, product managers, and designers had a workshop to review the existing Fido.ca journey/capabilities to explain how the tier program will work, uncover any potential customer pain points and discover opportunities to elevate top-tier plans
Wireframes
IDEATION
In the initial iteration phase, I created wireframes for quick communication with the product manager. This process was helpful to clarify and define features.
ITERATIONS
Interactive Prototypes
I started working on the details after my business team and I aligned what elements would be on each page. Instead of developing a new component, I enhanced an already-existing component by adding additional functionalities.
Unmoderated remote usability testing
USABILITY TESTING
After numerous changes and talks with stakeholders, we chose the best solution. I also organized the usability testing. To create a plan, I collaborated closely with a UX researcher. Due of a lack of UX research team resources and time, I created the majority of the activities and questions as well as conducted an analysis of the gathered videos. Overall, the findings were positive, but I had to revise the 'Build Your Plan page' design.
Summary
Engagement
All participants would click a link to learn more about the benefits. They were interested in one of two benefits depending on their situation.
Look & Feel
Most participants commented that the pages are visually clean and simple.
Behavior
Upon being prompted to find the meaning of icons, most of the participants immediately clicked on the icon itself to see the details.
Online unmoderated usability testing
Six participants
2 days
Each session lasted approximately 20 min.
FINAL DESIGNS
DESIGN DECISIONS
Following the usability testing, I made a few more design iterations until coming up with the best solution.
Plans Landing page
To make it easier for customers to learn about benefit details without having to search on other pages, I eliminated the benefits logo and replaced it with exclusive benefits CTAs for Top-tier plans that connect to each landing page. Additionally, it helps to raises customer awareness of the benefits.
Build Your Plan page
1. Key feature list and benefits of the plan with a logo added: Customers can quickly and easily see important information without an expanded state
2. Under the view of more details, customers can see the details of the benefit, so that customers don't need to leave this page.
3. The plans feature accordion has been deleted, and all information has been put beneath the expander: customers can view the plan features when the state is expanded.
Accessibility Issue
CHALLENGES
The most difficult aspect of this iterative process was accessibility. I had meetings with the developers and the accessibility team to determine whether the additional features will function without any accessibility issues.
Especially, the tooltip with the details of the benefits was the solution I found to be the most ideal. However, if a tooltip is added to the selection component, clicking the tooltip also picks the selection which creates an accessibility problem, particularly for mobile views
ENHANCED COMPONENT
WHAT’S NEXT
Due to scheduling issues, I was unable to use the best solution. Nevertheless, I spoke with a Rogers designer about this solution and then we convinced the design system team that it would be the best course of action for both Rogers and Fido in the long run. We ultimately decided to create an enhanced selection component.
