Good interfaces. Better reasons.

UI Fieldnotes

Explore web references across 24 fields, read the design principles and try three original UI examples. Find a useful starting point for your own page.

Try the UI ↓

Explore references

Research edition 2026-09-22

48 candidates

SaaS and workEditorial candidate

Linear

Question to investigate: Connecting the value proposition to actual work screens

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

SaaS and workEditorial candidate

Notion

Question to investigate: Use-specific entry points and adoption decisions

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Finance and paymentsEditorial candidate

Stripe

Question to investigate: Information hierarchy for a complex service

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Finance and paymentsEditorial candidate

Wise

Question to investigate: Comparing fees and received amounts

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Commerce and retailEditorial candidate

Shopify

Question to investigate: Navigation by business stage

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Commerce and retailEditorial candidate

無印良品

Question to investigate: Classifying and searching a broad product range

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

FashionEditorial candidate

Patagonia

Question to investigate: Presenting products alongside brand commitments

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

FashionEditorial candidate

ユニクロ

Question to investigate: Exploring categories, sizes and uses

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Travel and hospitalityAward or selection record

DiscoverNEPA

Question to investigate: Exploring by season, purpose and region

2025 Webby Honoree / Travel & Lifestyle

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Travel and hospitalityEditorial candidate

星野リゾート

Question to investigate: Moving from travel experiences to property selection

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Food and recipesAward or selection record

Simply Recipes

Question to investigate: Finding a dish and reaching its instructions

2025 Webby Honoree / Food & Drink

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Food and recipesEditorial candidate

スターバックス

Question to investigate: Connecting product information to store visits

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

HealthAward or selection record

Braver Collective

Question to investigate: Safety, choice and exit paths for sensitive content

2025 Webby Honoree / Health & Wellness

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

HealthEditorial candidate

NHS

Question to investigate: Entry points organized around information needs

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

EducationAward or selection record

Harvard Chan School

Question to investigate: Organizing research, education and applicant information

2025 Webby People's Voice Winner / School-University

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

EducationEditorial candidate

Khan Academy

Question to investigate: Starting points for different learners

Editorial candidate

Only partial text retrieved
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Real estateAward or selection record

Horizonte Village

Question to investigate: Introducing spaces and selecting homes

2025 Webby Winner + People's Voice Winner / Real Estate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Real estateEditorial candidate

SUUMO

Question to investigate: Progressive search by location and transaction goal

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

ArchitectureEditorial candidate

Snøhetta

Question to investigate: Exploring projects through categories and stories

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

ArchitectureEditorial candidate

日建設計

Question to investigate: Connecting projects to specialist expertise

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Public servicesOfficial design guide

GOV.UK

Question to investigate: Guidance organized around everyday tasks

Official design guide

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Public servicesOfficial design guide

デジタル庁デザインシステム

Question to investigate: Japanese forms, notifications and navigation

Official design guide

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

NonprofitsEditorial candidate

charity: water

Question to investigate: Connecting evidence of activities to support

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

NonprofitsAward or selection record

Two Good Co.

Question to investigate: Connecting a social purpose to purchases

2023 Australian Good Design Gold / eComm Platform

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

News and mediaEditorial candidate

The Guardian

Question to investigate: Headline hierarchy and article discovery

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

News and mediaEditorial candidate

NHK

Question to investigate: Classifying programming, news and regional information

Editorial candidate

Text retrieval failed; recheck needed
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Arts and cultureEditorial candidate

MoMA

Question to investigate: Visitor guidance and artwork exploration

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Arts and cultureAward or selection record

Rijksmuseum

Question to investigate: Entry points into the online collection

2025 Webby Nominee + Honoree / Collection Online

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

GamesEditorial candidate

任天堂

Question to investigate: Connecting games, hardware and news

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

GamesEditorial candidate

PlayStation

Question to investigate: Discovering games and comparing products

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

EntertainmentEditorial candidate

Spotify

Question to investigate: Paths from discovery to playback

Editorial candidate

Only partial text retrieved
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

EntertainmentEditorial candidate

Netflix

Question to investigate: Explaining value and FAQs before joining

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

SportsEditorial candidate

Strava

Question to investigate: Explaining activity tracking and community

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

SportsEditorial candidate

Nike

Question to investigate: Finding products by sport and use

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

MobilityEditorial candidate

トヨタ

Question to investigate: Classifying and discovering corporate information

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

MobilityEditorial candidate

Rivian

Question to investigate: Moving from vehicle experiences to comparisons

Editorial candidate

Only partial text retrieved
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

ManufacturingEditorial candidate

キーエンス

Question to investigate: Finding products through use cases and problems

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

ManufacturingEditorial candidate

Siemens

Question to investigate: Matching product families to industry challenges

Editorial candidate

Text retrieval failed; recheck needed
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

EnergyEditorial candidate

Octopus Energy

Question to investigate: Understanding tariffs and starting a process

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

EnergyEditorial candidate

ENEOS

Question to investigate: Separating consumer and business information

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

AgricultureEditorial candidate

John Deere

Question to investigate: Finding equipment, applications and dealers

Editorial candidate

Only partial text retrieved
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

AgricultureEditorial candidate

Kubota

Question to investigate: Classifying business areas and products

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Professional servicesEditorial candidate

Pentagram

Question to investigate: Classifying projects and demonstrating expertise

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Professional servicesEditorial candidate

McKinsey

Question to investigate: Moving from insights to service understanding

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

CareersEditorial candidate

Wantedly

Question to investigate: Exploring jobs, companies and people

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

CareersEditorial candidate

Airbnb Careers

Question to investigate: Connecting culture to open roles

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Developer toolsEditorial candidate

Stripe Docs

Question to investigate: Separating first implementation from API details

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Developer toolsEditorial candidate

MDN

Question to investigate: Moving between concepts, references and examples

Editorial candidate

Text observed; interactions untested
Source checked: 2026-09-22

Visit official site ↗View evidence ↗

Save research catalog (JSON, Japanese) ↓

01 / Find

When a service has many entry points, organize search and categories around the user's purpose. Read the official site and award organizer separately: an award-era design may differ from today's page. The original task finder below also shows a way back when there are no matches.

02 / Compare and decide

Useful comparisons need common dimensions. Align audience size, included tasks and unsuitable conditions as well as price. Show how a choice changes the result before a contract or submission happens. The comparison below uses fictional plans and creates no purchase.

03 / Trace the evidence

Separate observed facts, design hypotheses and unknowns. Reputation alone does not establish usability. Record the state of the page and observation date. The evidence card below lets you switch between a hypothesis and an observation to see how the wording changes.

04 / Check the implementation

Before adopting a pattern, test keyboard access, focus, empty results, 320px reflow, zoom and long text. Refer to WCAG 2.2 and distinguish field performance data from laboratory tests. The external sites listed here have no measured scores, so they are not ranked.

03 / Try the UI

Try a small pattern. Take the source with you.

Each example is a standalone HTML file with fictional content. Save it, open it in a browser and edit the text, colors and data. No framework or external library is required.

Find by purpose

For finding a task among several entry points. Thousands of records or complex search need a different approach.

View source code

<!doctype html>
<!--
MIT License
Copyright (c) 2026 tee business insights

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Find by purpose</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#183b32;font:16px/1.7 system-ui,sans-serif}main{max-width:640px;padding:26px;margin:auto}h1{font-size:27px;line-height:1.4;margin:0 0 15px}p{font-size:14px}label{font-size:13px;font-weight:650}input,select,button{font:inherit;color:inherit;min-height:44px;padding:10px 12px;border:1px solid #bac7b9;background:white;border-radius:5px;max-width:100%}input,select{display:block;width:100%;margin:8px 0 15px}button{cursor:pointer}button:hover{background:#f1f5e9}:focus-visible{outline:3px solid #a44200;outline-offset:3px}ul{list-style:none;padding:0;margin:0}li button{width:100%;text-align:left;margin:4px 0}output{display:block;background:#eaf3d9;padding:16px;margin:16px 0;min-height:55px;overflow-wrap:anywhere}[hidden]{display:none!important}.muted{color:#50665a;font-size:12px}</style></head><body><main><h1>Find by purpose</h1><label for="q">Enter a purpose<input id="q" type="search"></label><p class="muted">Search stays inside this example.</p><ul id="items"><li><button type="button">Organize a schedule</button></li><li><button type="button">Find a document</button></li><li><button type="button">Compare candidates</button></li></ul><p id="none" hidden>No candidates match. Shorten the query or reset the filters.</p><button id="reset" type="button">Reset filters</button><output id="result" aria-live="polite">Selected purpose</output></main><script>const q=document.getElementById('q'),items=[...document.querySelectorAll('#items li')];function search(){let n=0;for(const x of items){x.hidden=!x.textContent.toLocaleLowerCase().includes(q.value.trim().toLocaleLowerCase());if(!x.hidden)n++}document.getElementById('none').hidden=n>0}q.addEventListener('input',search);document.getElementById('reset').onclick=()=>{q.value='';search();q.focus()};for(const x of items)x.querySelector('button').onclick=()=>document.getElementById('result').textContent=x.textContent;</script></body></html>

Copy a build prompt

Use this original UI as a starting point. Define the audience, task, inputs, outcome and recovery paths, then create HTML/CSS/JS suitable for my site. Do not reuse third-party images or code without permission. Test keyboard use, 320px width, empty states and errors.

The original UI code is MIT-licensed. Keep the copyright and license notice. This does not cover the trademarks, images or code of reference sites. MIT

04 / TBI UI Research

A repeatable path from research to article and UI.

TBI UI Research is a workflow for AI agents. It connects industry research, source and rights records, original articles, interactive UI and verification. Instructions, a catalog, Python scripts and HTML assets are available below.

The skill instructions and seed catalog are in Japanese. You can request output in other languages, but translations still need review. External service credentials and paid access are not included.

Open the file list below and give SKILL.md and its linked resources to your agent.
For a compatible agent, save the files into its skill directory using the same relative paths. Saving files alone may not activate the skill.
Ask, for example: ‘Use TBI UI Research to create a travel comparison UI and a sourced article.’ Specify the output language and technology.

Public skill files

UI Fieldnotes

Explore references

01 / Find

02 / Compare and decide

03 / Trace the evidence

04 / Check the implementation

Try a small pattern. Take the source with you.

Find by purpose

A repeatable path from research to article and UI.

Sources and standards