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!
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!
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.
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?
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.
Create an amazing browsing experienceDon’t overwhelm users with contentEach content on display should get some spotlight
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.
Based on feedback, a good direction was in place and creating High Fidelity Designs with real content was next. Once completed another brainstorming session!
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.
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.