Building and scaling a design system
Building and scaling a design system
Building and scaling a design system
Building and scaling a design system
Designing a simple yet impactful design system
Rebuilding Stronger, One Golden Piece at a Time
Rebuilding Stronger, One Golden Piece at a Time
When I joined Arontel in July 2025, I felt as though I had walked into a time capsule. The product I encountered had remained unchanged for nearly a decade. What struck me first wasn’t just the product’s age, but its inconsistency. No two buttons matched, and the badges appeared to have been designed by five different people—because they had been. The IVR portal, which serves as the heart of Arontel’s system, was confusing, cluttered, and difficult to navigate without getting lost.
As the only designer on the team, I realized that I wasn’t simply redesigning a portal; I was also establishing a design culture that didn’t yet exist.
When I joined Arontel in July 2025, I felt as though I had walked into a time capsule. The product I encountered had remained unchanged for nearly a decade. What struck me first wasn’t just the product’s age, but its inconsistency. No two buttons matched, and the badges appeared to have been designed by five different people—because they had been. The IVR portal, which serves as the heart of Arontel’s system, was confusing, cluttered, and difficult to navigate without getting lost.
As the only designer on the team, I realized that I wasn’t simply redesigning a portal; I was also establishing a design culture that didn’t yet exist.
When I joined Arontel in July 2025, I felt as though I had walked into a time capsule. The product I encountered had remained unchanged for nearly a decade. What struck me first wasn’t just the product’s age, but its inconsistency. No two buttons matched, and the badges appeared to have been designed by five different people—because they had been. The IVR portal, which serves as the heart of Arontel’s system, was confusing, cluttered, and difficult to navigate without getting lost.
As the only designer on the team, I realized that I wasn’t simply redesigning a portal; I was also establishing a design culture that didn’t yet exist.
When I joined Arontel in July 2025, I felt as though I had walked into a time capsule. The product I encountered had remained unchanged for nearly a decade. What struck me first wasn’t just the product’s age, but its inconsistency. No two buttons matched, and the badges appeared to have been designed by five different people—because they had been. The IVR portal, which serves as the heart of Arontel’s system, was confusing, cluttered, and difficult to navigate without getting lost.
As the only designer on the team, I realized that I wasn’t simply redesigning a portal; I was also establishing a design culture that didn’t yet exist.
My Role
•
Led end-to-end design system creation and IVR portal redesign
Led end-to-end design system creation and IVR portal redesign
Led end-to-end design system creation and IVR portal redesign
•
Collaborated directly with founders and developers to align on vision and priorities
Collaborated directly with founders and developers to align on vision and priorities
Collaborated directly with founders and developers to align on vision and priorities
Collaborated directly with founders and developers to align on vision and priorities
•
Conducted Usability Testing and mapped legacy issues
Conducted Usability Testing and mapped legacy issues
Conducted Usability Testing and mapped legacy issues
•
Created scalable, atomic components and UI tokens in Figma
Created scalable, atomic components and UI tokens in Figma
Created scalable, atomic components and UI tokens in Figma
•
Prepared complete developer handoff, including CSS tokens and functional specs
Prepared complete developer handoff, including CSS tokens and functional specs
Prepared complete developer handoff, including CSS tokens and functional specs
Tools
Figma
Figma
Figma
Figma
Time Frame
July- Present
July- Present
July- Present
July- Present
Client
Remofirst
Remofirst
Remofirst
Remofirst
Objective
Objective
Objective
Create a scalable, documented design system for Arontel’s growing product suite
Create a scalable, documented design system for Arontel’s growing product suite
Create a scalable, documented design system for Arontel’s growing product suite
Redesign the IVR portal with improved clarity, usability, and hierarchy
Redesign the IVR portal with improved clarity, usability, and hierarchy
Redesign the IVR portal with improved clarity, usability, and hierarchy
Increase design–dev velocity and reduce QA friction
Increase design–dev velocity and reduce QA friction
Increase design–dev velocity and reduce QA friction
The Challenge: A 9-Year-Old Problem
The Challenge: A 9-Year-Old Problem
The Challenge: A 9-Year-Old Problem
My priority was to identify the inconsistency between my designs and the live application. After evaluating an outdated website and investigating the API calls, I found numerous variations in components, with outdated aesthetics, unclear CTAs, and a cluttered information hierarchy.
I then spoke with the founders and developers, who aimed for a complete redesign of the dashboard, starting with the IVR portal. My heuristic evaluation revealed that this required a fundamental redesign rather than a simple refresh. I presented my findings on usability issues and WCAG compliance risks and proposed a design system as the solution.
My priority was to identify the inconsistency between my designs and the live application. After evaluating an outdated website and investigating the API calls, I found numerous variations in components, with outdated aesthetics, unclear CTAs, and a cluttered information hierarchy.
I then spoke with the founders and developers, who aimed for a complete redesign of the dashboard, starting with the IVR portal. My heuristic evaluation revealed that this required a fundamental redesign rather than a simple refresh. I presented my findings on usability issues and WCAG compliance risks and proposed a design system as the solution.
My priority was to identify the inconsistency between my designs and the live application. After evaluating an outdated website and investigating the API calls, I found numerous variations in components, with outdated aesthetics, unclear CTAs, and a cluttered information hierarchy.
I then spoke with the founders and developers, who aimed for a complete redesign of the dashboard, starting with the IVR portal. My heuristic evaluation revealed that this required a fundamental redesign rather than a simple refresh. I presented my findings on usability issues and WCAG compliance risks and proposed a design system as the solution.
My priority was to identify the inconsistency between my designs and the live application. After evaluating an outdated website and investigating the API calls, I found numerous variations in components, with outdated aesthetics, unclear CTAs, and a cluttered information hierarchy.
I then spoke with the founders and developers, who aimed for a complete redesign of the dashboard, starting with the IVR portal. My heuristic evaluation revealed that this required a fundamental redesign rather than a simple refresh. I presented my findings on usability issues and WCAG compliance risks and proposed a design system as the solution.
The Idea: Build a System That Could Outlive Me
I proposed a bold shift:
We don’t just fix the portal — we create a design system.
Not one that only I could use — but one that developers, future designers, and even the founders could understand. A shared language. A repeatable structure. A visual grammar we could all agree on.
But I knew I couldn’t do it alone. So I looped in a front-end developer early. Together, we aligned on naming conventions, token structure, and the component logic that would power the next version of Arontel.
I proposed a bold shift:
We don’t just fix the portal — we create a design system.
Not one that only I could use — but one that developers, future designers, and even the founders could understand. A shared language. A repeatable structure. A visual grammar we could all agree on.
But I knew I couldn’t do it alone. So I looped in a front-end developer early. Together, we aligned on naming conventions, token structure, and the component logic that would power the next version of Arontel.
I proposed a bold shift:
We don’t just fix the portal — we create a design system.
Not one that only I could use — but one that developers, future designers, and even the founders could understand. A shared language. A repeatable structure. A visual grammar we could all agree on.
But I knew I couldn’t do it alone. So I looped in a front-end developer early. Together, we aligned on naming conventions, token structure, and the component logic that would power the next version of Arontel.
I proposed a bold shift:
We don’t just fix the portal — we create a design system.
Not one that only I could use — but one that developers, future designers, and even the founders could understand. A shared language. A repeatable structure. A visual grammar we could all agree on.
But I knew I couldn’t do it alone. So I looped in a front-end developer early. Together, we aligned on naming conventions, token structure, and the component logic that would power the next version of Arontel.
The Research: Learning From the Giants (and Simplifying It)
The Research: Learning From the Giants
(and Simplifying It)
I wish I was born with the ability to create design systems. When I started, I had no idea how to organize all my components. Luckily many great companies like Shopify, Apple, and Google’s design systems are public for me to learn from. However, these design systems were huge and served more as an inspiration rather than a guide. What really helped me level up was incorporating Atomic Design principles.
I wish I was born with the ability to create design systems. When I started, I had no idea how to organize all my components. Luckily many great companies like Shopify, Apple, and Google’s design systems are public for me to learn from. However, these design systems were huge and served more as an inspiration rather than a guide. What really helped me level up was incorporating Atomic Design principles.
I wish I was born with the ability to create design systems. When I started, I had no idea how to organize all my components. Luckily many great companies like Shopify, Apple, and Google’s design systems are public for me to learn from. However, these design systems were huge and served more as an inspiration rather than a guide. What really helped me level up was incorporating Atomic Design principles.
I wish I was born with the ability to create design systems. When I started, I had no idea how to organize all my components. Luckily many great companies like Shopify, Apple, and Google’s design systems are public for me to learn from. However, these design systems were huge and served more as an inspiration rather than a guide. What really helped me level up was incorporating Atomic Design principles.
The Process: Three Rounds, One North Star
I started prototyping immediately, knowing that feedback would shape the system.
My goal was to build a system that was robust enough to grow with the company. Even as the sole designer, I knew Arontel would house more designers in the future. To keep elements scalable, I stuck to atomic design principles, using nested components and component properties to simplify variants. This approach ensures that the system is flexible and can be expanded by multiple people while remaining organized. It’s still an ongoing learning experience to identify which components will be needed for reuse and which elements are specific for edge cases, but the foundation is solid.
My goal was to build a system that was robust enough to grow with the company. Even as the sole designer, I knew Arontel would house more designers in the future. To keep elements scalable, I stuck to atomic design principles, using nested components and component properties to simplify variants. This approach ensures that the system is flexible and can be expanded by multiple people while remaining organized. It’s still an ongoing learning experience to identify which components will be needed for reuse and which elements are specific for edge cases, but the foundation is solid.
My goal was to build a system that was robust enough to grow with the company. Even as the sole designer, I knew Arontel would house more designers in the future. To keep elements scalable, I stuck to atomic design principles, using nested components and component properties to simplify variants. This approach ensures that the system is flexible and can be expanded by multiple people while remaining organized. It’s still an ongoing learning experience to identify which components will be needed for reuse and which elements are specific for edge cases, but the foundation is solid.
My goal was to build a system that was robust enough to grow with the company. Even as the sole designer, I knew Arontel would house more designers in the future. To keep elements scalable, I stuck to atomic design principles, using nested components and component properties to simplify variants. This approach ensures that the system is flexible and can be expanded by multiple people while remaining organized. It’s still an ongoing learning experience to identify which components will be needed for reuse and which elements are specific for edge cases, but the foundation is solid.
The Impact: A More Efficient Workflow
The design system is a work in progress, but the early feedback from the development team has been incredibly positive. With the new components implemented, we've already seen significant improvements
01
Less time spent on coding new components from scratch.
Less time spent on coding new components from scratch.
Less time spent on coding new components from scratch.
Less time spent on coding new components from scratch.
02
More efficient handoffs with less explanation needed to describe design elements.
More efficient handoffs with less explanation needed to describe design elements.
More efficient handoffs with less explanation needed to describe design elements.
More efficient handoffs with less explanation needed to describe design elements.
03
Reduced back-and-forth during quality assurance (QA).
Reduced back-and-forth during quality assurance (QA).
Reduced back-and-forth during quality assurance (QA).
Reduced back-and-forth during quality assurance (QA).
04
Greater consistency between the design and the final coded product.
Greater consistency between the design and the final coded product.
Greater consistency between the design and the final coded product.
Greater consistency between the design and the final coded product.
Retrospective
As the design system grows, my focus is on a few key areas. I hope to create more standardized assets that can be reused in many ways and document how each component behaves within the context of popular frameworks like Bootstrap. As the design team grows, I'd love to collect feedback on how the system has improved their workflow and onboarding, and how we can better serve their needs. My ultimate goal is to continue measuring the impact of our system to ensure it keeps our designs consistent and increases our team's speed and productivity.
As the design system grows, my focus is on a few key areas. I hope to create more standardized assets that can be reused in many ways and document how each component behaves within the context of popular frameworks like Bootstrap. As the design team grows, I'd love to collect feedback on how the system has improved their workflow and onboarding, and how we can better serve their needs. My ultimate goal is to continue measuring the impact of our system to ensure it keeps our designs consistent and increases our team's speed and productivity.
As the design system grows, my focus is on a few key areas. I hope to create more standardized assets that can be reused in many ways and document how each component behaves within the context of popular frameworks like Bootstrap. As the design team grows, I'd love to collect feedback on how the system has improved their workflow and onboarding, and how we can better serve their needs. My ultimate goal is to continue measuring the impact of our system to ensure it keeps our designs consistent and increases our team's speed and productivity.
As the design system grows, my focus is on a few key areas. I hope to create more standardized assets that can be reused in many ways and document how each component behaves within the context of popular frameworks like Bootstrap. As the design team grows, I'd love to collect feedback on how the system has improved their workflow and onboarding, and how we can better serve their needs. My ultimate goal is to continue measuring the impact of our system to ensure it keeps our designs consistent and increases our team's speed and productivity.
View More project
Sooooo,
what’s next?
© 2025 apurva Mohapatra. This site is not finished and never will be.
1:15 AM
Sooooo,
what’s next?
© 2025 apurva Mohapatra. This site is not finished and never will be.
1:15 AM
Sooooo,
what’s next?
© 2025 apurva Mohapatra. This site is not finished and never will be.
Sooooo,
what’s next?
© 2025 apurva Mohapatra. This site is not finished and never will be.
1:15 AM