Project Overview
The Challenge: Elevate Centime's product design to achieve a contemporary aesthetic, consistent user experience, and increased efficiency, in order to enhance user satisfaction and business outcomes.
The Solution: Development of a comprehensive design system to streamline design processes, ensure brand consistency, and provide a scalable foundation for growth.
Problem Statement
Centime's existing design lacked cohesiveness and alignment with modern trends, impacting user experience and development efficiency. Key issues included:
Inconsistent Visuals: Varied UI elements across platforms led to a disjointed experience.
Outdated Aesthetic: The design didn't meet contemporary user expectations.
Inefficient Workflows: The lack of a centralized system created redundancies for designers and developers.
Brand Dilution: A weak design language negatively impacted brand perception.
Inconsistent Visuals: Varied UI elements across platforms led to a disjointed experience.
Outdated Aesthetic: The design didn't meet contemporary user expectations.
Inefficient Workflows: The lack of a centralized system created redundancies for designers and developers.
Brand Dilution: A weak design language negatively impacted brand perception.
My Role
Core Team Member: As part of a 3-member team, I was instrumental in developing Centime's comprehensive design system.
Visual Foundation: Actively explored design trends and helped define the system's color palette, typography, and spacing.
Component Creation: I was instrumental in the hands-on creation of the robust Figma component library. This involved designing and building reusable UI elements like buttons, forms, navigation, and data display components, ensuring consistency and scalability.
Component Creation: I was instrumental in the hands-on creation of the robust Figma component library. This involved designing and building reusable UI elements like buttons, forms, navigation, and data display components, ensuring consistency and scalability.
Accessibility Advocate: Ensured the design system met accessibility standards, supporting an inclusive user experience.
Design Principles
The design system was guided by the following principles:
• Contemporary & User-Centric
• Workflow Efficiency
• Collaboration-Focused
• Data-Driven
• Brand Alignment
• Accessibility
• Scalability
• Workflow Efficiency
• Collaboration-Focused
• Data-Driven
• Brand Alignment
• Accessibility
• Scalability
Key Components
Colors: A 100+ color palette meticulously aligned with the brand and featuring a logical naming system.
Typography: Roboto sans-serif for a modern and versatile look.
Design Tokens: To streamline the design-to-development handoff.
Iconography: A well-defined icon library that aligns with the overall design language and ensures visual clarity.
Comprehensive Components: Robust library including
• Buttons
• Input fields
• Navigation elements (Tabs, Tags, Header, Breadcrumbs)
• Popups, Modals, and Notifications
• Data Display (Tables, Timeline, Messages)
• Forms (Toggle, Checkbox, Dropdown, List)
• Layout Elements (Cards, Accordion, Pagination)
• Miscellaneous (Tooltip, Settings)
• Buttons
• Input fields
• Navigation elements (Tabs, Tags, Header, Breadcrumbs)
• Popups, Modals, and Notifications
• Data Display (Tables, Timeline, Messages)
• Forms (Toggle, Checkbox, Dropdown, List)
• Layout Elements (Cards, Accordion, Pagination)
• Miscellaneous (Tooltip, Settings)
Outcomes
Efficiency Gains: Reduced design time and faster feature releases.
Improved Maintainability: Centralized assets reduced ongoing maintenance costs.
Enhanced Consistency: Strengthened brand identity and a seamless user experience.
Accessibility Compliance: Expanded user base and potential increased revenue.
Foundation for Growth: A scalable design system to support Centime's expansion.
Building blocks for tables
Dropdown components
Accounts receivable screen created with design system components.
KPI screen created with design system components.
Banking screen
Some of the icons and illustrations
