ℹ️ Some details were omitted or changed for brevity and confidentiality.
About
Swiftlane is a custom design system built on 🔗Ant Design.
Background
The design team grew frustrated as their designs were not being accurately implemented by developers. The 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, implementation results were often disappointing. An anonymous survey revealed several underlying issues, 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:
-
Audit: Examine the current implementation to identify and document design inconsistencies.
-
Establish: Define foundational tokens like color and typography and update UI components like buttons and icons accordingly.
-
Test: Continuously review and test updated components as changes are made to tokens or new components are added.
-
Maintain: Regularly perform audits, updates, and testing to keep designs current and ensure quality.
Approval
Building a strong case to win management's approval was key, as the project required resources. This was achieved by following three steps:
-
Master the basics: Explore best practices and industry inspiration to build a strong foundation.
-
Develop a timeline: Outline key milestones, expected roadblocks, and resource allocation.
-
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 opted to continue with Ant Design, already partially in use and familiar to the team. 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 also verify the implementation results against their designs.
-
Developers: All developers contributed to creating and testing new components. Additionally, 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: Foster team adoption of Swiftlane by making it indispensable and ensuring adherence to new practices while avoiding a return 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
By implementing the design system, the teams expected to bring significant benefits to their workflow, specifically 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 from the these improvements. Shortly after Swiftlane went live, the company underwent significant restructuring and the design team was dissolved.