Case Study
MY JT App
Design the user journey, design system and UI for the new My JT App
My role
Product designer
UI designer
Skills
UI/UX Design
Design Systems
Motion Graphics
Stakeholder liaison
Agile methodologies
Tools
Figma
Miro
Photoshop
Illustrator
After Effects
DELIVERY
User flows
Wireframes
High-fidelity prototypes
Design System
1. Introduction
ABOUT
JT is a telecommunications company with headquarters in the Channel Islands. They offer Mobile, Broadband and Landline services to customers in the Channel Islands. For the past few years, JT has been actively migrating all of their customer interactions into a digital/online medium with the aim to offer a better customer experience and to reduce the workload of the CX team.
PROBLEM
JT used to have two different platforms/apps for customers to manage their services, one for pre-paid customers and a second one for post-paid customers. Both apps were becoming outdated and in need for a refresh, not just visually but also in regards to the options offered to customers.
SOLUTION
Merge pre-paid and post-paid services into a single app/platform. The new app should allow customers to manage their JT services and to purchase new products and services.
My role
I was the Lead Product Designer, overseeing the construction of the Design System as well as actively designing user flows, wireframes, prototypes and high-fidelity screens.
My contribution also extended to the planning stages where I engaged with stakeholders and liaised with external agencies. And for the final stages, I collaborated with developers to bring the designs to production.
2. Research
Vision and strategy
To start this project we engaged with a specialised agency in France to assist us with defining our vision and creating the blueprint for our strategy. This process ran for several weeks and involved workshops and meetings with the different JT teams and stakeholders.
Current apps analysis
We ran a deep analysis of the old apps including capabilities, performance, usability, design and mainly customer ratings & feedback.
JT My Account App – For JT customers with a Pay Monthly service. Available for Android and iOS
JT Top Up – For JT customers with PAYG mobile service. Available for Android and iOS.
Features and functionality
Research findings
Users have truly embraced the digital alternative when managing their services.
Most users praise the apps features but think the design and layout could be better.
There is a strong desire to continue shifting customer interactions to digital channels, driven by both customers and customer-facing teams.
3. Users
Audience
JT customer base with an existing pre-paid or post-paid service, all genders, age range 17-70 years old, residing in the Channel Islands (Jersey, Guernsey, Alderney and Sark).
Personas
The main focus on creating customer stories was clearly defining the different experiences between a pre-paid and a post-paid customer.
1. PRE-PAID
Name: Tim
Age: 16 years
Location: Guernsey
Occupation: Student
Tim is a tech-savy high school student who needs to top-up his JT pre-paid service as it has almost ran out of credit.
- Being able to add credit to his service with just a few clicks and without using too much mobile data
Name: Lucia
Age: 25 years
Location: Jersey
Occupation: Visual Designer
Lucia is originally from Greece and is visiting Jersey for a week. She purchased a JT eSIM as soon as she landed. She now needs to check her service usage and balance to determine if she will need to add more credit before she heads home.
- Access her JT pre-paid account via the app or web
- Check her usage and balance
2. POST-PAID
Name: Robert
Age: 40 years
Location: Jersey
Occupation: IT Professional
Robert has been using the previous JT Apps to manage his family’s accounts as well as his own. He now needs to register to My JT and link all family services to this new platform. Robert and his wife hold a pay monthly mobile service, his 2 daughters have a pre-paid mobile account. The family also has a broadband service with JT.
- Create a new account
- Link existing services to new account
- Manage multiple services in a single account
Name: Rose
Age: 65 years
Location: Guernsey
Occupation: Retired
Rose has been a JT customer for more than 40 years and until now has been using non-digital methods to manage her services. She recently installed the My JT App and has gradually become familiar with it. She is now needing to check her latest roaming usage and paid for the extra charges she incurred while she was overseas.
- Check roaming usage and itemisation
- Pay extra charges
User Flows
Before we started creating the several User Flows required for the new app, we carefully identified the many user stories and potential journeys contained within the whole UX .
Functionality mapping
Once we had identified the main features and user journeys for MVP (main viable product), we created a user flow for each. Some of the main ones included:
- Register/create an account
- Link your existing services
- Check your usage
- Top up
- Pay a bill
4. Wireframes
Wireframes and low-fidelity prototypes
For the initial design stages, we engaged with an external creative agency to help us with the first batch of screens. Along with our Product Owner, I liaised with the agency to bring the main flows to live. Once a work structure and a few templates were in place, we took over the design process.
5. Design & Development
Design System
The Design System for My JT was the result of the collaboration with the Jersey based creative agency who helped us with the initial wireframes. Through several sessions with the agency we define the basis with which the JT design team would take over. Once we took over the whole process, I was the lead designer who structured the file. As expected the Design System continues to grow and adapt as required.
High fidelity designs and prototypes
Once we built the components we needed into the Design System, the team and I got to transform the wireframes into high fidelity designs. The designs were approved by the product owner before we proceeded to create the prototypes that were to be presented to developers and stakeholders.
Development & Testing
The development process began once the prototypes were approved by the product owner & stakeholders. The Figma files were shared and briefed with developers via Jira tickets. A completed MVP version of the app was tested with real JT customers.
Testing
29 participants took part in the test and included a mix of JT customers (12 participants) who were contacted through the JT View panel and internal staff (17 participants). The group consisted of 15 females and 14 males with a wide age range from 18-70+. The test took place in the Jersey corporate HQ and all devices and material was provided by JT.
Insights
Have the left-hand navigation expanded & open as default.
Make the ‘Register’ CTA clearer.
Add more contrast to the payment form elements.
Make it easier to access the range of bolt-ons listed
Delete or move irrelevant external navigation
Make the account icon stand out more
Most of participants expressed having a positive experience using the app, highlighting the improvements to the overall UX when compared to existing interfaces. They were also very pleased with the new design.
6. Delivery
Solution
An MVP version of My JT was successfully launched for web, Android and iOS in time for Jersey’s summer peak. Since then, we have continued to improve My JT and we have seen over 20 new releases which include new features and upgrades on design and performance.
Web:
Mobile:
