Tyler King

About

Toyota’s Ellipse Design System

Ellipse is Toyota's design system, crafted from scratch at Saatchi & Saatchi. We consolidated diverse sources of documentation to create the first centralized and authoritative reference for Toyota's digital platform, refining its foundations and components throughout the process.

Role

Design System Strategy
Technical Documentation
Component Architecture
Agile Implementation

Core Team

Senior Art Director
Senior Product Designer
Associate Creative Director

4Sources of truth merged into one

15%Estimated increase to-date in design system adoption based on Figma metrics and engagement

24Core components and foundations redesigned and restructured

System Overview

The Unmistakably Toyota brand platform is the governing document for all Toyota marketing & communications in North America. While it was built primarily for marcom contexts, the Platform team looks to UT guideance to ensure its foundations are reflected in digital experiences.

Where We Started

Before the creation of Ellipse, designers and devs on the Platform team were encountering challenges with conflicting documentation from three different active sources of truth. Additionally, there was a lack of consistency in the structure of global style and component libraries. As a result, this lead to inconsistent output and decreased efficiency.

Three initial attempts to consolidate guidance circulated simultaneously within the team, causing confusion and inconsistent output.

Discovery

Auditing

Conducted audits of internal documentation and industry design system best practices

Platform Sandboxing

Explored various platforms and determined where the design system should live

Content Strategy

Structured the overall system information architecture and page-level content hierarchy

Implementation

The discovery phase revealed that Ellipse should live as a Figma native system, meeting our designers where they were already comfortable and eliminating the need for an additional source of truth. Internal designers can view guidelines and explore main components in editor mode, while partners can experience the system like a website in preview mode.

Meta Design

Created a kit of meta styles and components to create cohesion in page design and annotation

Documentation

Created detailed guidance on properties, interaction, development specifications, and accessibility for all components and foundations

Normalization

Standardized all foundation and component architecture, eliminating redundancies and introducing clear naming

Maintenance

After finishing the Design phase, we had successfully transitioned the system team from a reactive mindset to a proactive one. We began planning processes to address our backlog and prepare for the future.

Agile Process

The Ellipse Jira board was set up to organize our backlog and manage requests for updates from platform team members.

Versioning Plan

Created a plan for deprecating components and making designers aware of system level changes. Each page has a dedicated change log, which dynamically feeds into a global change log overview in the system index. This allows desigers to stay on top of component updates.

Awareness

We provide updates to our internal team every two weeks and share quarterly updates with our executive leadership.

Credits

My key collaborator included Senior Art Director and design system wizard Jeff Chin, who carries valuable historical knowledge about Toyota’s digital platforms. Jeff focused on strategy and identifying needs, while I led implementation for system design and component architecture.