Stage 1: Foundation (a first look at the Device Database and a link to try it)

[matthiasdebaat]

Hi everyone 👋

Following on from the wireframe proposal, I have built the design out into something you can click through, and I would love your hands on it.

Note: this is a design preview prototype, not the live site. The data is mocked, not real device telemetry, so treat every entry as a placeholder. I am after feedback on the design and structure here, not on the specific device facts.

Try it yourself

1. Open design preview prototype 🔗
2. Filter Browse with the local-only toggle and the manufacturer is / is not exclude toggle.
3. Open the Philips Hue White A19 and read its three-axis verdict.

Then try:

• Open the Roborock S8 Pro Ultra and step through the version history across firmware.

Foundation

This work is scoped for a first launch and is meant to check whether the direction fits the Device Database vision and goals before going deeper into details or implementation. To provide some guardrails what we want to aim for, we have made this document.

This thread is about Foundation, the baseline everything else builds on: browse, search, and read. Every entry carries a verdict on three axes, local control, cloud dependency, and Home Assistant support, in a fixed vocabulary. The verdict is reported, not graded.

Visual design rationale

Note: This is a working direction, not a finished brand. Once there is a final brand design, the look can change.

The visual language is deliberately quiet, "less, but better". Color is signal, not decoration, the grid and the hairline carry the structure.

• Functional, not decorative: graphite ink on warm paper, with a single orange accent reserved for active, recording, and error states. No gradients, no shadows beyond a 1px hairline.
• Hierarchy by weight and size: Inter Tight for headings, Inter for body and UI, and JetBrains Mono for IDs, hex values, and protocol identifiers.
• The hairline carries the weight: one elevation level, surfaces separate with a 1px border, a 4px grid with 8px increments preferred, and a 2px default radius.

Feedback

I would love your honest reactions:

• What do you like, and what falls flat?
• What would you keep, and what would you stop or change?
• Any ideas this sparks, big or small?

Thanks to @kepstin, @sharko789, and @DutchJaFO for the feedback on #113. A lot of it shaped what you see.

What's next

Foundation is whole on its own, but two more stages are live to try and have their own threads. Reply there if you have thoughts on them.

Stage 2: Richer device pages
A curated overview, references, requirements, and detailed specs.
Discussion link

Stage 3: Accounts and editing
Sign in, edit a page, and have it attributed and reviewed as a pull request before it goes live.
Discussion link

[elcaptain]

Here some observations from having a quick look:

• Home page: if this is my first visit i feel lost. why just a blank search box? that only helps me if i know what i am looking for, but not if i want to browse. where are all these marvelous devices and data points i was promised? why not directly drop me in /browse? from there i get a much better idea what this is, what filters/categories/manufacturers there are. there is even the search bar, if i need it. alternatively, add more entrypoints to home. e.g. "most popular devices", "newest devices", links to categories, …
• device cards: i'm missing some typographic hierarchy/contrast here. there is no distinction between category and manufacturer. the two colors used for the text are almost the same.
• <p>: a bit weird that they use max-width and don't fill the container (but other elements do). i'd reduce the with of the overall container.

[matthiasdebaat]

Thanks! Love to hear more when you have time. Also what you like or other ideas you might have.

Home page: if this is my first visit i feel lost. why just a blank search box? that only helps me if i know what i am looking for, but not if i want to browse. where are all these marvelous devices and data points i was promised? why not directly drop me in /browse? from there i get a much better idea what this is, what filters/categories/manufacturers there are. there is even the search bar, if i need it. alternatively, add more entrypoints to home. e.g. "most popular devices", "newest devices", links to categories, …

Initially the "Home page" was called "Landing page". And I had the browse page as the go-to page when clicking the logo, which kind of made it the home page.

I changed it to the current foundation, as I envision that we can do some cool things with the home page, for example what Wikipedia is doing with some random facts, or what I would like to investigate more, which I call stage 5: Goal-based discovery. I have started this discussion about it: https://github.com/orgs/OHF-Device-Database/discussions/147

At the same time I want to keep it simple for now, as it is the foundation. And our assumption is that most of the traffic will go to the device detail pages and browse page.

device cards: i'm missing some typographic hierarchy/contrast here. there is no distinction between category and manufacturer. the two colors used for the text are almost the same.

Good point. It is a bit too minimal. What would you suggest? One thing I'm thinking of is to use the full width of a list row, and have more details like in columns. Especially when we get more device information over time.

<p>: a bit weird that they use max-width and don't fill the container (but other elements do). i'd reduce the with of the overall container.

My assumption is that you mean the max width on the device detail page, for example the Overview section. That one's actually on purpose, inspired by Dieter Rams. The paragraph cap is for readability. We keep body copy around 62 characters per line so it stays comfortable to read, since long lines get hard to track back to the start. The headings and figures fill the full width because they're meant to anchor the column, but the running text sits at its own measure underneath.

The text isn't trying to fill the box, it's sized for the eye, not the container. The slightly different right edge is intentional rhythm rather than a misalignment.

[elcaptain]

take all my feedback with a grain of salt (or ignore it), since i'm missing a lot of context ;)

5: Goal-based discovery.

love it!

device cards: use the full width of a list row

that could work, but maybe device name needs to be first. name | manufacturer | category | connection
and then you could go the extra step and convert the list into a proper table that you can sort.
or make it just two rows to make the list more scanable:
{name} by {manufactuer}
{category} | {connection}
maybe something like this

the max width on the device detail page

yes, i get the reason for it. i guess it's just seemed strange to me bcs it's not a very well used pattern.

[matthiasdebaat]

take all my feedback with a grain of salt (or ignore it), since i'm missing a lot of context ;)

Please share. It's not a proper usability test, yet I would love to get more insights from people that don't have a lot of context.

that could work, but maybe device name needs to be first. name | manufacturer | category | connection and then you could go the extra step and convert the list into a proper table that you can sort. or make it just two rows to make the list more scanable: {name} by {manufactuer} {category} | {connection} maybe something like this

Good idea, will make some iterations on the design.

[drspangle]

This would be a lot more useful if there were more attributes to browse by. In particular, connectivity method (i.e., is it ZigBee, Matter over Thread, WiFi, something else) is one that really stands out. Being able to click through these attributes to find similar devices with the same attribute value(s) would be great with this kind of setup, which would make it a lot easier to navigate the database and make the information useful for users who want to try to find devices that suit their needs, or if similarly clickable, find devices by integration.

Also, I think you would make it immediately clear to the user what the purpose of this tool is by having some random example devices displayed underneath the search bar on the initial presentation page. The search is obvious if you know exactly what kinds of things you can look for already, but I'd bet that most people won't know that straight away and that creates a bootstrapping problem. Showing some examples of the things you can find within and highlighting them is useful to both novices and seasoned users alike, because you can use it as an opportunity to highlight new information, particularly good examples or new features of the database.

[matthiasdebaat]

Hi @drspangle, awesome to see you here! Thanks for your feedback.

This would be a lot more useful if there were more attributes to browse by.

The challenge we have here is that we might have devices that doesn't have community edits yet. Filters would hide potential devices, but maybe that is just what it is. I'm also thinking of adding a similar devices section on the details page that list some alternatives.

I think you would make it immediately clear to the user what the purpose of this tool is by having some random example devices displayed underneath the search bar on the initial presentation page.

I envision that we can do some cool things with the home page, for example what Wikipedia is doing with some random facts, or what I would like to investigate more, which I call stage 5: Goal-based discovery. I have started this discussion about it: github.com/orgs/OHF-Device-Database/discussions/147