Multi-brand design system
Building a design system for e-government software products easily adaptable to customer organizations' brands
Material Design
Material-UI (MUI)
Figma
Storybook
create-react-app
Amplitude
Understading the context
Public sector organizations have been under a lot of pressure to digitalize their services to better serve their citizens, by requirement of new laws and by the advance of digital services in all aspects of our society.
Most of them have done a decent job by now with their websites, the entry point of their digital presence:
But when it comes to transactional systems, the reality is that most of the public sector falls behind either in features, in design or both. Larger organizations usually rely in tailor-made solutions by big tech companies and consultancies or by the organization itself, and smaller organizations tend to rely on products from boutique companies or rare open-sourced systems from other organizations.
A quick overview of commercial products from boutique companies, for example, reveals many issues:
- The front-end stack is outdated with technologies like JSP, ASP.Net, vanilla CSS / Javascript, jQuery
- They have been built from scratch, usually without a design system (with Bootstrap being the exception)
- Heavily rely on code customizations like templates, extensive CSS rules, custom backend or frontend development
- Design patterns usually deviate from well-known and established UI/UX patterns
- There’s a clear lack of customization available
- Don’t feel organically integrated with other systems of the customer organization
- Visual design is lacking, to the point that some of them feel like scam sites or the web from a decade ago
The above can be condensed and rated on four dimensions:
- Customization: how well the solution can be adapted to look like part of the organization
- Integration: what methods and to what degree the solution relates to other systems of the organization
- Technology: what has been used to develop the solution and what is is being used to deploy it
- Wow factor: how good (or bad) is the user experience through their journey with the solution
Specifying user requirements
A multi-brand design system can tackle 3 of the 4 dimensions:
Requirements addressable for the customer (the public sector organization):
- Easy to adopt and deploy (technology)
- Up-to-date stack (technology)
- No-code personalization (customization)
Requirements addressable for the end user (the citizens):
- Familiar patterns and flows (wow factor)
- Usable on any device (technology)
- Trustable, organically integrated (wow factor + customization)
Designing the solution
To ensure a certain degree of familiarity and availability of an implementation with modern stacks, several popular design systems were considered:
- Material Design (Google)
- Human Interface Guidelines (Apple)
- Atlassian Design System (Atlassian)
- Polaris (Shopify)
- Ant Design (Ant Group)
Given the predominance of Android-based devices in Spain and the broad familiarity with many of Google’s services, along with the availability of an open-source implementation of components in MUI (formerly Material UI), Material Design was selected to build the e-government design system.
The rest of the requirements were to be implemented on top of the design system using agile methodologies and breaking the project into 3 milestones progressively enhancing the solution:
Based on past experience, two other decisions were made to speed-up the process:
- Relying on a mobile-first approach where MVP designs are fleshed out first on a mobile-sized display and later enriched for larger displays with complimentary features or information
- Adopting a grayscale palette to ensure any element works visually without relying on color frist
Testing with target organizations
The first phase of the e-government design system has already been implemented on a pilot software product, here applied to selected city councils expressly for this case study:
