v5のご紹介：ThriveDeskの新しいUI
ThriveDeskアプリのインターフェースを独自のデザインシステムで刷新しました。ナビゲーションと受信トレイを使いやすく設定し、上部バーで受信トレイを切り替え、新しい返信エディターとダークモードをご利用いただけます。
新しいアプリのインターフェースは、ブランド刷新の一環です。ECとSaaSのチームにとって最適なカスタマーサービスプラットフォームを目指し、インターフェースを一から作り直しました。着手する前に、お客様に作業を遅くしている点を伺いました。その結果、基本部分からカスタマイズできるアプリが生まれました。動作も速くなり、使い方も覚えやすくなっています。
v5は、すべてのプランの全アカウントで利用できます。設定作業は必要ありません。
作り直した理由
最初のリリース時から、バックエンドにはユニットテストの厳格なルールを設けていました。フロントエンドには同じルールがなく、時間とともに技術的負債が積み重なっていました。
フロントエンドは何度も変わりました。バージョン1ではBootstrapを使用しました。次に、Bootstrapの一部を残しながらMaterial Designへ移行しました。v3では、その両方にTailwind CSSを追加しました。多くの部分を置き換えたものの、大きなコンポーネントの一部は残りました。その後、一部のコンポーネントにAnt Designを採用し、v4では全面的にPrimeNGへ移行しました。PrimeNGはうまく機能していましたが、ソースが非公開になり、商用ライセンスが追加されました。
選択肢は2つありました。最後のオープンソース版PrimeNGのコピーを使い続けるか、独自のデザインシステムを作るかです。私たちは独自に作ることを選びました。AIエージェントを活用したコーディングにより、短期間で実現できました。
開発の進め方
コードを書く前に、お客様からフィードバックを集めました。コードを書くこと自体は簡単です。使いやすいインターフェースを作るには、お客様が抱える問題を明確に理解する必要があります。
shadcnを参考に、トークンに基づく独自のデザインシステムを作り、コンポーネントを1つずつ移行しました。基本要素から始め、その後に複数の要素を組み合わせたコンポーネントや、特定の場所だけで使うコンポーネントへ進みました。すべてのコンポーネントと変更に対し、エンドツーエンドテストとユニットテストを実施しました。AIエージェントを活用したコーディングにより、移行全体は2週間で完了しました。
従来のUIフレームワークはすべて取り除きました。現在は、インターフェースのすべてのコードを自分たちで管理しています。速度の違いは次のとおりです。
メインナビゲーションのカスタマイズ
v5は、各部分をカスタマイズできるように設計しました。サポートチームの働き方はそれぞれ異なります。使わないツールで画面が埋まっていると、作業が遅くなります。v5では、メインナビゲーションと受信トレイのサイドバーに何を、どの順番で表示するかを選べます。チケット一覧の見た目や、各サイドバーの幅も設定できます。毎日使うツールを見える場所に置き、それ以外は隠しておけます。
メインナビゲーションを右クリックし、アイコンのみまたはアイコンと名前を選びます。初期設定はアイコンと名前です。さらに設定するには、カスタマイズを選びます。
各セクションの表示を切り替え、ドラッグして好きな順番に並べます。ワークフローやレポートを毎日使わない場合は、非表示にできます。いつでも再表示できます。
受信トレイのサイドバーのカスタマイズ
受信トレイのサイドバーを自由に設定したいというご要望を、多くのお客様からいただきました。すべての部分を設定できるようになりました。不要なフォルダーやセクションは非表示にし、残りをドラッグして好きな順番に並べられます。選択した項目はサイドバーに残り、それ以外はその他にまとめられます。
チケットの表示方法を選択
チケット一覧の表示方法も設定できます。優先度、ステータス、タグでチケットをまとめられます。並び順や、各チケットに表示する項目も選べます。
チケットのナビゲーションを設定
チケットを開いたときに横に表示されるチケット一覧には、独立した並び順と表示設定があります。コンパクト表示か展開表示を選び、ステータス、優先度、タグ、最後の返信など、表示したい項目を指定できます。次のチケットへ移動するには、一覧から選びます。1つの会話に集中したいときは、一覧を非表示にできます。
各サイドバーの端をドラッグして、画面サイズに合わせて幅を調整することもできます。ノートパソコンではサイドバーを狭くすると、会話を表示する領域を広く取れます。
上部バーから受信トレイを切り替え
ThriveDeskのすべての項目は、いずれかの受信トレイに属します。以前は受信トレイのメニューがサイドバーにあったため、数が多いと、今どの受信トレイを開いているのか分からなくなりがちでした。
受信トレイの切り替えは、アプリ上部に移りました。現在の受信トレイをいつでも確認でき、切り替えも速くなります。切り替えメニューにはチケット数も表示されるため、対応が必要な受信トレイを確認できます。
チケットをより速く解決
受信トレイ切り替えメニューの隣にある自分の担当ボタンには、すべての受信トレイから、自分に割り当てられたチケットが表示されます。チケットを選ぶと開けます。一覧を短く保つため、表示するチケットは最大5件です。
新しい返信エディター
返信エディターを一から作り直しました。Notionのように、ブロック単位で編集できます。/を入力してブロックメニューを開き、テキスト、見出し、箇条書き、番号付きリスト、引用を選びます。キーボードから手を離さずに返信を整えられるため、手順やセクションを含む長い回答も、すばやく書けて、お客様が読みやすい形にできます。
エディターの高さを変えるには、上部のバーをドラッグします。高くすると、返信のより広い範囲を表示できます。会話を見ながら入力したいときは低く、長い回答を書きたいときは高くできます。
アプリ内通知が復活
チームメンバーがあなたをメンションしたり、チケットを割り当てたりしたときは、メールを見逃してもアプリが知らせます。右上の通知アイコンを選ぶと確認できます。メンションタブでは、あなたの対応が必要な会話だけを表示できます。すべて既読にするを選ぶと、一覧を片付けられます。
自動化テンプレート
自動化の作り方も見直しました。新しいワークフローを作るときは、一から設定するか、テンプレートから始められます。各テンプレートには、動作のプレビューが表示されます。必要なテンプレートがない場合は、お知らせください。
分かりやすく整理した設定画面
すべての設定画面を見直し、設定項目をカード、グループ、タブに整理しました。以前より見つけやすく、分かりやすい順番に並んでいます。メールアドレスと受信トレイの接続も簡単になりました。
ダークモード
アプリにダークモードがなければ、本当のスタートアップではないと言われます。私たちも欲しかった機能ですが、以前のコンポーネントフレームワークでは実現できませんでした。インターフェースのコードを自分たちで管理するようになった今は、作りたいものを作れます。
テーマを変えるには、右上のプロフィールアイコンを選び、システム、ライト、ダークのいずれかを選びます。
インターフェースのすべてのピクセルを一から作りましたが、おなじみのワークフローはそのままです。これまでと同じように作業を続けられます。このインターフェースは、EC向けの完全なエージェント型カスタマーサービスプラットフォームという、次の段階の土台にもなります。
ThriveDeskを開く
