PhonePe Design System
Category:
Design System
Client:
Phonepe
Duration:
7 months
Objective
In creating and implementing a comprehensive design system. The aim is to address the current challenges of inconsistency, lack of scalability, and inefficiency by conducting a thorough audit, implementing tokenisation for design consistency and efficiency, and deploying the design system effectively.
Project Duration
The project is estimated to span over 7-8 months, considering the complexity of the tasks involved in auditing, tokenization, and deployment phases.
Impact
The impact of this project is multifaceted:
Consistency: Establishing a consistent visual language across the system ensures a cohesive user experience and reinforces brand identity.
Scalability: By tokenizing design elements, the system becomes more scalable, allowing for easier maintenance and updates as the project evolves.
Efficiency: Implementing a design system streamlines the design and development process, reducing redundancy and improving productivity.
Current Challenges
The current challenges include inconsistency in design elements, lack of scalability, and inefficiency in the design and development process. Additionally, accessibility issues need to be addressed, and the design system needs to be tokenized for easier management and maintenance.
Scope
The project will be divided into three main phases:
Audit: Conduct a comprehensive audit of the existing design elements and their usage across the system. Identify inconsistencies, accessibility issues, and areas for improvement.
Tokenization (Design Tokens): Develop and implement a system for tokenizing design elements, including colors, typography, spacing, and components. This will ensure consistency and scalability throughout the design system.
Deployment of Design System: Deploy the design system across relevant platforms and applications. Provide documentation and guidelines for usage to ensure adoption and adherence to the established design standards.
FrameWork Used
Audit
To create design system, evaluation to current is necessary, hence audit of the current product is necessary.
After audit discussion with the UI team in collaboration with design team to finalise on the foundational elements - colours, spatial system, corner radius, elevation, typography.
Based on the same tokenisation process was taken forward.
II. Tokenisation
Pyramid structure used for tokenisation
Third Plugin - Token studio is used for creation, application of the tokens.
III. Master Library Building
In parallel to tokenisation, component creation was in progress.
The objective of establishing a master library in a design system is to provide a centralized repository of reusable components and design assets that enable consistent and efficient product development. This process ensures that design elements maintain coherence across projects, streamline collaboration between design and development teams, and facilitate scalability and maintainability of digital products.
Process Overview:
Composition-based components focus on assembling smaller components to create more complex ones, fostering flexibility and reusability.
Property-based components emphasize defining specific attributes or states, offering granular control over design variations.
Layer Naming:
Utilize auto layout features within design tools to create responsive and adaptable components.
Implement auto layout to automatically adjust the layout and spacing of components based on dynamic content or screen sizes, enhancing scalability and consistency across devices.
Creation Based on Foundation Elements:
Build components in the master library based on foundational design elements such as typography, colors, and spacing.
Ensure that components adhere to established design principles and guidelines, maintaining visual consistency and brand identity throughout the system.
Versioning Process:
Implement a versioning process to track changes and updates to the master library over time.
Use version control systems or dedicated tools to manage revisions, document changes, and facilitate collaboration among team members.
Maintain clear documentation outlining version history, release notes, and guidelines for updating and referencing components within projects.
Stress Testing
Once the component is created testing is done with respect to
line truncation
Min and max width
Responsiveness
Character limit - if any
Documentation and Training:
Provide comprehensive documentation and training resources to support adoption and usage of the master library among team members, promoting consistency and efficiency in design and development workflows.
Maintainance/Update Process
Once the component is created, the process to update entities related to component need to be in place.
Key Take Aways
Leadership: Demonstrating leadership in driving the implementation of a comprehensive design system.
Expertise: Showcasing expertise in conducting audits, implementing design tokens, and deploying design systems.
Collaboration: Highlighting the importance of collaboration across design and development teams to ensure successful implementation and adoption of the design system.
Impact: Emphasizing the positive impact of the design system on consistency, scalability, and efficiency in design and development processes.
Continuous Improvement: Stressing the importance of ongoing maintenance and iteration to keep the design system relevant and effective over time.
