Client study & portfolio sample

Media Page, site audit, and brand re-alignment.

T-mobile approached me to design a video section where they could house all online media content. I designed the following pages which went live in 2012. Local agency Garrigan Lyman handled final paint.

Project Overview:

Client: T-Mobile
Role: Lead UX
Primary Agent: David Wall (UA Founder)
Toolkits: Adobe Creative Suite - HTML5, Js, CSS
Launch Date: March 2012
Project: Video gallery landing page for marketing video content.

Project Summary:

The Marketing department proposed a public facing gallery that showcased all video based marketing content. We scheduled a kickoff and gathered all the business requirements for the project.

The point was to showcase our marketing content and improve engagement.

T-Mobile wanted to improve connection to customers - emphasize quality product, affordability, and customer support.

As lead UX, I proceeded to research the existing marketplace to identify best practice and build a competitive landscape. Beyond the mobile marketplace, I also looked into what video leaders (EX: Youtube & Vimeo), were doing at the time, and how they handled their UI interactions.

In conducting the research for the project - I found inconsistency in T-mobile’s online brand guidelines. This required a complete audit of the online experience. After the audit - I compiled a report that re-aligned the brand and modified the guide in order to accommodate additional functionality that wasn’t included when the initial designs were created.

2012 Brand Guide samples

T-Mobile Style guide unification

T-Mobile Style guide unification

Once the online brand was united, I began exploring the introduction of the new UI to the existing guides..

Introducing video link treatment into the brand guide.

Unifying the design styles for T-Mobile Website.

Unifying the design styles for T-Mobile Website.

In the initial wireframes I followed design cues that were common with many of the large video serving companies.

User Requirements Overview:

  • The user must be able to see, play, and share video from the page.

  • The company wants to provide recommendations based on the user interacted content.

  • The user needed to have the ability of filtering content by:

    • Category (We needed to be able to identify and classify video by specific categories )

    • Type (Defining the type of video - By Product, Marketing, etc.)

    • Brand (Focus on branded content - EX: marketing video for the I-Phone or new tablets, etc.)

    • OS (Android, Microsoft, IOS)

    …And view content by

    • Recent

    • Popular

    • Most shared

  • We further allows users to control result sets. (NOTE: In 2012 people were just starting to look at the concept of Mobile first development. It didn’t really take until 2013 and didn’t become common until about 2014)

The end result showcased the featured video front and center with a revolving side gallery of highly promoted content.

Below the fold we showed a gallery with:

  • Tabbed navigation

  • Optional Result set

  • Filtering capabilities

  • Pagination.

Video section for T-Mobile -  Design date: 2012

Video section for T-Mobile - Design date: 2012