Maruti Suzuki
An automobile giant’s integrated application design with revamping their DLS and designing screens for their two businesses.
PROJECT
APP REVAMP
location
frog Design, Gurugram
ROLE
VISUAL DESIGNER
Project Overview
Revamped the Maruti Suzuki digital experience by redesigning key app screens and refining the Design Language System (DLS). The project focused on improving visual consistency, usability, and accessibility while creating a more modern, intuitive, and scalable user experience across the platform.
Their two businesses, Nexa and Arena were integrated onto a single platform.
Their goal was to grow daily service bookings, reduce booking funnel abandonment, attract loyalty engagement, improve their overall rating and consolidate users to one platform.
Colours & Tokens
A structured colour system defining core, neutral, and semantic colours across light and dark themes, ensuring visual consistency, accessibility, and scalability. Each colour was tested and tried on the user flows to check for corresponding colour matching. The token nomenclature was carried out in a three layered design as well for error prevention and unanimous usage for a team.
Spacing & Typography
A consistent spacing and typography system that establishes clear visual hierarchy, balanced layouts, and readability across different screens and components was created after trying several option on user flows in both the modes.
Components & Iconography
A reusable library of UI components and standardised icons designed to maintain consistency, improve usability, and accelerate design and development workflows.The icon set also includes self designed icons for special use cases and double layering for any edge case where visibility was essential.
Challenges
Creating a consistent and scalable design experience across the Maruti Suzuki digital ecosystem while reducing inconsistencies and repetitive design efforts.
Approach
Using Atomic Design methodology, we structured the DLS into:
Foundations: Colors, typography, spacing, and design tokens.
Atoms: Buttons, icons, labels, and inputs.
Molecules: Chips, search fields, and navigation controls.
Organisms: Service cards, content carousels, and product sections.
Components & Templates: Reusable layouts, variants, and interaction states.
Outcome
A unified, modular DLS that improves design consistency, simplifies collaboration, and accelerates product development through reusable components.
