CHALLENGE

Users had no way to verify their first responder status themselves on the T-Mobile business portal. They had to go to a physical store or call T-Mobile Care in order to achieve that goal. Verifying their status was important to first responders, because it allowed them to continue receiving a discount on their T-Mobile for Business mobile plan.

APPROACH & KEY INSIGHTS

Feedback from the Care team revealed the following insight:​

1. Users want a way to verify first responder status themselves in the business portal. 

2. Visibility of that option should be more prominent in the UI.

SOLUTION

Create an online user flow that allows first responders to independently verify their discount status, without the need to get support from T-Mobile.

PROJECT OVERVIEW

Effort: 2 weeks (duration was several months due to shifting prioritization of the project)

Role: I took the project over from another designer when it was partially completed. I was responsible for:

• finalizing the user flows (for verification and re-verification),

• increasing the visibility of the discount verification availability in the UI,

• finalizing the visual design.

I worked with the original designer to get feedback, with another designer to ensure consistency with the T-Mobile design pattern library, and with a UX writer. I also communicated directly with product owners and other stakeholders. I presented the designs to them for feedback and approval.

Toolkit: stakeholder interviews, user flows, design patterns, prototypes

Deliverables: Adobe XD prototype, documentation for developer handoff, client presentations

UNDERSTAND

When the project was assigned to me, I met at first with the designer who had been working on the project. I wanted to understand:

• What is the scope of the project?

• Who are the stakeholders and what are their roles?

• What has been done for the project so far?

• How can I access the designs (no common repository existed at that time)?

• What documentation was available?

• What is the design process at T-Mobile for Business (this was my first project for that client)?

• What are the expected outputs of my work?

• What are the timelines?

I also met with another designer who had worked on a similar type of project in the past to get a better understanding of how he’d approached the design problem and solved for it.

RESEARCH

COMPETITIVE & COMPARATIVE ANALYSIS

Since I took the project over partway through, I relied on the research that had been done previously by the research and product teams.

PERSONA

The persona for this project is a first responder who is the primary account holder for a business account with T-Mobile. They can be an EMT, a firefighter or a police officer and have to be able to prove their first responder affiliation.

DESIGN

VERIFICATION FLOW

The first problem I focused on was ensuring the users have a clear step-by-step process with well-designed screens that would allow them to get the right information at the right time when confirming their first responder affiliation. While most of the flow was designed by the previous designer, I worked closely with the product owner to confirm which specific information is available and can be displayed in the different verification steps.

The image below shows the multiple steps a user would have to go through in order to verify their first responder status.

Key Design Decisions:

• Show all the right information we have access to at the right time to make the verification process clear to the users.

• Ensure we take users to correct screens after they perform different actions.

INTRODUCING “PENDING” STATUS

The difficulty here was that only some of the verification is done right away. If there is some discrepancy in the information provided by the user, the submitted documents have to go through a third-party vendor verification. There was no clear way for the users to tell the current status of their verification.

I introduced a “pending” state that would show up in the application when they have to wait for the decision. After verifying with the developers, the product owner confirmed that it is possible for them to display the pending status. I then consulted with the design systems library go-to designer, and we settled on the icon (clipboard with a clock) and the color (gray) for this status.

Key Design Decisions:

• Users need to be able to easily tell where they are in the first responder verification process.

• The use of an icon draws more attention to that information.

• The use of gray for the color does not confuse the user and does not prompt them to take any action, as at this stage they are just waiting for the decision.

USING COLOR & ICONS TO CLEARLY SHOW ACCOUNT STATUS

For a similar previous project, a product decision was made to only show account status when a user expanded a kebab menu for each account in their organization. But users shared that they would like the status to be more clearly displayed. We took that feedback and pulled the status into the Manage Accounts /Manage Lines section of the business portal.

Key Design Decisions:

• The use of color (green for verified, magenta for verification needed, grey for pending, and red for failure) allows users to quickly see where they are in the first responder verification process for their account.

• Not relying on color alone makes the business portal more accessible for users with some color blindness.

• The use of different icons and clear copy for different statuses also allows the user to quickly make a decision whether they need to attend to anything in the first responder verification process.

HANDOFF

I presented the designs to the stakeholders, which included the executive sponsor, the product owner, and developers. The designs were well received and approved. I proceeded with preparing the files for a handoff to developers. The designs were then developed and are now available live to the first responders.

Key Takeaways:

• This project successfully gave the users a way to independently verify their first responder affiliation and ensure they can continue receiving a discount on their T-Mobile for Business account.

• Users can now clearly see the status of their first responder verification without having to open a separate kebab menu on the Manage Account screen.