Group 1 Discussion - Searchability

[patrickpatrickpatrick]

Discussion for Group 1 of the Design System Hack Day - Linking Design Systems

[JodiB-TPR]

Initial 30 minutes discussion notes:

• works like email: sidebar with main email pane
• common language: Describe what problem they are solving in a way that is accessible and descriptive for everyone, so you can later search for "the problem" you are trying to solve instead of "the name" of the component. Improves discoverability for search.
• naming conventions and understanding the rationale behind the name
• how to bring all DS info into one place w/o putting huge burden on GDS to maintain it
• image library to scroll through: visuals to accompany each component / pattern
• Taxonomy of components to share across gov being mindful of maintenance burden
• need a way to search other DesSys (link?)
• EXAMPLE: Address collection pattern -- click it to see this is the HMRC pattern, this is the HO pattern, but don't want to show many of the same examples so the WHY it was created will add and give extra context so users know that THIS one matches my needs more than THAT one does
• Platform to have a way of advertising things
• How to collect the data from across gov: One place for each department, like an API to put their stuff so it's searchable

Possible key things to focus on:

1. findability
2. comparison of comonents, base of the platform
3. design history / etymology of component or pattern itself (use cases and such)
4. Figure out the back end and how it all fits together

Split suggestion:

1. How the platform is found i.e. Github, GDS pages etc
2. Components/Patterns library. I.e. how do we make it clear what these mean, what each item is etc. AND The detail of each comp/pattern i.e. Links to versions of the pattern designed by each org, design history etc
3. The backend i.e. how are these assets sourced?

[simonwo]

Notes from our first meeting:

• Would be great if you could compare design systems e.g. see the same component from different design systems?
  • E.g. can we have a sidebar or tabs which shows all the different design systems that a component is in
  • It would be great if we could take a component from someone's design system and automatically restyle it to be in our home branding! 🪄
• Some people don't use the language "components" or "patterns" – how do we make it also work with synonyms that people might be using?
  • Showing the components in the examples of where they are used e.g. in patterns, or in real services, so that designers can see how they are intended. Often they can be tweaked to make a variant
  • We can link the function of the component and use it in search, e.g. instead of requiring people to search based on "accordion" we could allow them to search by "expandable". Is there a taxonomy that needs to be across Government?
  • Important for the development team to also understand these names, they might call one component something else.
• How will data for a search be collected?
  • Needs to be a two way street: can't require ongoing maintenance effort for a central catalog else it will quickly get out of date, but also can't put too much pressure on deisgn systems because they are in different places re: funding.
  • Is there an API? Do people upload design systems to it?
• Could there be a central space for news? I.e. when a design system publishes a new component, it can appear as a new thing that has been published.
• Three things:
  • Comparison with other design systems
  • Design history, etymology, why was it needed (e.g. why it's a more specific component), tests, outcomes
• Sounds like there is a front-end and back-end split and at least two different avenues to explore there.

My thoughts on breaking it down (benjest)

1. How the platform is found i.e. Github, GDS pages etc
2. Components/Patterns library. I.e. how do we make it clear what these mean, what each item is etc.
   including: the detail of each comp/pattern i.e. Links to versions of the pattern designed by each org, design history etc
3. The backend i.e. how are these assets sourced?

[simonwo]

Back-end data collection

Ideas

1. We could just start manually maintaining a set of data about each design system
2. We could use sometihng like JSONify to scrape deisgn systems and collect data into a single place.
3. We could allow people to publish their own metadata and have a harvester that collects from a bunch of URLs.

Maybe we should start with 1 and work downwards? Because we shouldn't rely on an external service for this.
It sounds like we should start by working out what data we are trying to collect, and defining a format for it, and then these three methods can all use that format and we can evolve them over time.

There is an existing example from the X-GOVUK people: https://github.com/x-govuk-experiments/x-govuk-experiments.github.io/blob/main/components.json. Maybe we can start with this, and just pull in more things (like keywords) over time?

Question: are we trying to centralise the documentation? Or just having links to that documentation? Probably the latter.

[simonwo]

There is also Open UI who capture this sort of information: https://github.com/openui/open-ui/blob/main/site/src/sources/auth0.json
They maintain their own mapping between what a design system calls things and what they refer to them as for grouping purposes.

[simonwo]

{
	"data": {
		"name": "eBay Playbook",
		"organisation": null,
		"url": "https://playbook.ebay.com/",
		"image": {
			"localFiles": [
				{
					"childImageSharp": {
						"gatsbyImageData": {
							"layout": "constrained",
							"images": {
								"fallback": {
									"src": "/static/7c7150cee9c2fe1c6bbee7268c881b28/50de3/playbook.ebay.com_..png",
									"srcSet": "/static/7c7150cee9c2fe1c6bbee7268c881b28/ec760/playbook.ebay.com_..png 360w,\n/static/7c7150cee9c2fe1c6bbee7268c881b28/50de3/playbook.ebay.com_..png 492w,\n/static/7c7150cee9c2fe1c6bbee7268c881b28/42046/playbook.ebay.com_..png 500w,\n/static/7c7150cee9c2fe1c6bbee7268c881b28/a0d9f/playbook.ebay.com_..png 720w,\n/static/7c7150cee9c2fe1c6bbee7268c881b28/a9ca5/playbook.ebay.com_..png 1000w",
									"sizes": "(min-width: 492px) 492px, 100vw"
								},
								"sources": [
									{
										"srcSet": "/static/7c7150cee9c2fe1c6bbee7268c881b28/b1cd7/playbook.ebay.com_..webp 360w,\n/static/7c7150cee9c2fe1c6bbee7268c881b28/abdd9/playbook.ebay.com_..webp 492w,\n/static/7c7150cee9c2fe1c6bbee7268c881b28/12849/playbook.ebay.com_..webp 500w,\n/static/7c7150cee9c2fe1c6bbee7268c881b28/b4193/playbook.ebay.com_..webp 720w,\n/static/7c7150cee9c2fe1c6bbee7268c881b28/85e35/playbook.ebay.com_..webp 1000w",
										"type": "image/webp",
										"sizes": "(min-width: 492px) 492px, 100vw"
									}
								]
							},
							"width": 492,
							"height": 369
						}
					}
				}
			]
		},
		"features": [
			"Code examples"
		],
		"figmaUrl": null,
		"storybookUrl": null,
		"githubUrl": null,
		"technologies": [
			"HTML",
			"React"
		],
		"color": "#93c722",
		"Component_examples_count": 47,
		"Last_reviewed": "2024-11-19T18:30:00.000Z"
	}
}

[chrispymm]

Do you see this as being centrally curated? Or would individual design systems publish a json file matching the schema, that could be pulled in?

[alaric-rd]

Do you see this as being centrally curated? Or would individual design systems publish a json file matching the schema, that could be pulled in?

Both. Start curating to get the thing off the road, while also encouraging DSes to publish JSON that we can scrape and stop manually curating, handing the control over to them.

[simonwo]

Here is an example of applying this to a real (simple) design system: register-dynamics/data-import@edbd2ce

[chrispymm]

Whiteboard of initial thoughts:

Refined:

[robertjmccarthy]

[simonwo]

We've been thinking it'll be easier for people if they can just specify a URL for some metadata to a central platform, and then the platform can request that metadata regularly, meaning they don't have to come back to the central platform to update their data every time they make a small change. It should be easier for them to maintain, especially as most DSs are already published online.

[chrispymm]

This was our thinking too 👍

[ImranH-GDS]

Hello, we have about 30 minutes left. Can each group/ subgroup think about who will play back your ideas during the show and tell?

[simonwo]

We might not want to assume there is a "single" central platform. Some departments or teams might want to have private design systems, and pull in metadata about the design systems that are 'approved' for their use. E.g. Home Office may want to set a policy that they'll use GOV.UK Design System and HO Design System components, and not show any others, so their designers know what should and should not be used.

[romaricpascal]

We've been working around the assumption that the platform is a central point of access, but is there need for each departement spin their own either:

• allowing access to internal, private, design systems
• allowing access to non-gov design systems because they use them
• restricting access to specific design systems as they're not meant to be used

[robertjmccarthy]

[robertjmccarthy]

FIND A THING: https://miro.com/app/board/uXjVL-Cbrto=/?share_link_id=537518485622

[JodiB-TPR]

UI stuff: https://app.mural.co/t/bics1718/m/bics1718/1732803008275/a635acbfb8cecc1bcbbc25d421c91ae402661bcd

[simonwo]

Tech stuff: https://docs.google.com/presentation/d/1Rvm-7x_AZRhS-2Y-c36fWIfEe75WOg_8qeO_cl2ou3Q/edit#slide=id.p