Overview
When Odido rebranded from T-Mobile Netherlands, it wasn't just a visual change—it was an opportunity to rethink and rebuild its digital experience from the ground up.
I work in the team as a UI/UX Designer & UX Researcher to help define, design, and scale a cross-platform design system, creating intuitive screen designs, and implementing accessibility principles, introduced by the European Union, spanning all the platforms associated with the TV domain. This includes the TV, Web TV and Mobile TV clients.
This case study explores how we created that design system & UI-design, the decisions we made, the challenges we faced, and the patterns and strategies that helped drive it forward.
Problem
The Odido TV digital products lacked consistency, structure, and accessibility. The design assets were fragmented across platforms, and many components were either outdated or duplicated with slight visual deviations. The rebrand created urgency, but it also introduced risk—without a structured system, there was potential for divergence, inefficiencies, and long-term design debt. Also the introduction of the European Accessiblity Act meant that we had to take the time to
Key challenges:
- Fragmented components and inconsistent design tokens
- No established Light/Dark theme support
- Lacked scalable for all UI patterns
- Accessibility wasn't embedded in design or code
- No unified documentation or governance process
- Design debt from early rushed builds
Goal
- Recreate the TV platform designs in the new brand style of Odido
- Centralize and standardize the design system for Odido TV
- Build a flexible component library with interaction states and documentation
- Research and implement the guidelines of the European Accessibility Act
- Keep iterating, changing and innovating the app according to the wills and needs of the consumers
My Role
Key areas I was directly responsible for and hands-on with:
- Redesigning the various TV platform UI designs that I created for T-Mobile prior (Web TV, App, TV)
- Product management of the TV UI products
- Working together with stakeholders in order to design a desired product that fits within the new brand style
- Working together with the test and research team in order to implement the wishing and concerns of the user
- Researching accessibility and implementing the key principles in order to make the applications as accessible as possible for many different users.
Research
Design System
We began by auditing the Web and App design environments. Inconsistent usage of colors, spacing, and typography revealed the absence of atomic structure. Several button variants lacked interaction states, and accessibility testing showed contrast failures. We documented the issues and defined a scalable approach, prioritizing tokens and reusable components to reduce inconsistency.
The first step was defining atomic foundations:
- Color System: Created a semantic, token-based palette. Colors were accessibility-tested and mapped for theme scalability.
- Typography: Rationalised type scales and text styles across breakpoints
- Spacing and Layout: Introduced spacing tokens and grid-based layout rules
We eliminated redundant styles and merged similar assets to build a cohesive, maintainable set of atoms.
(Re)designing the UI with new brand style
During the design phase of the design system we already started working on the UI designs side by side. The key challenge here: implement the new brand of Odido onto the existing designs made for the previous client, T-Mobile. Since a lot of the UI was based on the old color scheme it was a puzzle to see which colors and design elements worked in the UI and which did not.
Key Insights:
- Changing the primary magenta brand color of T-Mobile to the more free flowing gradient colors of Odido would not work on the TV platforms. Due to the gradients failing the contrast tests and visability being an important feature for these platforms we opped to go for a more neutral blue color from the Odido brand color library as our main color for the UI designs.
- Typography: Rationalized type scales and text styles across breakpoints
- Spacing and Layout: Introduced spacing tokens and grid-based layout rules
(Re)designing the UI with new brand style
During the design phase of the design system we already started working on the UI designs side by side. The key challenge here: implement the new brand of Odido onto the existing designs made for the previous client, T-Mobile. Since a lot of the UI was based on the old color scheme it was a puzzle to see which colors and design elements worked in the UI and which did not.
Key Insights:
- Changing the primary magenta brand color of T-Mobile to the more free flowing gradient colors of Odido would not work on the TV platforms. Due to the gradients failing the contrast tests and visability being an important feature for these platforms we opped to go for a more neutral blue color from the Odido brand color library as our main color for the UI designs.
- Typography: Rationalized type scales and text styles across breakpoints
- Spacing and Layout: Introduced spacing tokens and grid-based layout rules
Designs
One of the biggest achievements that I am proud of is the implementation of the Odido branding accross all the different TV platforms. Since I worked on all platforms; TV, Web TV and Mobile TV, it is great to see the full vision and scope of what was implemented.
Here I display some of the more prominent screens designs of the respective apps that I worked on.
TV screen designs:
Web TV screen designs:
Mobile TV screen designs:
Outcome
- Created a scalable design system for TV within under 6 months
- Component library used by multiple TV platforms within 3 months
- UI patterns adopted across TV, Web TV and Mobile TV
- Created internal documentation and principles for accessibility and user experience improvements
- Created a fully fleched UI design for all three major TV platforms
- Achieved 83% AA accessibility compliance in key flows
From the web to TV to virtual reality, I have worked across diverse platforms, each with unique challenges, all centered on delivering an exceptional user experience.
