Swiftlane: Design System

ℹ️ Some details were altered for confidentiality.

About
Swiftlane is a custom design system built on 🔗Ant Design.

Background
The design team was frustrated by frequent misimplementation of their designs by developers. The two teams then worked on improving collaboration, ultimately leading to the creation of Swiftlane.

Team
The project, spanning seven months, involved three designers (UX, UI, and Visual) and five developers (mainly front-end).

Problem
Despite close collaboration between the design and development teams, the implementation results were often disappointing. An anonymous survey revealed several causes, including:

• Developers often interpreted design requirements differently due to frequent revisions and poor communication from designers.

• Skill gaps within the development team significantly impacted their ability to deliver effectively.

• Technical limitations during implementation hindered developers' ability to execute designs as intended, leading to improvised solutions.

• As the company was growing rapidly and expanding its product portfolio, time pressures were causing mounting design debt.

Approach
Some of the uncovered issues were beyond the team's immediate control. However, the design system was one area where significant improvements could be made. The team devised the following four-step plan:

1. Audit: Analyze the current implementation to identify and document inconsistencies between design and implementation.

2. Establish: Define foundational tokens like color and typography and update UI components like buttons and icons accordingly.

3. Test: Continuously review and test updated components as changes are made to tokens or new components are added.

4. Maintain: Regularly perform audits, updates, and testing to keep designs current and ensure quality.

Approval
Securing management's approval was essential due to the project's resource requirements. This was achieved by following three steps:

1. Master the basics: Explore best practices and industry inspiration to build a strong foundation.

2. Develop a timeline: Outline key milestones, expected roadblocks, and resource allocation.

3. Present to management: Emphasize the business impact and key numbers, highlighting how the project will deliver a strong ROI.

Tools
The teams compared various market solutions, including libraries, frameworks, and tools. They decided to continue with Ant Design due to its partial adoption and familiarity. Adapting it to the company's branding and style guides allowed the teams to save time and avoid reinventing the wheel.

Responsibilities
A designer and a developer were responsible for owning Swiftlane, while the remaining members of both teams played distinct yet interconnected roles.

• Designers: Whenever components were added or changed, designers were responsible for handing them over to developers. Designers validated implementation results to ensure alignment with the original designs.

• Developers: All developers contributed to creating and testing new components. A subset of developers focused on managing, reviewing, and releasing updates for Swiftlane.

Challenges
Throughout this project, the teams encountered several significant hurdles that impacted their progress and required targeted strategies to overcome. The key challenges and how they were addressed included:

• Maintain Momentum: Encourage team adoption of Swiftlane by making it indispensable, ensuring adherence to new practices, and preventing regression to old habits.

• Balance Restriction and Evolution: Avoid constant changes, but remain flexible enough to evolve the system when necessary. The design system should simplify work, not complicate it.

• Manage Releases: Semantic versioning ensured continuous updates to the live environment while maintaining Swiftlane's integrity. Testing changes before deployment helped minimize revisions.

Improvements
Implementing the design system was expected to significantly benefit the workflow in the following areas:

• Efficiency and Accuracy: Accelerate product delivery with modular, well-tested components that ensure high-quality releases.

• Versatility and Scalability: Provide flexibility with well-defined specifications, supporting all current and future needs.

• Consistency and Insightfulness: Establish a single source of truth for product teams and enable informed decision-making.

• Intuitiveness: Offer cohesive and engaging user experiences through intuitive and modern interfaces.

Results
Unfortunately, the company did not survive long enough to benefit much from these improvements. Shortly after Swiftlane went live, the company underwent significant restructuring and the design team was dissolved.