One designer.
An entire developer ecosystem.開発者エコシステム全体を、
ひとりで設計する
As principal designer at Viv Labs (acquired by Samsung), I was the sole designer on two public products in the Bixby developer ecosystem: Bixby Studio, the IDE third-party developers used to build natural-language skills, and Bixby Developer Center, the submission portal for those skills. Underneath both sat “Liquid”: a complete design system, themed around Samsung’s droplet mark, that became the design system across every Bixby developer surface.Viv Labs(Samsung傘下)のプリンシパルデザイナーとして、Bixby開発者エコシステムにおける2つの公開プロダクトを単独で担当しました: Bixby Studio(開発者が自然言語スキルを構築するIDE)と、Bixby Developer Center(スキルの提出ポータル)。その下にあるのが「Liquid」: Samsungの水滴モチーフをテーマに構築したデザインシステムで、Bixby developer関連デザイン全ての基盤となるデザインシステムになりました
Design an IDE for conversational AI that didn’t exist at that moment.当時まだ存在していなかった会話出来るAI用のIDEを設計
Bixby was Samsung’s second attempt at a voice assistant. They acquired Viv Labs (the AI company founded by the creators of Siri) to do it properly. The strategic bet was an ecosystem: third-party developers would build natural-language skills (like Alexa skills, but for Bixby), one skill would automatically work across phone, watch, TV, speaker, fridge. For that bet to pay off, developers had to actually want to build on the platform.BixbyはSamsungの二度目の音声アシスタントへの挑戦でした。Siriの創業者たちが立ち上げたAI企業Viv Labsを買収し、本気で取り組もうとしていた。戦略的な賭けはエコシステム: サードパーティ開発者が自然言語のスキル(AlexaやClaudeのスキルと同様のコンセプト)を作り、一度作ればスマートフォン、時計、テレビ、スピーカー、冷蔵庫まで自動で動く、というものでした。この賭けが成立するには、開発者をこのプラットフォームに呼び込む必要がありました
Samsung’s reputation among developers at that point was, charitably, mixed. The IDE we needed didn’t have an analogue we could copy: Xcode and Android Studio assume code with deterministic output. Ours had to support an AI whose answers might change with the same input, training that could take 70–80% of dev time, and a publishing matrix of regions × languages × every Samsung device. I was the sole designer on both the IDE (Bixby Studio) and the developer portal (Bixby Developer Center), and the author of the design system underneath.当時のSamsungに対する開発者の評判は、控えめに言っても芳しくありませんでした。参考にできるIDEも存在しない。同じ入力でも答えが変わりうるAI、開発時間の七〜八割を占める学習作業、全ての地域×言語×全Samsungデバイスの組み合わせをサポートしなくてはいけない複雑性——それらすべてを支えるIDEが必要でした。
A story-driven process. One design system under everything.ストーリー主導のプロセスと、すべての下に敷くひとつのデザインシステム
I started with research and journey maps for each developer persona, contrasting today’s broken journey to the journey we wanted to enable. These journey maps set the strategic direction for both products and gave the engineering team something to argue against. I called the framework story-driven development: every IDE feature had to trace back to a moment in a developer’s day.各開発者ペルソナのリサーチとジャーニーマップから始めた。今の壊れた体験と実現したい体験を対比させることで、二つのプロダクトの方向性が定まり、エンジニアリングチームにとって反論できる軸にもなった。この進め方をストーリー主導の開発と呼んだ。IDEのすべての機能は、開発者の一日のどこかの瞬間に紐づいていなければならない。
Underneath both products I built Liquid: a single design system for the whole Bixby developer surface. The base theme braided two ideas: Samsung’s space-themed brand and Bixby’s droplet logo. Liquid gave me a memorable narrative (water as the source of life in this ecosystem) that other designers and engineers could expand into animations, components, and marketing without me in the room. The system outlived me on the team.両プロダクトの下に敷いたのがLiquidだ。Bixby developer全体を支える、単一のデザインシステム。ベースのテーマはSamsungの宇宙的なブランドとBixbyの水滴ロゴ——その二つを編み合わせた。水、このエコシステムの生命の源。比喩が共有された瞬間から、他のデザイナーやエンジニアはアニメーション・コンポーネント・マーケティングへと、私なしで展開し始めた。私がチームを離れたあとも、Liquidは動き続けた。
Four calls that made the IDE possible.IDEを成立させた四つの判断
An AI IDE has no Xcode to copy from. Every interaction had to be reasoned out from scratch, and committed to before there was even a model behind the screen. These were the four calls the rest of the design hung on.AIのためのIDEには、参考にできるXcodeがない。すべての操作をゼロから論理で作り上げるしかなく、しかもモデルが揃う前に決め切る必要があった。設計の残りはすべて、この四つの上に乗っている。
Make the AI’s reasoning visible. Build the debugger first.AIの「考え」を見えるものにする: デバッガから作る
AI is non-deterministic by design: the same input can produce a different output. For a developer, that’s terrifying. The instinct on the team was to start with the editor; I argued we had to start with the debugger. Show the developer every signal the AI used to reach its decision (or non-decision), so the platform stops feeling like a black box and starts feeling like a system they can negotiate with. This single bet was what made the rest of Studio teachable.AIは設計上、非決定論的だ。同じ入力でも別の出力が返ることがある。開発者にとってはこれが恐怖の源になる。チームの直感はエディタから作るというものでしたが、私はデバッガから始めるべきだと主張した。AIが判断に至るまでに使ったすべての信号を開発者に見せる——プラットフォームをブラックボックスから、対話できる相手へ変えるために。この一手が、Studio全体を「教えられる対象」に変えた。
Treat training as the IDE’s center of gravity, not an afterthought.訓練をIDEの中心に据える、付け足しではなく
Training was 70–80% of every developer’s day, but in early prototypes it lived as a side panel. I moved it to the center: own surface, own grammar of interactions, with first-class affordances for adding examples, marking edge cases, and watching the model converge. This is what the industry now calls prompt engineering UX; we were doing it in 2017 because there was no other choice.訓練は開発者の一日の七〜八割を占める作業でしたが、初期プロトタイプではサイドパネルに追いやられていた。私はそれを中心に持ってきた。専用の面、専用の操作体系、用例の追加・エッジケースの記録・モデルの収束を観察する仕組みを一級の要素として置く。今の業界はこれをプロンプトエンジニアリングUXと呼ぶ。2017年の私たちにとっては、それしか道がなかっただけのことだ。
Ship the simulator in the IDE: every device class, voice or text.シミュレータはIDE内に同梱: 全デバイスクラス・声でも文字でも
Bixby’s promise was “build once, runs everywhere”: phone, watch, TV, speaker, fridge. That promise dies if developers have to physically own one of every device to test. I designed an in-IDE simulator covering every device class, accepting both voice and text input. Pairing the simulator with the debugger eliminated about 90% of test-related support tickets. Test/debug load dropped from 90% of all support tickets to 40% within 1.5 years of launch.Bixbyの約束は「一度作ればどこでも動く」: スマートフォン、時計、テレビ、スピーカー、冷蔵庫。しかし開発者が確認のために全実機を所有しなければならないなら、その約束は崩れる。私はIDE内に全デバイスクラスに対応し、声・テキストどちらの入力も受けるシミュレータを組み込んだ。デバッガと組み合わせることで、テスト/デバッグ起因のサポートチケットはローンチから一年半で全体の九割から四割に下がった。
Use the design system as brand repair for the developer audience.デザインシステムを開発者向けブランドの修復として使う
Samsung’s reputation among developers needed work, and a great IDE wasn’t going to fix it alone. I shaped Liquid so it could carry brand weight outward: the same droplet language used inside Studio also rendered marketing pages, conference materials, and the developer center. One coherent voice across every surface a developer would touch. By the end, an external marketing firm was producing campaigns from Liquid without my involvement.SamsungのIDEがいくら良くなっても、それだけでは開発者からの評判は覆らない。Liquidを外向きにブランドを運べる構造にした。Studioの中で使っている水滴の言語が、そのままマーケティングページ・カンファレンス資料・開発者ポータルにも乗る。開発者が触れるすべての面で、ひとつの声が揃う。最終的には、外部のマーケティング会社が私の関与なしにLiquidからキャンペーンを生み出せる状態になった。
Liquid: a narrative system, not a token dump.Liquid: トークン集ではなく物語のシステム
A design system survives by being memorable enough that other people want to build with it. I gave Liquid a story (water as the source of life in this ecosystem; developers as the ones bringing life into it) and let physics carry the rest. Once the metaphor was clear, other designers and engineers contributed animations, components, and marketing concepts I never had to brief.デザインシステムが生き残るのは、他の人が使いたくなるほど覚えやすいときだ。Liquidには物語を与えた——水、このエコシステムの生命の源。比喩が一度明確になれば、物理法則が残りを運んでくれる。メタファーが共有された瞬間から、他のデザイナーやエンジニアは指示なしでアニメーション・コンポーネント・マーケティング案を持ち寄り始めた。
- Elevation as information depth: closer to the user means more detail. Cause-and-effect tracked the same axis, so the system taught itself.標高を情報の深さに割り当てる。ユーザーに近いほど情報量は増える。因果関係も同じ軸に乗せたことで、仕組み自体が使い方を教えてくれる。
- Liquid-physics motion: every transition obeyed the same set of springs and surface-tension curves. Engineers extended the curve library on their own.液体物理に基づく動き。すべての遷移が同じバネと表面張力の曲線に従う。曲線ライブラリは、エンジニアが自分の判断で拡張していきました。
- Story-driven journey maps over feature lists: each persona’s day became the spec. Engineering could push back on the story, not just the screens.機能の羅列ではなくストーリー主導のジャーニーマップ。各ペルソナの一日そのものが仕様書になる。エンジニアリングは画面ではなく、物語の側に反論できるようになる。
- One source under both products: Studio and Developer Center used the same tokens, components, and motion library. Marketing surfaces, too. Consistency without coordination meetings.二つのプロダクトの下に同一の源。StudioもDeveloper Centerも同じトークン・コンポーネント・動きの仕組みを共有。マーケティング面まで含めて。整合は会議ではなく仕組みでとる。
The droplet doesn’t sit on the grid. It bends it.水滴はグリッドの上に乗っていない。グリッドのほうを曲げている。
Liquid wasn’t a token sheet: it was a story Samsung’s marketing teams could pick up without a brief. Surface tension warps space; the developer’s mark falls through the plane and reshapes it. Once the metaphor was visible in one image, external agencies started producing Bixby campaigns from it without coming to me.Liquidはトークン表ではなく、Samsungのマーケティングチームが説明なしに拾える物語でした。表面張力が空間を曲げ、開発者の印が面を抜けて沈み、面そのものを作り変える。比喩が一枚の画像で見えた瞬間から、外部の代理店は私を経由せずにBixbyのキャンペーンを生み出し始めました。
Studio & Developer Center shipped. Adam Cheyer demoed them at Samsung Unpacked 2018.Studio・Developer Centerはリリースされ、Samsung Unpacked 2018でAdam Cheyerが舞台上で実演した
In 2018, ex-Siri founder and Viv Labs co-founder Adam Cheyer stood on the Samsung Unpacked stage and live-demoed Bixby Studio (the IDE I single-handedly designed) to thousands of tech press, broadcast globally. A year and a half after launch, support load had collapsed, the developer rating was the highest among voice-assistant tools, and Liquid kept producing coherent designs after I left.2018年、元Siri創業者でViv Labs共同創業者のAdam CheyerがSamsung Unpackedの舞台に立ち、私が単独で設計したIDE、Bixby Studioを数千人のテックメディアの前でライブデモした。世界中に放送された場面でした。ローンチから一年半後、サポート負荷は激減し、音声アシスタントの開発者ツールの中で最高評価を獲得。Liquidは私がチームを去ったあとも、整合のとれた設計を出し続けました
Any company will be very lucky to bring Rio on board. A creative force and systems thinker with excellent taste. Wishing you good luck for what’s next, Rio!どの会社にとっても、Rioを迎えられることはとても幸運です。創造的な推進力と、システムで考える人。そして卓越した審美眼。これからの道のり、応援しています
If you’re building a developer platform or an AI tool, we can help.あなたが開発者向けプラットフォームやAIツールを作っているなら、ご一緒できます。
Designing an IDE for a non-deterministic system, or any product where the technology underneath is itself a moving target, is a different job. Rio has been doing that job since 2017: building the design system, the developer mental model, and the brand repair, all at once. One designer can carry a lot when the system underneath is built right.非決定論的なシステムのためのIDE、あるいは下にある技術自体が動き続けるプロダクトを設計することは、まったく別種の仕事だ。私は2017年以来それを続けてきた——デザインシステム、開発者のメンタルモデル、ブランドの立て直しを同時並行に。仕組みが正しく作られていれば、一人のデザイナーが運べる範囲は思いのほか広い。