Abstract intro illustration

アーティスト、UI/UXデザイナー。東京在住

現在はJetBrainsのデザインリード。以前はWrikeのグローバルデザインディレクター、Veeamのシニアデザインマネージャーでした。

このウェブサイトはPixelJamの仲間たちによって作成されました。ワークフローのイラストはKri Danilinaが描きました。私たちの仕事はSOTD Developer Award、 CSS Design Awardなど、複数の賞を受賞しています。

時折、展示会に参加し、ここ日本でのイベントで自分の作品を紹介しています。

次は、Design Matters 24 東京で話します。チェック!

フィードバックには
mail inst lnkdin をご利用ください。

 

 

UI/UXプロジェクトはこちらをスクロール

18年から現在まで Space。チャット、タスクトラッカー、CI/CD、コードストレージ。 19年から21年 Fleet。マルチプレイヤー コードエディター

アートジャーナル½8で作品を探求して下さい。

3×4のアートワークと裏面に付随するストーリーを無限に表示するグリッドです。

... 快音のページで一連のトラックを聴くこともできる。

音声が重要な役割を果たす選りすぐりのアートワークをハイライトしたページです。

 

 

Space

チームの仕事を計画し、ディスカッションを行い、ソフトウェアプロジェクトを開発するのに役立つツールを備えたチーム作業のためのプラットフォーム

Spaceロゴが表すように、それはGit、Chats、Team Directory、Issue trackerの交差点です

 

jetbrains.com/space

責任と

製品を立ち上げ、市場に投入できる状態にするために、概念開発の初期段階から参加しました。主要なマイルストーンを含むタイムラインを探索します。

 

2人のデザイナー

20
18

JetBrains内部での採用

  • Gitホスティング
  • チームディレクトリー
  • コードレビュー
  • カレンダー
  • ブログ
  • iOSアプリ

4人のデザイナー

20
19

Kotlin Confでの発表

  • 受信箱 チャット
  • Androidアプリ
  • CI/CD
  • ダッシュボード
  • チェックリスト

 

5人のデザイナー

20
20

パブリックベータ

  • イシュートラッカー
  • To-Doリスト
  • パッケージ

7人のデザイナー

20
21

一般利用可能

  • リモート開発
  • ダークテーマ
  • イシューボード
  • タイムトラッキング
  • ドキュメント

8人のデザイナー

20
22

フィードバックを聞く

  • 改訂されたナビゲーション
  • 拡張 & プラグイン
  • リモート開発
  • コード品質コントロール

8人のデザイナー

20
23

LLM, プランニング 🔗 コーディング

  • トップダウンプランニング(バックログ、保存されたビュー、マトリックス)
  • 改訂されたGo-To&検索
  • AIアシスタント
  • デプロイメント

 

デザイン管理

デザイナーチームの管理、彼らの成長を支援し、批評セッションを促進

プロダクトマネジメント

ダッシュボード、検索、オンボーディング、エントリーポイント、ToDoリスト、ナビゲーション

マーケティングコミュニケーション

ビジュアルコミュニケーション、Spaceウェブサイトを含む、も私の責任範囲に含まれます。

UX

よく設計された課題トラッカー、Git ホスティング、およびチャットは既に存在しています。ただし、これらのアプリはしばしば互いに切り離されています。Space UX の目標は、シームレスさを導入することです。


解決策のブレイクダウン

1

まもなく

iOS

 

 


All-in-1

現状

開発ツールは通常、絡み合っているか、一つのセットに組み合わせられています...

...一方で、タスク追跡、チャット、共有ツールは開発と互いに独立して分離しています

ここでどのように Spaceがツールの分離を解決するかを見てみましょう 💥

Space

私たちは、全てのものを包含しながらもすぐに理解できるナビゲーションを作成することを目指しています。少し焦点を当てて変化を見てみましょう

反復

001

002

003

004

005

001

Alphaバージョンはリポジトリと友達に焦点を当てていました。まだSpaceではありません

  • VCS, コードレビュー, チームディレクトリー, ブログ

002

初期のカスタマイズフローには⭐スターズが使用されました。お気に入りのプロジェクトがナビゲーションバーに表示されます

  • 問題追跡, 自動化, チャット

003

あなたのアバターが最初の場所 = あなたのSpace。ピン留めされたエンティティに対して強力なウィジェットを使用します

  • To-Do, 在席状況, パッケージ, ボード

リッチウィジェットのMVPを作成するために、私たちはボックスのサイズが使用率を表す採用チャートを見ました。最も使用されている機能が最初に新しいデザインを受け取りました。

1プロジェクト

2-10プロジェクト

10+プロジェクト

003 から 004 へ進むために、私たちは組織ごとのプロジェクトの分布を見て、UIを1つのプロジェクトに焦点を当てつつ、スケール可能であるように設計しました

004

より少ない軸、プロジェクトの作業に焦点を当てる。ウィジェットが人気になっています。管理者は今全員のためにウィジェットをピン留めできます、新しいプロジェクトへの簡単なオンボーディング

  • ドキュメント, プラグイン, リモート開発, 時間トラッキングとレポート, 展開

005

メインのナビゲーションバーをさらに簡素化し、レイアウトはサイドバーの幅に応じて適応します。

  • 補足的なアクションを持つフローティングツールバーは、メインのナビゲーションフローからはもう邪魔になりません。

006, 007...

それは継続的な旅です!

ゼンモードは常にPRO向けのソフトウェアの一部でした。Spaceも例外ではありません。情報密度は柔軟性を必要とします。

Space UI

折りたたみモードは追加の画面スペースへのアクセスを提供します

 

 

 

SPACE VISUAL STYLE

 

 

 

空間 (くうかん) space

all sub-teams

空間 hoodie back-print

 

 

You might have noticed a character featuring prominently in Space mockups That is, in fact, a specific character we designed to serve as an avatar placeholder throughout our diverse range of interfaces

 

 

 

 

 

🔊 Space Sakura chimes, original melody tune for Space Calls experiment

 

 

Availability status

 

Poster / T-Shirt design for JetBrains booth on Kotlin Conf 19 where Space announcement has happened

Key tag designed for one of the team gathering

Personal dashboard

 

この新しいコードエディターについては何ですか?

 

何百万人もの開発者に愛されて使われているIntelliJ IDEAからUXを取り入れる…

…必要最低限に集中し、事前設定なしで動作するようにする…

 

…市場のオファーとは異なる独特のビジュアルスタイルで味付けをする…

…そして、それによって新しいコードエディターを作成する

jetbrains.com/fleet



90年代のゲーム。初期のコネクティビティ

ハーフライフ、ゲームコンソール

未来的でありながら現実的

2020年のDevsエピソード1のコンピュータディスプレイ。UIはEMACSに似ているためとても現実的

予備的なディスプレイパレット

PLATO V ターミナルのプラズマディスプレイ、1981

すべては「最初のショット」に集約され、結果的にデザインに大きな影響を与えました。
↓↓↓

 

正確でクリスプなもののアイデアは、タイポグラフィやロゴなどの他のビジュアル要素にも影響を与えます。

 

主な参照である1980年代のパーソナルコンピュータ革命の時代やワールドワイドウェブの初期の日々を考えると、UIのさまざまな要素も同様の雰囲気になりました

 

 

 

初期段階でも、私たちは一貫性と複雑なシナリオについて考えていました…

…デバッグ、リモート開発、ワークスペースなどです。 簡単さが拡張性を保証するのは不可欠でした

 

 

 

Fleet内部でのコードのレビューとgit chunksのスタイル

チーム(私も含め)はこのアプリを作るのが非常に楽しかったので、初期段階の終了を記念してスワグを作りました

 

(古い)学校にはちょっとかっこよすぎ

でもスカーフにはちょうどいい

Fleetでアプリを作るのが楽しいことを願っています。

 

 

 

 

WorkFlow

デザイナーやプロダクトマネージャー向けのノート。製品仕事を効率よく進めるためのアプローチと避けるべきことについての指導。

Kri Danilinaと私はこのプロセスをガイドするためのコミックをデザインしました。喜びましょう!

ユーザージャーニーの概要

商品の発見

常に製品のスクワッドを形成します。 QA, PM, デザイナー, 開発者, マーケティング担当者。意見の平等な重みを促進します。

市場を探求し、初期のビジョンとビジネス戦略を確立します。商品 + マーケティング = 🤍

ローンチ前は、製品分析よりも顧客インタビューや初期のプロトタイプ、MVPを優先します。

 

ユーザージャーニーと解決された痛み点を説明します。機能に焦点を当てるのではなく、結果を定義します。ユーザージャーニーを製品のロードマップの方向にマッピングし、優先順位をつけます。

可能であればコミュニティを確立し、量的なフィードバックを集めます。

 

プレデザイン

ピクセルより前

あなたの時間と仲間の時間を尊重します。会議やデザイン/製品の文書作成を開始するだけです。形式化の必要はありません。

時間を節約するために、いくつかの課題はチームメイトと話すだけで解決できます。形式化しないで;想像以上に手の届く果実があります。

目標はユーザーエクスペリエンスを改善することです。モックアップ、UX研究、デザインシステムへのコミット - これらはツールです。

初期設計

既存のパターンとUIを再利用することは、効率的なコードベースを維持するのに役立ちます == 🤍エンジニアリングチームから

OSガイドラインを最新の状態に保ち、プラットフォーム固有のUX(例えば、キーボードのインタラクション)を考慮します。初期段階でアクセシビリティを含めることを試みます。十分なコントラスト、スクリーンリーダーのサポート。

ローカライゼーションと拡張性は、アプリが拡張可能でなく、壊れやすいまでそれらを追加するのが痛いまで通常は省略されます。


チームメイトと共に

期待を管理します。大まかな見積もりを提供し、定期的にクロスファンクションチームと面会します。

非同期の知識共有に貢献します。例えば、Figmaやチケットへのリンクを含む数行、毎週金曜日。人々は何を再利用するかを知るでしょう。

デザインデモは1つのユーザージャーニーに焦点を当てた短いピッチです。プロダクトチームが議論に参加するためのプラットフォームを作るためのツールです。

非同期モード(ミーティング無し)で議論を開始します。ボイスオーバー付きのビデオを録画し、チャンネルに投稿します。

可能な限り大きなグループにプレゼンテーションをします。すなわち、投稿を作成し、デイリースタンダップでそれを発表します。

簡潔な情報を評価します。すぐにポイントに到達し、集中します。

 

我々が裁く方法_(そしてその根底の問題)は、既存の戦略的イニシアチブにどのようにマッピングするかを強調します。

達成の定義 (DoD)

_デザインデモの段階の後で、_デザイナーまたはプロダクトマネージャーは達成の定義を含むタスクを準備し、それをバックログに移します。

DoDs セクションは、ユーザージャーニーの達成に必要な機能的で中心的な視覚変更を正確に説明します。

ピクセル完璧に磨き上げることに焦点を当てることを避けます。新しいものがどんなに小さくても、UIをコンポーネントライブラリに基づいて作成します。

 

常にデモを進める前、そしてチケットを開発チームに手渡す前に一度だけ、UXライターと協力して文言を確認します。

学ぶ機会を逃さないでください。どの指標を測定し、何を追跡するかを決定します。製品の洞察があなたを待っています。

ここで、優先順位がつけられます。それほど焦点を定めませんが、製品戦略と選択した方向に固執し続けることを覚えておいてください

産業集中研修

実装中 & ロールアウト後

影響を受ける製品チームとの定期的な同期を確立します。もしScrumを使っているなら、デモ / レトロが良い働きをします。

フィーチャーフラグを使用して、さえも原始的な製品の状態にアクセスします。異なるデータを含む様々なビルドをリビューする方法を見つけるように努めます。

方向を修正し、ショートカットやトレードオフを見つけることは大丈夫です。準備はどれだけ良くしていても、開発中にはサプライズが待ち構えています。固硬でいることはない、対応します。

少なくとも3ヶ月に1回は、収集した指標の分析を再訪します。もし分析チームがいるなら、彼らを製品チームの一部にします。

定期的な顧客インタビューや離反調査が必要です。フィードバックを平等にするために一歩を引きます。口々のものは、低いプロファイルで言われたキー入力を消し去ります。

自社製品の使用。無償化。例えば、JetBrainsにはSpaceとIJを日常的に使用する2000+人の従業員がいます。

_MVPをサンセットすることを恐れないでください。あなたがそれを示すすべての兆候があります。それはまず初めに仮定をテストする方法です。

反復

0.6

ユーザーからのフィードバック、市場からのフィードバック

1.1

製品の発見

1.2

ユーザージャーニーの定義

1.3

デザインデモ、議論

1.4

定義済みの完了、EPIC

1.5

Dev sprint, テスト

1.6

より多くのテスト、ユーザーからのフィードバック、市場からのフィードバック

2.1

製品の発見

タスクの種類 Disclaimer

1 短期

責任範囲内の経験をサポートし、開発チームに協力しながらボトルネックにならないように努めます。一方、UXの代弁者であること。

2 長期

まだ満たされていないユーザージャーニーに基づいてUXを設計し、コンセプトを作成します。設計者1人あたり1四半期に長期的なタスクを最大3つ持つことが理にかなっています。