Re-Design of T-mobile online store

In 2011-12 At&t had attempted a merger with T-Mobile. David Wall (Founder) was on assignment at T-Mobile at the time and used the opportunity to re-imagine the online shopping experience.

During the attempted Acquisition, the majority of projects had been frozen. Too remain busy, David began looking at how to improve the shopping experience for the online store. Once it was clear that the AT&T merger would not be successful, he presented his re-design concept to the T-mobile Online Store team stakeholders. They immediately got excited about the project and appointed him Lead UX stakeholder in the redesign of the T-mobile online shopping experience. By March 2012 - The new store had launched. While much has changed, a majority of those UX changes remain a key part of the store today.

 
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

T-mobile had the fastest network in the country when on-boarded with the company and yet, despite this, they were third in the marketplace. Smartphones were exploding onto the market. A new phone purchase had become an extremely emotional event. With this in mind I noticed that our marketing landing pages for new product had done an excellent job of catering to the emotional side of phone ownership. The landing pages were visual heavy and highlighted apps that came pre-installed. Based on this knowledge, I made several observations:

THE ISSUES

Issue 1: Phone purchases are driven by emotion. We had done a poor job of capitalizing on this.

Devices (phones & tablets), had gone beyond utility and become much more personal to users. In a competitive Landscape I had done, I found that our competitors were using larger device photos to drive sales. My research showed that users found the images more engaging and spiked the "desire" factor.

Larger images also contributed to ease of “scanning”. This made content easier to consume for our base.

Solution: Based on those details, we expanded the image thumbnail sizes for all phones.

Issue 2: Excessive sku's lead to massive pagination

Originally T-Mobile listed the product by sku. The trouble was that our list view showed several phones that appeared exactly the same but with slight variants (such as color or memory.) It wasn’t clear to our users - WHY the price changed when the phones appeared to be identical.

Solution: I first documented all the info we were sharing as part of our list grid. Next I looked at ways we could create a more dynamic grid by combining sku variants into a single viewport and dynamically altering price based on color or memory selections made by the user.

Larger images pushed down the number of products we could show above the fold. However, the combination of sku data meant we were actually showing more content above the fold because items that used to show as 6-10 individual products could now be shown as a single dynamic product.

The end result was that these panels allowed us to communicate more information, that was easier to understand, and in a smaller space

Issue 3: Product detail pages allowed you to stray from the focused CTA, and, failed to capture “desire”.

The product detail page allowed users to view options that meant leaving the primary add to cart UI. This lead to a high drop out rate as we would bring users to the page, only to entice them away with video content or other features.

Solution: We implemented toggle functionality, on detail pages, that allowed us view options without leaving the page.

We Increased the use of lifestyle images that brought the product to life for the users. This contributed to increased desire by allowing people to see the product in a way that would help them to imagine using it. 

We used a dashboard approach to the primary Call to action detail, and integrated a tabbed navigation below the product overview that allowed us to share additional information while maintaining focus on the product. Users, would be able to sort through product reviews, device features, specifications and see ratings without losing the CTA.

Summary: How I put it all together and pitched the concept.

The re-design was the largest task of my career to date. I initiated the project based on conversations I had with marketing and through interviews I conducted with several of the physical stores.

Marketing could show me data about where drop out was happening and what appeared to be online pain points. The Physical location was able to share details about actual customer pain points.  

I took the info I learned and began to design a wire frame solution based on this feedback.  I had to unify our design patterns prior to moving forward as there had been some segmentation over the years. The Marketing team was impressed with what they saw and asked that I drive the re-design.  I completed the Architecture and we partnered with an agency to complete the development. The product launched in March of 2012. 

Notes:

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.