t-mobile re-design-2012.jpg

Example of dynamic price points - if color "A" was more than color "B", the list item could show that.

High fidelity screen shot of the final project design.

High fidelity screen shot of the final project design.

T-Mobile Case study:

Goal: Increase conversion for the online shopping experience. 

Dated: Spring 2012


As a contractor with T-Mobile during the AT&T acquisition attempt, I was looking for ways to improve upper funnel conversion in the online store should the acquisition not proceed. My contract was near completion and I wanted to make sure I left on great terms regardless of outcome.

Phones have become a personal expression of who we are

The one thing I felt was missing from T-mobile online store was the wow factor of each device. The images were, at the time, more lifestyle based but the product images were still small thumbnails. The logic behind the decisions to keep device thumbnails small, was that we could show more product above the fold on desktop. I had done some research on the matter and determined that the devices (phones & Tablets), had gone beyond mere utility and were much more personal to the user. From that research I believed that larger device photos should be used and would be more engaging for the user. I felt that the larger images would drive the "desire" factor of our users. I also did some research that indicated that scrolling was not quite the problem it had once been. With the edition of smart phones, people had grown used to scrolling for information. Now users were scanning. This means that the bigger images would be easier to consume for our end users.

Combining related sku's to minimize pagination

Originally T-Mobile listed the product by sku. The trouble was that we might have several phones that were exactly the same except they might be a different color and, therefore, a different sku.  My first focus was combining similar product by creating dynamic panels for each phone type. These panels would allow you to toggle between color offerings and change the data in the panel to reflect price changes or options. This allowed us to combine several products into a single panel which minimized the listings and allowed us to reduce pagination. This cut down on how much we had to list which minimized scrolling for specific products. The end result was that we were able to communicate much more information to the user in a smaller space.  Now, instead of listing each device separate and explaining that the only difference for a particular model might be that the color was a limited edition...We could show all the product varieties in the same space and communicate those differences in a way that was less confusing to our user. This meant the end user could browse more selection options without having to either scroll down our page or tab through pagination.

Product detail pages

Each detail page also had toggle functionality which allowed us to toggle through options without leaving the page. We included large lifestyle images that brought the product to life for the users. This allowed people to see the product in a way that would help them to imagine using it.  We created a dashboard approach to the detail page with a tabbed navigation underneath the product overview that allowed us to share information while maintaining focus on the product the users were interested in. Users, can now sort through product reviews, device features, specifications and see ratings. The end result allowed us to make the page more of a device-focused-landing-point, than simply a product detail page. This trended so well that we went back and incorporated some of that same functionality on the list view. 

How I put it all together and pitched the concept.

The re-design was the largest task I accomplished during my time with T-mobile. It was a project I initiated based on conversations I had with marketing about driving user aggregation post acquisition.  

I designed a template and high level wire frame based on the feedback from our user studies from our marketing landing pages.  My intention was to incorporate the same functionality found in the marketing pages to the list and detail page. Marketing department saw the designs on my desk and reached out to me to ask if I could complete the concept and drive the re-design.  I completed the wires and T-Mobile brought in a design team to go over the final functionality and wires. 


While a lot has happened since 2012 - It is noteworthy that a lot of the underlying architecture is still being used from my original design.  I spent a lot of time with T-Mobile and it was an awesome experience working with a great company. While this was just one of many projects I worked on during my time at TMO - it is arguably the most high profile.