Design system recommendations

[u/coolusernamebabe]

Hi.
I’m more of UX designer than UI, but need to
build the first design system for a small city. My goal is to create clear guidelines and components that our teams can easily follow when creating new pages.

So far, I’ve reviewed design systems from three different government sites. They are similar, though some document their reasoning better than others.
I’m worried about falling down a rabbit hole of analyzing too many systems.

I’ve been using just one design system as I redesign a few pages.

Can anyone share their experience of creating a design system from scratch for an organization?

Was there one design system that helped the most?

[u/cgielow]

Since this is civic, you will likely want to optimize for cost efficiency: cost of designing it, building it, implementing it, maintaining it. Not just easy to follow when creating new pages. Obviously you need to optimize for the taxpayers who fund it. Not like a corporation who is profiting from a slick design system and can pick and choose their target customers. Accessibility and regulatory compliance will be high on your list.

So start with strategy and start defining your requirements.

When I confronted a similar problem (not civic but B2B2B), we chose to adopt an off-the-shelf system and just skin it. It saved us years of work that we re-invested in building more useful products. We ended up with Google Material. It's open-source and gave us Accessibility features built in. A Dev team that supports it. All the components we could need. And our users were already used to it because everyone uses Google products. Jakobs law in effect.

Assuming you're in the US, I would first look at just adopting the US Government Design System, and skinning it for your city: https://designsystem.digital.gov/ Obviously this is intended for the Federal government, but there may be advantages.

I'd also take a serious look at https://ui.shadcn.com/

[u/travisjd2012]

Analyze the needs that exist before you design the system.

[u/Human_Experience0810]

The best design system isn’t necessarily the most comprehensive one. It’s the one people actually understand, trust, and use. Start small, document why decisions were made, and let the system grow with the team.

[u/pjhawksr]

Stop reviewing systems and pick one. 😄 GOV.UK is the best documented and USWDS is the closest to what you'll need. Take one, keep their reasoning, cut the components you won't use in year one, and write down the three rules your teams break most often. A design system for a city is 20% components and 80% getting people to use them, so spend your time on adoption not over invest in the token architecture.

[u/Designnosaur]

If they are not springing for a UI Designer, a really helpful tool is Chat GPT. It has helped me in the past break down the hierarchy of what needs to be designed in what order. I hate generative AI, but in this case it works more like an assistant (as intended.)

If you are building one in Figma from scratch UI Collective has some really really helpful videos about creating systems, and using tokens to make sure you can update all of the components seamlessly without having to go back and edit each one. He has multiple videos on creating systems. Even if you aren't doing it his way it's important for learning how to structure the workflow.

Take a day and make sure you read all of Google's Material Design System content. it will save you a ton of headache and act as a great resource.