Nowy Mój T-Mobile

Nowy Mój T-Mobile

Nowy Mój T-Mobile

Main picture
Main picture
Main picture

Timeline

2021 - 2022

Role

UX/UI Designer

Background

A new service from T-Mobile, in which you can quickly and conveniently manage all your numbers and easily check the status of services, call history, and payments. It can be translated as "My New T-Mobile”.

Add-ons subpage was a critical project since it was one of the few instances where the service could generate revenue for the company. Therefore, it was important for stakeholders, business people, and users who wanted to purchase for example new data packages, Netflix subscriptions, or roaming data.

Reasons for replacement

It replaced the old service due to several factors:

1

Archaic appearance

1

Archaic appearance

1

Archaic appearance

2

Issues with switching between accounts

2

Issues with switching between accounts

2

Issues with switching between accounts

3

No possibility to add services such as optical fiber or television

3

No possibility to add services such as optical fiber or television

3

No possibility to add services such as optical fiber or television

4

No possibility to log in via email

4

No possibility to log in via email

4

No possibility to log in via email

5

Inconsistent functionality with the mobile application

5

Inconsistent functionality with the mobile application

5

Inconsistent functionality with the mobile application

Concept & creation

We began by comparing our service to that of our competitors, namely Plus, Play, and Orange. We also drew inspiration from previous web services, noting the things we liked and those that would not work.

Add-ons main view
Add-ons main view
A snippet from the Lo-fi mock-ups file

After completing the initial work, we began creating hi-fi mockups based on our ideas for functionality and aesthetics. We produced several different variants, some of which are shown below. We then held a meeting to discuss and select two different designs that differed in appearance. These two designs were then used for internal user testing.

Wireframes Hi-FI
Wireframes Hi-FI
A snippet from the Lo-fi mock-ups file

After selecting two different designs, I created prototypes of them in Figma. Then, I sent the Figma prototype link on Teams with a question and a task. Here is the exact task that was given to our users: "The task is to activate the package 'Roaming Internet UE 1 GB'. Let me know which version appeals to you more and why. What was better for you?".

Test results

Once we received the results from the participants, we created a table to compare the number of people who preferred version A versus version B. We proceeded to create another table with two columns for A and B, and under each column, we added a plus and minus sign to indicate what people liked and disliked about each version. From our research we learnt that:

1

Our users want to have everything in one place (add-ons to be activated and already active)

1

Our users want to have everything in one place (add-ons to be activated and already active)

1

Our users want to have everything in one place (add-ons to be activated and already active)

2

They want to click less

2

They want to click less

2

They want to click less

3

They like to have a comparison between active and available add-ons

3

They like to have a comparison between active and available add-ons

3

They like to have a comparison between active and available add-ons

4

Grey icon suggest that add-on is unavailable, not that is available and not turned on

4

Grey icon suggest that add-on is unavailable, not that is available and not turned on

4

Grey icon suggest that add-on is unavailable, not that is available and not turned on

5

Users did not understand some of the naming on our buttons, and how they work in accordions

5

Users did not understand some of the naming on our buttons, and how they work in accordions

5

Users did not understand some of the naming on our buttons, and how they work in accordions

After completing our analysis, we made changes to the design. Then we were ready to hand off the designs to the developers. We designed for four different viewports and provided prototypes for any longer flows or animations we wanted. We also made sure to cover all possible cases, including focus modes and error states.


After developer updates, I performed UI checks in Figma, logging issues and notifying relevant parties via Teams for minor fixes. Major issues were documented in Figma for developer reference.

Outcome

End result

Overall, I believe we did a great job. We were able to address and improve all issues that arose during our internal user tests. However, if I had to choose one thing that could have gone differently, it would be the time we spent obtaining data from our backend developers and analysts. This was mainly due to miscommunication issues that we had.

Add-ons main view