Design Systems
I have extensive experience in developing and contributing to design systems across various projects. Here, I will outline my processes and key contributions to three notable design systems:
1. Rakuten Travel: I created a new design system from the ground up, focusing on enhancing user experience and ensuring consistency across the platform.
2. Ford Customization: I adapted and customized an existing design system for Ford, tailoring it to meet specific project requirements and improve usability.
3. Ford Master (Core) Design System: I contributed to Ford’s master design system, ensuring consistency and scalability across all projects by defining guidelines, creating components, and maintaining the system.
1. New Design System Creation for Rakuten Travel
Leveraging Existing Assets
Rakuten, with its extensive network of subsidiaries, had existing design elements such as style guides, fonts, patterns, and major component documentation. These provided a valuable starting point for our design system.
Defining Roles and Governance
As this was a new endeavor within the Travel department, we established clear roles and governance to manage the workflow and decisions. I streamlined the process, developing micro-strategies for adding new components and creating checklists and guidelines to ensure consistency and efficiency.
Tools and Management
Relied on Notion and Figma for consolidating decisions. JIRA and Confluence were used to manage use cases and version history, serving as our source of truth for product requirements.
Process and Implementation
Evaluating and Inventorying:
I began by assessing the existing inventory, noting discrepancies in color schemes, typography, icons, and patterns. We identified numerous inconsistencies, such as multiple shades of grey and varying design assets.
Creating a Checklist:
With the team, I created a checklist to determine valuable components with solid use cases versus those that could be deprioritized. We also established a shared vision, timeline, and realistic scope of deliverables.
Setting Up Figma Playground:
I set up a Figma playground to experiment with and create components such as buttons and input fields. My focus included:
1. Creating variants for sizes, colors, and states.
2. Addressing various scenarios, including empty states, data-filled situations, and responsiveness across web and app platforms.
3. Defining interaction states like hover and click behaviors.
4. Managing localization by determining appropriate text lengths within fields.
Development and Documentation:
After thorough verification and collaboration with product and development teams, components moved into development. I documented each component, detailing its purpose, usage, implementation, variations, style properties, and code/design references.
Impact and Reflection
The design system established for Rakuten Travel laid a solid foundation for the app’s relaunch, ensuring consistency, efficiency, and scalability. This experience underscored the importance of clear governance, collaboration, and meticulous documentation in creating a successful design system.
2. Ford Design System: Adapting and Customizing - for project based use cases
I joined D-Ford, Ford’s design innovation lab, where numerous service experience concepts are tested. The presence of multiple project-specific design systems led to significant inconsistencies, prompting the need for a unified design system. Given the high costs and inefficiencies of starting from scratch, the team decided to adapt and customize an existing design system.
Role and Responsibilities
I began contributing to a new design system tailored to Ford’s needs based on project by project. This was in the absense of a master/core design system at the time. Since Ford HMIs (in-vehicle screens) follow the Android Auto framework, we leveraged the Material Design system as our foundation. My primary role involved creating custom components to meet Ford’s unique requirements.
Key Contributions
ADAS Features:
Designed custom components to display Advanced Driver Assistance Systems (ADAS) features, ensuring clear and intuitive user interactions.
Speedometers:
Developed speedometer components that fit within the existing design framework while meeting Ford’s specific functional needs.
Responsive Pop-Ups
Created responsive pop-up elements that maintained usability across different devices and screen sizes.
Development and Documentation:
After thorough verification and collaboration with product and development teams, components moved into development. I documented each component, detailing its purpose, usage, implementation, variations, style properties, and code/design references.
Challenges and Learnings
This design system was primarily focused on concept testing and validation. In retrospect, some practices were not scalable or ideal:
Naming Conventions
We did not consistently follow proper naming conventions, which led to confusion and inefficiencies.
Status Visibility
Issues with visibility and tracking of component status hindered the system’s scalability and maintainability.
Impact and Reflection
Although the project faced challenges, it provided valuable insights into the importance of scalable and well-documented design systems. The experience emphasized the need for clear conventions and robust governance to ensure long-term success.
3. Ford Core Design System: Collaborating on a Unified Approach
After encountering numerous complications with the previous project-specific design systems, our lab initiated collaboration with the larger organization to develop a Core Design System. This master design system aimed to unify and streamline design practices across Ford’s diverse projects. This design system is still under development and thus only limited information can be shared.
Role and Responsibilities
Federated Team Collaboration:
Worked within a federated team, which included a designated core product team and various product teams contributing to the design system. This collaborative approach ensured that the design system was comprehensive and met the diverse needs of different projects.
Key Contributions
Documentation and Guidelines:
Leveraging my experience with design systems, I was tasked with documenting and creating an environment to establish and maintain the system. I have set documentation for multiple components and guidelines, including:
Approval Guidelines: Developed a clear process for getting approval to enhance existing components.
Design Principles: Outlined core design principles to ensure consistency and adherence to best practices.
Naming Conventions: Played a key role in establishing and maintaining naming convention standards to ensure clarity and uniformity.
Component Design
Atomic Design Approach: Followed the atomic design methodology, where colors were treated as atoms, button plates as molecules, and buttons as organisms. This structured approach facilitated the creation of scalable and reusable components.
Custom Components: Contributed to the design of various elements such as buttons and upfit templates, ensuring they met the core design system’s standards and were adaptable to different use cases.
Process and Methodology
Structured Collaboration:
Worked closely with cross-functional teams to ensure alignment and consistency. Regular reviews and feedback sessions were integral to maintaining the system’s integrity and adaptability.
Continual Improvement:
The development of the core design system is an ongoing process. My focus has been on creating a detail-oriented and scalable system that evolves based on user feedback and emerging needs.
Impact and Reflection
This project has been the most detail-oriented and scalable design system I have worked on. The collaborative efforts and structured approach have laid a strong foundation for a unified design practice within Ford, addressing previous inconsistencies and improving overall efficiency. Collaborating on Ford’s Core Design System has been a transformative experience. It underscored the importance of clear documentation, consistent naming conventions, and a collaborative approach to creating a scalable and efficient design system. This project continues to inform my approach to design system development, emphasizing the value of a unified and methodical strategy.
