Project Overview

XUMOTV + Metro

At XUMO TV, I’ve been working on creating the Tablet Version of an upcoming Content App for T-Mobile, which has right around 80 Million Customers. This project has really helped in establishing my though process and expedite my workflow. Since this application is not live yet, I am only showing my thought process and tools without giving much app content nonetheless, I believe you will gain some insights on how my mind works!

SVP of Product
Director of Product
Lead Product Designer
UX Engineer & UI Designer - yours truly


Building Foundation

Understanding the Design System

I started by understanding our mobile design system for T-Mobile and see what visual rules are set in place. I wanted to understand the layouts, transitions, content, data, padding, and color schemes. XUMO App here to illustrate a good system, you can download it here if you want to take a look!

Building Blocks

Design with Atomic Design

My favorite tool/process that I acquire at XUMO is Atomic Design. With this, I was able to understand the Design System at more than just a high overview and rather comprehend the who, what and why about the UI components.

The more I use Atomic Design, I notice I internally started thinking these questions to myself.
Who: Which is component is it?
What: What does that component do?
Why: Why Does that component DO that?
A Type of Image
Who: A Movie Content Image
What: It displays the Movie Content Image
Why: It allows users to identify a movie during browsing or to Serve as an indicator that they are in said Movies Section


I researched some of our competitors and did desktop research to try to answer these questions I asked myself.
What are the current trends in regard to the Tablet experience?
What are the trends in other Content Apps and are they applicable with our experience?

I took a deeper dive into our own apps to understand more of the Dev side to answer:What solutions are we already using?Do we have any practices set in place that can save development time?

Human Center Design
What does a user expect out of tablet experience?What about for a Content App?


Focal View
The UI needs to establish a Focal View or Tunnel Vision for the users. This serves a great deal during browsing and identifying content.

Taking the “hand held” nature of tablet, padding is needed when users’ thumbs are directly holding the device on the sides

Content Display Quality > Quantity
This is the easy way to understand it though, I would rather use the word “Fluid” as we can’t always have amazing quality imagery, but we can have a UI that allows everything to flow as fluid as possible. Creating “fluid-ility” (not real word) is my biggest take way from my research.

Goals for the Product

What I Want to Accomplish

Product Goals
Create an amazing browsing experienceDon’t overwhelm users with contentEach content on display should get some spotlight

Making the UI


I started by sketching down layouts based on my findings and our design system set in place. After making several solutions, I recreated them in sketch and brainstormed with my Lead.

Making the UI

High Fidelity

Based on feedback, a good direction was in place and creating High Fidelity Designs with real content was next. Once completed another brainstorming session!

Making the UI

Multiple Tablet Sizes

Once designs were approved, I started by accounting for other Tablet sizes 7in, 9in and 10in. Then establishing even padding and ensuring components wouldn’t lose their aspect ratio.

Testing the New Experience

Validating UI Layouts

I wanted to take it a step further and validate the new Tablet Experience in a real Android Device. With XML and Android Studio, I was able to recreate the UI Layouts!



Being able to work with T-Mobile was an awesome experience. Leading the UX Design for such a huge consumer base was another big moment for this project. Overall, execution went great and there are currently close to 2 Million user on the mobile app, so we should have a great start once Tablet is released.