Networks for Good
2019–2022
User Experience
User Interface
Design System
Brand Identity
As the umbrella organisation for Alumnet, All of Us, and Gaggle, NFG faced the challenge of delivering unique branding and functionality for each product while ensuring a shared technical foundation for efficiency and scalability.
The solution: A white-label design system that served as the backbone for all products, enabling faster development, seamless customisation for each client, and a consistent user experience.
NFG needed a flexible system to scale across multiple products with minimal duplication of effort.
Each product—Alumnet (for alumni engagement), All of Us (for inclusive community building), and Gaggle (for companies and people)—had distinct branding requirements. Each of those platforms had their own set of clients, who each used their own logos, colours, typography and content.
The design system had to ensure a uniform user experience while accommodating unique functionalities for each platform.
Reducing time-to-market for new features and simplifying updates across all products was critical.
The white-label design system provided a centralised foundation of reusable components, flexible branding options, and a modular framework. It empowered NFG to support its suite of products with the following benefits:
Shared UI elements like buttons, forms, navigation menus, and data displays were standardised across products to ensure consistency.
Dynamic theming allowed for unique branding (colours, logos, typography) for each product while using the same codebase.
Each product could add, remove, or modify features without impacting the shared system.
The system supported growth by enabling quick feature rollouts across multiple platforms.
- Conducted stakeholder interviews to understand the needs of each product team.
- Defined the core design principles for scalability, usability, and brand flexibility.
- Designed a comprehensive library of reusable UI components.
- Ensured accessibility compliance across all components (e.g., WCAG standards).
- Built a theming engine to support product-specific branding.
- Developed guidelines for applying themes to maintain consistency while allowing creative freedom.
- Created prototypes for key features across Alumnet, All of Us, and Gaggle.
- Conducted usability testing to validate the user experience across the three platforms.
- Worked closely with developers to integrate the design system into the shared technical architecture.
- Ensured seamless implementation of the theming engine and modular components.
- Launched the design system across all products in phases.
- Established feedback loops to iterate on the system based on user and stakeholder input.
- Reduced development time for new features by 40%.
- Simplified maintenance by consolidating updates into the shared system.
- Each product retained its unique identity while benefiting from a consistent user experience.
- Enabled Alumnet’s professional tone, All of Us’ inclusive and approachable design, and Gaggle’s youthful vibrancy—all using the same underlying system.
- Standardised components enhanced usability and familiarity for users navigating between products.
- The shared system ensured high performance and reliability across platforms.
- Positioned NFG to easily add new products or adapt existing ones to evolving user needs.
- The modular approach allowed rapid testing and deployment of new ideas.
The Events page was designed as a critical feature for NFG's suite of products—Alumnet, All of Us, and Gaggle. Each product had distinct requirements for event functionality.
Professional networking events like reunions, career fairs, and webinars.
Inclusive, community-oriented events such as workshops, discussions, and celebrations.
Company-focused events, including virtual hangouts, study groups, and school activities.
To meet these diverse needs, the white-label design system was utilised to create a scalable, customisable Events page that seamlessly integrated across all platforms.
Customisable Filters: Allow users to search by category, date, location, or virtual/in-person.
Dynamic Listings: Display upcoming and past events with key details like title, date, and organiser.
Event Creation: A user-friendly form for organisers to create and publish events, including options for:
- Adding images, descriptions, and location details.
- Setting registration limits or RSVP requirements.
Editing Tools: Allow event organisers to modify event details easily.
RSVP System: Users can register for events with one click.
Social Sharing: Options to share events directly on social media or via email.
Reminders: Automatic reminders for registered attendees.
- Increased event participation rates by 35% within six months of launch.
- Positive feedback from users on the ease of discovering and creating events.
- Reduced development time by 60% using the shared white-label components.
- Simplified updates across all platforms, ensuring consistency and reliability.
- Alumnet: Boosted professional networking engagement by providing a centralised hub for alumni events.
- All of Us: Strengthened community connections through inclusive and accessible event tools.