Process I Followed
Overview
SMEAssist was conceived as a comprehensive ERP solution tailored for small and medium-sized enterprises, spanning modules such as Inventory, Sales, CRM, Accounting, HR, and Reporting. From day one, we knew we weren’t just building screens, we were building a scalable, modular ecosystem.
So instead of designing features ad hoc, we took a different approach: design the design system first.
Our goal wasn’t just visual consistency. We wanted to embed reusability, accessibility, and design logic into the DNA of the product. The design system would be the single source of truth from which the product would grow.
My Role
Design end-to-end solution, I collaborate with multiple stakeholders, business heads, to translate their pain points into solutions that enhance the overall user experience.
Timeline - 03 Weeks
Outcome
Faster Time to Market - Modules were delivered faster because the building blocks were already tested and ready to go.
Consistency Across Features - Whether on CRM or Inventory, users experienced the same patterns and visuals.
Scalability Baked In - Adding new modules (HR, Payroll, Integrations) is now easier because the system handles 80% of the UI work upfront.
Foundation for Branding & Theming - The system is brand-ready: changing colors, typography, or logo now takes minutes, not weeks.
Why Start with a Design System?
No legacy UI to inherit or clean up
Since there was no prior product, we had a blank slate. This allowed us to think systemically from the outset.Anticipated complexity
SMEAssist had 10+ interconnected modules planned. Without a system, inconsistency and fragmentation were inevitable.Scalable collaboration
Multiple designers and developers would be working across modules. A shared library was essential to move fast and stay aligned.Efficiency and future-proofing
Starting with a system would save time long-term by avoiding redesigns, inconsistent interactions, and visual rework.
Define the System’s Foundations
We began by establishing the design language, the foundational building blocks of SMEAssist's UI and UX.
🧱 Core Foundations:
Typography: Selected a clean, legible typeface that worked well for dense data and mobile views, defined styles for headings, body, captions, and system text.
Colour System: Built a token-based palette with defined roles: primary, secondary, neutral, and semantic colours (success, warning, error, info). Prioritised accessibility and contrast.
Spacing & Grid System: Defined a consistent 8px-based spacing scale and built a 12-column grid for responsive layouts across desktop and tablet screens.
Iconography: We have used a Material Design icon not created by us because the timeline for designing the ERP was very tight.
Elevation & Shadows: Defined a clear set of elevation levels for surfaces: cards, modals, navigation drawers, etc.
Build the Component Library (Atomic Design Approach)
With the foundations in place, we followed an Atomic Design methodology to construct reusable components.
Atoms - Buttons, labels, input fields, checkboxes, radio buttons, tags, tooltips.
Molecules - Form groups, dropdowns, data fields with validation, search + filters.
Organisms - Navbars, modals, paginated tables, tabbed layouts, card layouts, multi-step forms.
Design the Product Using the System
Once the system was mature, we began applying it to actual product modules. Each screen leveraged only the components and layouts from the system. If a new UI need emerged, we’d first evolve the design system to support it.
This system-first approach ensured
Zero UI debt
Maximum design/developer alignment
Rapid product development
Cohesive UX across modules
Key Learnings as a Designer
Design the system before the product, especially if you're starting from zero. Invest in components early to avoid rework later.
Design in real context - test components inside real screens and flows.
Don’t wait to document - build guidelines and usage notes from day one.
Don’t wait to document - build guidelines and usage notes from day one.
Stay flexible - a system is living; evolve it as your product grows.
For SMEAssist, starting with a design system wasn’t just a design decision—it was a product strategy. It helped us move faster, stay aligned, and build an ERP platform that’s not just functional, but also delightful and scalable.
Let's Connect
Available for work
Feel free to reach out for collaborations or just a friendly hello
+91 7838 2245 16