Case study:

Rebuilding the Foundations of Toyota’s EU App.

Designing an accessible and scalable platform across Toyota, Lexus, and Subaru apps.

Overview.

Toyota’s vehicle apps across Europe had grown over time across multiple brands and teams.

As new features were introduced, inconsistencies in design, accessibility and implementation began to slow development and impact the user experience.

Rather than continuing to patch issues individually, we took the opportunity to redefine the foundations of the platform.

This project focused on creating a scalable design system and visual direction that could support Toyota, Lexus, and Subaru apps while improving accessibility, consistency and collaboration across product teams.

Company: Toyota Connected Europe / Toyota Motor Europe

Role: Lead Product Designer

Timeline: Mar 2024 - Apr 2025

Product: MyToyota mobile app (EU & UK)

The Challenge.

The existing app ecosystem had evolved organically across teams and brands.

Over time this led to several issues:

inconsistent UI patterns across features,
accessibility gaps across screens,
duplicated design solutions between teams,
difficulty maintaining visual consistency across brands.

These problems were not just design issues; they were slowing development and making it harder for teams to deliver new features efficiently.

The goal was to establish a shared foundation that could support multiple brands, teams and future product development.

My Role.

As Lead Product Designer, I was responsible for:

refining the visual direction for the platform,
designing the system architecture and component structure,
aligning stakeholders across product and engineering,
facilitating workshops and design reviews,
establishing governance and adoption frameworks.

I worked closely with designers, engineers and product managers across multiple teams to ensure the new foundations could be implemented and adopted successfully.

A list of errors brought up in the audit

Discovery.

Before defining a new direction, I conducted a UX audit to understand where the current experience was breaking down.

The audit revealed several recurring issues:

inconsistent spacing and typography,
duplicated components across screens,
accessibility gaps in colour contrast and interaction patterns,
fragmented design patterns between teams.

Mapping these issues helped me prioritise the areas where foundational improvements would have the biggest impact.

Research & Benchmarking.

I looked outward to better understand user expectations, competitor approaches and how the Toyota ecosystem is perceived across its brands.

This helped the team identify opportunities to improve both product usability and brand expression across the connected vehicle apps.

Desk Research.

To understand the landscape, I explored both internal and external references.

I analysed:

Toyota, Lexus, and Subaru brand systems across digital channels,
competitor connected-car companion apps,
visual trends within automotive mobile experiences,
perceptual mapping to understand brand positioning.

This work helped define how the app should feel across brands while remaining consistent within a shared system.

Information Architecture Research.

Alongside the visual exploration, I collaborated with a parallel IA workstream focused on improving the product structure.

I explored:

content organisation,
user flows for key vehicle tasks,
hierarchical navigation structures,
labelling systems.

The goal was to ensure the visual redesign would support clearer navigation and more intuitive task completion.

User Validation.

I also tested early visual concepts with users to understand how the new direction was perceived across the three brands.

Feedback was largely positive, with participants describing the designs as "clean", "engaging", and "innovative".

Subaru was frequently associated with high quality and sophistication, while Toyota was perceived as advanced and innovative.

The main criticism centred around information organisation, reinforcing the importance of improving the underlying IA alongside the visual redesign.

Defining the New Direction.

With the research complete, I explored a new design direction that would:

• modernise the interface,
• improve accessibility,
• align with brand identities,
• support scalable product development.

The visual direction included:

• new colour palettes with accessibility compliance,
• typography scales optimised for readability,
• updated iconography and imagery,
• modular layout systems,
• interaction patterns and motion guidelines.

Rather than designing individual screens in isolation, the focus was on creating a flexible system that could scale across multiple brands and features.

Designing a Scalable System.

A key part of the project was establishing a design system to support long-term development.

This became the LOOM mobile design system, a structured design framework used across the app ecosystem.

The system included:

Design tokens are a system of variables that determine stylistic features of elements. These theme variables (or tokens) are referenced in the codebase when building our designs.
Themes are used to convey our brand styles and are based on core design principles.

Each element of the theme is hooked up to a naming convention and sits behind the tokens.

This way, we can easily switch themes and styles without having to go back and rewrite anything in our codebase.
Foundations form the basic structure and guidelines of any design.

By defining a set of foundations, we can create consistency across our designs, a cohesive user experience, and a streamlined codebase.

Each of the foundations can’t be broken down any further without ceasing to be functional.
A component is a standalone element that solves an individual design problem.

Each component is a combination of different foundational elements that work together to create a single function. For example, a button.

The components are then used repetitively across all of our products.
A pattern is a set of components that work together as a reusable solution to a commonly occurring problem.

The placement of a pattern depends on your specific goals and objectives. Each pattern is designed with a particular purpose in mind.

Patterns are widely used across different product areas. Each pattern should have its own guidelines that apply to a specific section of a page or product.
Templates provide a framework for organising components and patterns into a layout and defining the fundamental structure of the design.

Focusing on the underlying content structure rather than the specific content of the page.

By establishing the skeleton of a page, we establish a system capable of accommodating various types of dynamic content.

Templates can be used to provide a starting point for a design problem. Assuring consistency throughout the application and incorporating pre-defined elements to address common design challenges.

Multi-Brand Design.

The platform supports Toyota, Lexus, and Subaru apps, each with a distinct visual identity.

Instead of building separate systems, I created shared foundations that allow each brand to express itself through:

• colour palettes,
• typography variations,
• container shapes,
• imagery styles.

This approach ensured consistency while maintaining brand differentiation.

Accessibility Improvements.

Accessibility was a major focus due to upcoming EU regulations.

The redesign addressed issues such as:

• colour contrast compliance,
• larger and more readable typography,
• improved tap target sizes,
• clearer hierarchy and interaction feedback,
• accessible colour token structures.

Accessibility considerations were built directly into the design system to ensure future features automatically meet standards.

Collaboration.

Designing the system required strong cross-team collaboration.

I ran stakeholder workshops with regional teams to:

• present the design direction,
• gather feedback,
• test early prototypes,
• align on rollout strategy.

Teams interacted directly with the prototype, added comments in FigJam and explored the screens printed in the workspace.

This helped build shared ownership and confidence in the direction.

Implementation Strategy.

Working with engineering teams, I defined how the new system could be introduced without disrupting product development.

Key considerations included:

• aligning with the ongoing IA redesign,
• identifying areas of the app to prioritise,
• ensuring compatibility with existing codebases,
• supporting teams transitioning to the new system.

The goal was to enable teams to adopt the new foundations incrementally rather than requiring a full rebuild.

Impact.

The project established a foundation that improved both the product experience and the way teams build it.

Accessibility Improvements

Accessibility issues have decreased by 73%, addressing key issues such as colour contrast, typography readability and tap target sizing. The new design foundations ensure future features meet accessibility standards by default.

40% faster product delivery

Shared components, tokens, and templates reduced duplicated design work and gave engineers reusable UI patterns. This helped streamline design, development and QA cycles.

Greater consistency across brands

By introducing a unified design foundation, teams across Toyota, Lexus, and Subaru now work from the same system. This improves consistency across apps while still allowing each brand to express its identity.

Reflection.

This project reinforced several lessons for me.

1. User insight should guide stakeholder alignment

Grounding decisions in research helped create clarity across teams.

2. Systems thinking is essential for scaling products

Designing reusable foundations is more impactful than solving isolated UI problems.

3. Cross-team collaboration takes time but creates stronger outcomes

Ultimately, the project helped shift the focus from incremental fixes to building a scalable foundation for Toyota’s vehicle ecosystem.