Overview
T-Mobile sought to enhance the user experience of its customer self-service portal to improve user satisfaction and redesign the application called Magenta drive ( Connected cars ). The existing platform had navigation issues and lacked a cohesive design, leading to user frustration and increased customer support demand.
Scope: Interactive Design Course
Duration: 12 Months
Tools: Figma, Adobe XD
Role: Concept, Wireframes, Prototype
Clarify Phase
I joined the project long after it started, so I quickly got up-to-speed on the goals for the re-design, and the internal processes that made our checkout process work. Our goals were to make sure the checkout process was as painless and quick as possible for customers, and update the design to match the current branding on the rest of the site.
There is a LOT that happened over the course of the year to reach these goals, but my overall process can be broken down into these sections:
-
Understanding the Project
-
Research, Research, Research
-
Design Iteration and Internal Feedback
-
Making Plans for the Future
I was the only designer on the project so everything you see I created myself. I was involved in everything from defining the brand and personas, creating flows and wireframes, all the way to creating final UI designs as well as designing the Application.
//Starting with the basics. Who, what and why
I started off with getting all of the foundational information I needed with strategy and defined the Application and it’s target audience. Since we were talking about a new appliaction in T-Mobile we started by defining the brand attributes and created a brand statement. Regarding the users I was happy to find out that the team has already been talking to their target audience and had a lot of insight so it was only a matter of consolidating the findings to form a user persona. Both of these documents guided our decisions during the rest of the project.
Ideate Phase
#USER STORY
All of my research happened regularly throughout the project. In the beginning, I conducted remote testing (moderated and unmoderated) to get a better understanding of our users, and test early past designs. I also conducted testing for my own designs, and used findings to inform my iterations.
Our work was split into different sections of checkout, each with their own iterations and testing plan. I worked with my manager and the product manager to prioritize what we needed feedback on, and develop plans for testing different designs, depending on what could be prototyped, and what would need to wait until developers could work on it.
Before launch, I created a plan for final rounds of user testing to catch any lingering usability issues, and to help prioritize what issues would need to be addressed before launch. This testing was done with different groups of external customers, and any internal stakeholders that would regularly interact with customers.
As the first UX researcher in the company, I wanted to establish good internal research practices, so I documented everything, and shared my findings frequently. I made sure to establish hypotheses for each test, keep track of the different methods I used for testing, and provide templates for other team members to use. I also included information from analytics in my research process, and referenced usage and conversion metrics when making design decisions. I gave a presentation on the basics of UX research to lay a foundation, and offered to have team members observe or watch user testing sessions.
Development Phase
After we defined the flow and thus what screens we needed I proceeded with creating the wireframes to explore the experience in more detail on a screen-by-screen level. The main focus was the trip planning flow which sits at the heart of the app.
Visual exploration
I worked directly with a team of 5 engineers to develop the designs for IBG. I scoped out tickets for the front-end engineers with user stories and product requirements. As a part of the future vision, I created a site map of a platform to help engineers to understand how ever over all site architecture worked.
Design Iteration and Internal Feedback
While I was researching, I also started working on re-designs for specific parts of the checkout experience, including selecting gifting options, the checkout experience for account users, users shipping items to multiple locations, the address validation process, and international shopping experience.
During each design iteration, I went through a mental checklist (in no particular order):
-
Does this line up with past research findings?
-
Does it follow established guidelines for usability?
-
Will this impact our warehouse operations? Customer service?
-
Does this fit with our project goals?
I learned our in-house style guide, and started working on different design iterations that fit within the parameters of what could be developed for the MVP launch. I created screen designs, UI changes to existing parts of the site, and user flows.
As mentioned before, I also conducted research as a part of iterating on my designs. While a lot of previous internal decisions were based on findings from analytics, I emphasized using qualitative testing as a way of understanding the why behind the behavior patterns found quantitatively. This would help prevent creating designs that addressed the wrong problem. I learned this the hard way after creating many, many, many iterations of one design over a few months before realizing this error.
I also collaborated with our creative team to work on animations and fun little additions to the experience. I worked on different design in stages, going through a cyclical process of user testing and getting internal feedback. Since I was new to the team, I leaned on my more-senior teammates to flag anything I missed regarding warehouse operations and logistics. I also found it key to get feedback very often from developers in order to gauge complexity of my designs, and prioritize what I tested and handed off to coordinate with their launch schedule. It was also very important that designs I made worked within the security requirements for our site.
Collaborating with my team was an important part of getting my designs to a place where they were worked visually and functionally.
Implementation
Overall, we were able to reach our goals, and have gotten positive feedback fro customers, and seen an increase in conversion rate. You can see two before and after examples of our designs below.
The main goal of improving the overall checkout experience was achieved, but also establishing a workflow for how designs received user and internal feedback. We reached our goals for our MVP, and established design and research process that we’ve followed and improved upon for later projects.