My Role at Fearless
At Fearless, I served as a technical product manager and software engineer tasked with building a comprehensive design system from the ground up to unify user experiences across multiple applications. I prioritized web accessibility to ensure our interfaces were inclusive and compliant with accessibility standards. Given the need to support various frontend frameworks like React, Vue, and Angular, I leveraged Stencil.js to create reusable, framework-agnostic components, enhancing the design system's compatibility and scalability.
Additionally, I developed the technical requirements and established a thorough testing process to ensure component quality, consistency, and accessibility. Collaborating closely with designers and developers, I delivered a robust design system that optimized usability and accessibility across platforms.
In addition to my technical product management responsibilities, I acted as the Scrum Master, guiding the team in Agile practices, sprint planning, and task management.
Key Skills
Design System Development: Expertise in building a comprehensive design system from the ground up to unify user experiences across applications.
Web Accessibility: Strong focus on implementing best practices for web accessibility to create inclusive and compliant interfaces.
Technical Requirements Creation: Experience in developing technical specifications to guide project execution and component functionality.
Testing Process Design: Established thorough testing processes to ensure component quality, consistency, and adherence to accessibility standards.
Cross-Functional Collaboration: Ability to work closely with designers, developers, and stakeholders to align on project goals and deliverables.
User-Centric Focus: Committed to enhancing usability and overall user experience through thoughtful design and implementation.
Case Study
Building an Inclusive, Scalable Design System at Fearless
Project Overview
As a Technical Product Manager and Software Engineer at Fearless, I led the development of a comprehensive design system designed to unify user experiences across multiple applications. This project required creating a cohesive system that was not only visually consistent but also fully accessible, scalable, and compatible across diverse frameworks, including React, Vue, and Angular. The primary goal was to enable seamless user interactions while meeting industry accessibility standards.
Challenges and Goals
Cross Platform Compatibility: Fearless applications utilized a variety of frontend frameworks, so the design system had to be adaptable across multiple technologies without sacrificing performance or maintainability.
Web Accessibility: Prioritizing accessibility, I ensured the design system would meet WCAG guidelines, making the interfaces inclusive for all users.
Scalability and Consistency: The system needed to be easily extensible and consistent across different applications to support future growth and new projects.
Key Actions and Solutions
Framework Agnostic Component Design: To address compatibility challenges, I utilized Stencil.js, which allowed me to create reusable, framework agnostic components that could be used across React, Vue, and Angular applications. This approach enhanced the system’s scalability and adaptability.
Accessibility Driven Development: I embedded web accessibility standards into each phase of the project, ensuring that components met WCAG compliance requirements. This meant thorough testing for keyboard navigation, screen reader support, and color contrast in all UI elements.
Technical Specifications and Requirements: I developed detailed technical requirements to guide component development, with specific parameters for functionality, design specifications, and integration processes. This documentation provided developers with a clear understanding of each component’s purpose and technical expectations.
Robust Testing Framework: To ensure consistent quality and accessibility, I established a comprehensive testing process, incorporating unit tests, usability tests, and accessibility audits. This framework facilitated early detection of issues, minimizing rework and enhancing overall component reliability.
Cross-Functional Collaboration: Partnering closely with designers, developers, and stakeholders, I aligned the team around the project’s goals, ensuring the design system met both technical and usability standards. Regular feedback loops enabled continuous improvement, fostering a user-centric development process.
Outcomes
Enhanced Usability and Accessibility: The new design system made interfaces more accessible, improving usability for all users and ensuring compliance with accessibility standards.
Increased Efficiency and Scalability: Framework-agnostic components reduced development time across projects, allowing Fearless to scale applications more efficiently.
Streamlined Cross Team Collaboration: By establishing clear technical guidelines and a standardized testing framework, I enabled smoother collaboration between teams, reducing bottlenecks and improving the quality of project deliverables.