T-Mobile

During my time as a UX/UI consultant with the Accenture team at T-Mobile, I dived headfirst into the world of Agile development. Working in two-week sprints, I wore many hats – from interviewer to researcher, facilitator to designer.

  • User-Centered Approach: I started by interviewing stakeholders to understand their goals. Then, I conducted UX research with end-users to gain insights into their needs and pain points.

  • Collaborative Design: This research fueled workshops with my colleagues, where we brainstormed solutions together.

  • Crafting the Experience: With a clear understanding of the problem and potential solutions, I used Axure RP to create high-fidelity mockups for the customer-facing T-Mobile e-commerce website.

  • Reusable Design System: Beyond individual screens, I also contributed to the company-wide component library by designing reusable UI elements and UX patterns. This ensures consistency across the entire T-Mobile digital experience.

 

T-mobile.com E-commerce website
(Responsive Website)

 

(Samples of Lo-FI wireframes used at T-mobile).

My main project was working on T-Mobile’s customer-facing website, T-Mobile.com. The two main features I worked on were adding a phone to a cart for a new customer, and upselling users’ relevant deals within the AI Chatbot. My general design process went as such:

1.) Gather information and requirements via stakeholder interviews and workshops.

2.) Craft lo fidelity wireframes to define requirements.

3.) Craft high fidelity wireframes to present to stakeholders.

 

Flow Charting for

stakeholder agreement

At T-Mobile, I got to wear many hats! Besides tackling larger projects, I also enjoyed taking on what I call "Side Quests." These were quick wins for other teams, like designing banners, adding simple UI elements like dropdowns, or creating icons.

For Side Quests, agility was key. These tasks often required minimal upfront research and refinement. However, for larger, multi-month projects, I like to kick things off with a "Stakeholder Agreement."

Think of it as a collaborative roadmap. These agreements, often created as editable flowcharts in Figma or Miro, ensure everyone involved is on the same page from the start. This approach streamlines the process and respects everyone's valuable time.

I have found that some sort of Stakeholder Agreement is necessary to estimate the time needed for the project, record requirements changes (which were frequent), and make sure that everyone included in the process was happy with the goal of the design project.

These flowcharts generally included

  • Pages that are linked to or affect the feature under design.

  • User pain points and actions.

  • Any research or relevant information attained during the discovery phase.

  • Suggested design solutions.

Here is the flowchart that I used for this project:
(click to expand, or download below)

 

Lo-Fi wireframing

I kick off my design process with rapid prototyping and Lo fidelity wireframing to help me quickly understand and communicate my vision of the feature in development. At the beginning of the process, I’m trying to move as quickly as possible. I only include what's necessary to give the stakeholders a better visualization of the ideas that we will be implementing. Between that and the flowchart, there is no room for guesswork while forecasting exactly what is going to be developed.

High Fidelity Wireframes

To bring the user experience to life, I translated all the insights from the discovery and early design phases into high-fidelity mockups. These detailed prototypes served as a clear communication tool for stakeholders and developers. While Figma and Adobe XD weren't mainstream yet, I presented these mockups using a classic PowerPoint presentation, ensuring everyone involved had a clear understanding of the vision.