Designing for Scale: A Multi-Client Design System for Pantegral
Building a scalable design system that powered the creation of 9 customized client portals—balancing consistency, flexibility, and speed across diverse industries.
01
Overview
Pantegral is a digital portal platform that simplifies operations for purpose-driven organizations, empowering them to focus on their mission rather than administrative complexity. As the lead designer at Pantegral, I played a pivotal role in establishing the product's foundation—from helping defining the overall product direction and user experience strategy to creating comprehensive designs and contributing to strategic road mapping.
02
The Challenge
How do we design and deploy new client-specific portals that feel personalized without compromising on usability or development efficiency?
One of the most significant challenges we faced was creating a cohesive yet flexible design system that could accommodate the diverse needs of our clients. Pantegral required a modular design framework capable of scaling to support an unlimited number of custom client portals, each meticulously tailored to the unique workflows, operational requirements, and brand identities of our partner organizations.
My responsibility was to lead the complete design process for these portals, balancing three critical objectives: maintaining visual and functional consistency across all platforms, ensuring exceptional usability for end users, and providing the flexibility necessary to adapt to each client's specific functional requirements. This required developing a sophisticated design system that could serve as both a unifying foundation and a flexible toolkit for customization.
The challenge lay not just in creating beautiful interfaces, but in architecting a design ecosystem that could scale efficiently while preserving the unique identity and operational needs of each partner organization.
Consistency
Ensuring a consistent user experience across different client implementations.
Flexibility
Adapting portal features to match varying organizational structures and workflows.
Scalability
Collaborating with developers to ensure design scalability and maintainability.
03
My Approach
Building a scalable design methodology for diverse client needs
To ensure consistency and scalability across new portal designs, I began by building a base design system grounded in shared user needs. I started with the Pixelmatters Design System template from the Figma Community, using foundational atoms like buttons and links to build molecule components such as cards. Since we are aiming to build all future portals in React, I added icons to our design system from the React Line Icons library.
I created molecules with the Ant Design’s robust framework, allowing me to quickly assemble clean, responsive wireframes. The Ant Design system provided a solid foundation of accessible, production-ready components—saving time, reducing dev handoff friction, and ensuring cross-portal consistency.
I mapped out the core portal architecture and created a set of foundational wireframes that served as a flexible blueprint for all clients. These wireframes prioritized key workflows, like admin settings, profile editors, dashboards, and help pages, offering a consistent structure that could be visually customized. This gave us a stable and reusable base that made prototyping and iteration significantly faster.
Alongside this, I designed a modular component library to support frequently used portal features, including contact lists, file attachments, notes, and media uploads. Each component was designed for reuse but could flex to meet client-specific needs. This system-first approach enabled us to deliver portals that felt both personalized and cohesive, while also streamlining development, scaling design efforts, and simplifying future updates.
04
Results
Take a look into some of the different portal designs I created on Figma
Sparkjoy Studios - Internal Project Management Portal
As the parent company of Pantegral, Sparkjoy Studios needed a custom internal portal to manage its client retainers and development projects. Built on top of the shared design system, this portal allows team members to track hours and project statuses, and respond to support tickets. Clients also have access to a streamlined interface to submit issues and monitor their monthly retainer usage in real time. This portal served as the first implementation of our system—helping us validate key components like time tracking, ticket management, and dual-access views (internal vs. client-facing).
We also extended the portal’s reach by creating WordPress-compatible widgets using our component library. These widgets replaced the default WordPress dashboard on client websites, giving clients direct access to their ticket history and remaining retainer hours without leaving their own site. This created a more seamless, integrated experience and helped reinforce ongoing transparency and trust with Sparkjoy’s clients.
EduCanada - Brand Extranet Portal
EduCanada, a joint initiative of Global Affairs Canada and the Council of Ministers of Education, supports international student recruitment by promoting Canadian education abroad. Their portal needed to provide government employees and trade commissioners with seamless access to marketing materials for presentations, posters, and other outreach efforts.
Using the shared system foundation, we built on core templates while introducing new components to meet EduCanada’s specific needs, such as a gallery-style asset browser, editable asset detail pages, and the ability to create curated Collections. I also designed and implemented features to manage taxonomy tags and multilingual content. Admin users can now update and translate the entire portal (EN/FR) directly through a custom front-end interface, making ongoing content management accessible and efficient without developer support.
This implementation expanded our component library and demonstrated the flexibility of the system to support structured content, localization, and user-specific content workflows.
Laid Back Snacks - Corporate Gifting Portal
Laid Back Snacks needed a dedicated portal to streamline their corporate gifting program, allowing companies to easily send curated snack boxes to employees for holidays, milestones, and team celebrations. I designed a custom portal where corporate clients could create accounts, upload employee lists via spreadsheet, and place bulk gift orders in just a few steps.
To support this experience, we introduced new components into our design system including payment processing modules using Stripe, bulk data upload tools, order tracking dashboards, and automated receipt generation. The portal also routed order details directly to the delivery team, reducing manual coordination and turnaround times. This implementation brought e-commerce functionality into the Pantegral platform and demonstrated how flexible the system could be when adapting to business-specific workflows.
Anxiety Canada - Fundraising Portal
Anxiety Canada needed a platform to support fundraising and empower individuals to raise money for mental health initiatives. I designed a portal where users could create personal accounts, launch individual or group fundraising campaigns, and share campaign pages with their networks. Each campaign page automatically generated a donation link, making it easy for supporters to contribute directly.
The system stored and displayed all relevant campaign information—including progress tracking, team member bios, and donation goals—on a public-facing campaign page. This allowed for transparency and shareability, helping campaign hosts maximize visibility and reach. The portal extended our design system with new templates for donation flow, campaign management, and public engagement—opening the door for more cause-based, community-driven use cases.
Healthy Campus Alberta - Community Hub Portal
Healthy Campus Alberta needed a digital space where post-secondary staff with healthcare professions could connect, share mental health resources, and collaborate across institutions. We designed a centralized portal to host ongoing community-led conversations, with built-in tools for documentation, knowledge sharing, and moderation. The platform supported real-time collaboration while also archiving insights for future reference, turning each conversation into a lasting resource.
We extended our design system with new features like summary output pages and participant dashboards—enabling admins to track engagement and publish insights externally. The portal helped shift HCA’s community engagement efforts from short-term meetings to an ongoing, evolving knowledge network that empowers users to contribute meaningfully over time.
Learn more about this project here.
A Scalable System That Delivered at Scale
The portal designs helped Pantegral elevate its offering by delivering a tailored yet consistent product experience across nine unique client use cases. Our scalable design system became a foundational asset, enabling our team to spin up new portals faster while maintaining high design cohesion and adaptability.
Today, thousands of users across Canada engage with these portals daily—submitting support tickets, accessing digital resources, placing orders, managing teams, and more. This system-oriented approach not only accelerated production timelines but also ensured smoother onboarding and long-term maintainability for the Pantegral team.
05
Impact
Want to learn more?
Connect with me on LinkedIn or email me at jananiramesh75@gmail.com