Context
Sky Glass TV is a premium TV service. Customers with Sky Glass TV must pay a monthly fee to access live shows and channels. If a customer is in debt or unsubscribed status, they will be blocked from using Sky service. The only way to reinstate the customer account is to call the Sky Customer Service Centre.
Reinstate
'Reinstate' enables customers to recover their accounts directly on their TV without spending long hours on the phone waiting for an agent to reinstate their accounts.
​
I led the UX design when I was working for Sky. It's now live on all Sky Glass TVs (UK and Ireland, Italy, and Germany), resulting in a significant reduction of 150+ calls per day, with an estimated savings of £31,000+ per month.
Client
Timeline
Nov.2021 - Jan.2022
7 weeks
Collaboration
1 Product Manager
1 Developer Team
1 UI Designer
1 Copy writer
My Role
UX researcher
UX designer
Problem Statement
Final Design
Discovery
The requirements:
Business goals:
• Reduction in customer service calls regarding account reinstatement.
​
PM requirements:
• Enable users to reinstate their accounts directly on TV.
• User can use both direct debit & credit card as their payment method.
Design UX templates for future use.
​
Technical limitations:
• The user cannot set up a new payment method until the outstanding balance is cleared.
Current experience:
I met the billing team to understand the timeline for the debt-blocked experience for users.
Key findings:
• Users will receive several emails, letters, and text messages before their accounts are blocked.
• The way to reinstate the account is to call the customer service centre, which usually cost 20mins to get to an agent.
• It’s very difficult to tell an agent card numbers, or sort code over the phone.
Competitor analysis:
I conducted a UX research by auditing various streaming platforms to:
• Understand the basic expectation
• Gain insights from competitors
Key findings:
• Most competitors only have a 'make a payment' journey on the website
• Save payment methods for future use is a basic feature
Ideation
Workshop:
I facilitated an ideation workshop with some key stakeholders to understand the scale of the problem and the viability of later solutions.
​
Participants:
1 * Project manager
1 * Scrum master
1 * Developer
1 * Customer agent
​
1-hour workshop:
Part 1: Problem statement
Part 2: Ideation
User flow:
After the workshop, I explored several different user flows and worked with the project manager and developers to ensure technical feasibility.
Design explorations:
I explored different design options and iterated on them in collaboration with cross-functional teams (PM, legal team, UI, copywriter, developers).
​
Iterated stuff:
• Legal requirements: Saving card CVV is illegal, so they must be kept separate from the card details form.
• Copy requirements: Layout of information pages.
• Technical requirements: Payment first and save payment method later.
• And so on...
Design
Entry point:
Redesign of the "blocked status" home screen to make it more user-friendly and informative.
Protect user privacy:
As TVs are shared devices in the home, we need to consider user privacy at all times.
Challenge
The challenge:
Unlike digital websites and applications that use a keyboard and mouse for input, TVs require a remote control to enter information, which can make the process more challenging.
Card details form design:
I explored and compared different design options for the card details form, which would be the most difficult and frustrating part of the journey as it requires a lot of information.
Card details form interaction:
I explored all possible scenarios in which a user can interact with a card details form and explored how to improve the interaction between users and the form.
​
Some scenarios:
Entering a name, entering a card number, deleting information, entering an error number, etc...
Solution
Dynamic keyboard:
The keyboard will be in captain status when the user enters name and will be in lowercase status after the user enters the first letter of their name
Auto jump feature:
Once the user has finished entering, the focus will automatically jump to the next input field.
​
Some scenarios:
Entering 16-digit card number, 4-digit expire date, 6-digit sort code, etc...
Save the used card:
Allows users to save used card information for future use so they don't have to re-enter card information.
Evaluation
Overview:
After the project finished, I evaluated it form three different perspectives.
Scalability:
The user flow of ‘make a payment’ can be used for any purchase-related scenarios. For example, subscribe 3rd party apps, purchase a TV show/ movie, etc.
The ‘card details form’ and ‘bank details form’ can be used for any payment method-related scenarios.
Result:
Over 150 calls per day could be significantly reduced through this 'Reinstate' journey, with estimated savings of over £30,000 per month for the business.
Future:
There are still lots of improvements that can be done in the future.
What I learned
One of the most crucial lessons I've learned is that 'Collaboration is key'. This project was challenging, especially given the fact that this feature is new to the TV industry. However, I quickly grasped that this endeavor was a team effort, demanding seamless teamwork to succeed.
Additionally, I've gained confidence in proposing innovative design patterns and daring to 'challenge the traditions'. This willingness to break new ground and question established norms has not only enriched my creative process but has also yielded some of the most impactful and successful outcomes in the project.