更新日:
会話をリアルタイムに視覚化するサービス VUEVOのアプリケーション設計

クライアント
ピクシーダストテクノロジーズ株式会社
プロジェクト概要
「VUEVO(ビューボ)」は、独自開発のワイヤレスマイクと専用アプリケーションを用いて、聴覚障害や聞こえにくさがある人と聴者をつなぐサービスです。
聴覚障害者と聴者の間には、職場での聞こえの違いによって会議など複数人の会話の場でコミュニケーションが難しいという課題があります。VUEVOは、「誰が」「何を」話しているかをリアルタイムに直感的に表示することでこの課題を解決します。今回、GOROは新規事業として立ち上がったVUEVOのアプリケーション側のUIUXデザインに携わりました。コミュニケーション課題にどのようにアプローチしたのか紹介します。
スコープ
#新規事業 #調査・リサーチ #情報設計 #UIUXデザイン
期間
2021年9月〜2023年6月
URL

聴覚障害の方と聴者をつなぐために、より最適な課題の解決策・要件の検討をしたい
使いやすいサービスUIUXの設計をしたい
ユーザーの解像度を上げるためのリサーチ・インタビューの実施・分析
仮説検証(モック作成とユーザーテスト)
サービス要件の整理とUIの設計
サービスリリースまでの到達
ユーザーインタビューやテストによって必要・不要な機能の取捨選択
VUEVOは、2023年より販売を開始したサービスです。「聴覚障害や聞こえにくさがある人と聴者のコミュニケーションをスムーズにしたい」という思いのもと、2021年にピクシーダストテクノロジーズ社が研究開発を始めました。
ピクシーダストテクノロジーズ社が働く難聴者向けのサービスを作ることを決め、サービスの内容を詰めていく段階で、GOROにUIUXデザインの設計のご依頼をいただきました。
先端技術を用いてダイバーシティの課題に取り組むピクシーダストテクノロジーズ株式会社と、Webやアプリ開発を専門とする弊社の知見を掛け合わせて、聴覚障害や聞こえにくさがある人と聴者のスムーズなコミュニケーションを支援するサービスを作っていくことになりました。
GOROはリサーチから参画し、アプリケーション側の要件の具体化やUIUXデザインをご支援しました。
想定していた、発話方向が特定できるマイクを使ったサービスが、実際にユーザーにとって便益があるのか、より効果的に使ってもらうにはどんなアプリケーションにすべきかを考えるため、まずはユーザーリサーチから実施しました。
聴覚障害がある方の就労状況や、働く業界などの基本情報をまとめる他、ピクシーダストテクノロジーズ社がすでに実施していたユーザーインタビューの資料や動画から、働く難聴者が抱える課題の解像度を上げていきます。
また、ユーザーインタビューの情報に加え、難聴者が働く環境で実際に使用されている既存のソリューションの調査を行いました。例えば、補聴器や他のコミュニケーションアプリなどのツールや、読唇・筆談・手話などのコミュニケーション方法まで含めて分析しました。各ソリューションのユースケースやメリット・デメリットをまとめて、新サービスに活かせる点を探していきます。

また、ピクシーダストテクノロジーズ社では働く難聴者の方々だけでなく、雇用側の企業も対象としてリサーチしていました。それらのリサーチの結果、難聴者が働く環境で使われている既存のソリューションには下記のような課題があることがわかりました。
複数人での会話だと、発話方向がわからず誰が話しているか把握しにくい
会議参加者の声以外の雑音などが入ってくると、内容の把握や発話者の識別が難しい
既存の文字起こしツールなどは誤変換が多く使いにくい
難聴者と働く聴者は、互いに内容が正しく伝わっているか不安を感じている
これらの課題から、当初想定していた「誰がどこから話しているのか」の発話方向が特定できるマイクを使ったサービスは提供価値があることが確認できました。
リサーチの結果を活かし、仮説検証へと移ります。ピクシーダストテクノロジーズ社とGOROのチームで議論を重ねる中で、下記のような点を特に重要視するようになりました。
誰が・どこから・何を話しているかがわかるインターフェースが必要
マイクの置き方で使い勝手が変わるため、オンボーディングが重要
発話できない難聴者向けにチャット機能も必要
これらの仮説を反映し、モックの設計・検討をしていきました。
ビジネスメンバーと開発メンバーでは週次でデザイン会議を開きました。必要な要件を素早くワイヤーに起こし、それらを元に議論を重ねます。こまめにやり取りしながら、PDCAを回し、スピーディーにプロトタイプを作成していきます。

出来上がったプロトタイプを用いて、実際に働く難聴者の方へユーザーテストも実施しました。複数人の方へのユーザーテストを経て新たに得られた発見は、週次のデザイン会議で擦り合わせ、実際の画面に反映するかしないかを議論し、ブラッシュアップを重ねていきました。
仮説検証を繰り返し、出来上がったのが下記のような画面です。特徴的な部分をご紹介します。

複数人が参加する会議において、大きな課題となっていた「発話の方向がわからない」という点を解決するためのインターフェースです。発話者の方向に合わせて画面が色づき、発話内容が文字で現れます。文字の色の濃さから発言の順番がわかるなど、視覚的に発言をキャッチする工夫を施しました。

聞き逃しや分からないことがあった場合にも見返すことができるタイムライン画面も用意しました。タイムラインビューでも、表示画面の左側にあるレーダーアイコンで発話方向がわかります。同じ発話者が発言している間は、まとめて発言が表示されるのであとで見返した時に議事録としても活用しやすくなっています。

会話に参加するメンバーを招待する機能も簡単に使えるように設計しました。急遽決まった会議でも、すぐにアプリから招待を送ってVUEVOを使えます。
このほか、会話が難しい方でも使いやすいチャット機能なども備えています。アプリ全体に共通して、情報の視認性に注力し、文字のサイズや色は試行錯誤を重ねました。

ユーザーテストから、マイクの置き方によってよりサービスの使い勝手が向上することが明らかになっていました。そのため、アプリ内でもまず最初にマイクの置き方を丁寧に解説するオンボーディング画面を用意することになりました。


さまざまな機能を備えたVUEVOですが、機能は取捨選択をし、設計・開発しています。サービスを作っている最中には理想ややりたいことがたくさん出てきます。そんな中でも効率的に開発を進めていくためには、ターゲットや目的に沿って、実装の要件を整理したり、優先順位づけをする必要があります。
GOROでは、下記のような観点から要件の絞り込みをご提案する場合が多くあります。

要件を絞り込んでいくときは、初めに行ったユーザーリサーチから見出したような、ユーザーのニーズにより近いものから実装する仕様として採用するのがおすすめです。
今回のプロジェクトでは、開発はVUEVOチームが行いました。開発連携をスムーズにし、質の高い実装を実現するために、GOROでは下記のようなことを実施しました。
サービス要件をまとめたドキュメントを作成
条件分岐などがFigmaから画面仕様がわかるようにまとめる
共通要素のcomponent化
実機でテストを行いデザインレビュー


1年10か月に及ぶプロジェクトの中では、リサーチから実装まで幅広い工程でご支援させていただきました。チームで試行錯誤しながらの制作となり、密に議論を重ねる場面も多いため、その都度、要点や論点を言語化・図式化しながら認識を合わせて進めていきました。
GOROのプロジェクトでは、マイルストーンごとにお客さまと共に振り返りを行います。今回のプロジェクトではピクシーダストテクノロジーズ社とこまめにディスカッションをしながら、プロジェクトを進行できました。その結果、スピーディーに仮説検証や要望の反映を進めたり、開発スコープや要件などの整理まで踏み込んでご支援できたプロジェクトとなりました。

クライアントからのコメント
UIデザインにとどまらず、サービス体験の設計、アイデアの幅だしなどのファシリテーションに及ぶまで、主体的にプロジェクトをご支援頂きました。
また、仮説検証を繰り返す中でのデザインの変更にも柔軟かつスピーディに対応していただき、開発との連携もうまく進行することができました。GORO社の強みは、高いレベルの主体性と柔軟な対応力にあると思います。
ピクシーダストテクノロジーズ株式会社
シニアエンジニア 平岡 尚
クレジット
プロジェクトマネージャー:旭俊成
UIデザイナー:棚橋七海 ・國分椋太
フロントエンドエンジニア:小林
We
Are Hiring!
Create Services Together.
Create Services
Together.
Join
GOROでは一緒にサービスを作る仲間を募集しています。
View More

株式会社menu
ユーザー体験向上を通じた事業成長と、推進力となるデザインチームの強化への貢献

ピクシーダストテクノロジーズ株式会社
会話をリアルタイムに視覚化するサービス VUEVOのアプリケーション設計

株式会社menu
UIUXデザイナー10名がデザインワークフローにClaude Codeを取り込んだ2回。

株式会社ネバーマイル
ドローン×既存物流の管理アプリケーション設計

株式会社スティーブアスタリスク
「使い方を学ぶ」だけで終わらせない、実務を見据えた勉強会

株式会社フォトラクション
株式会社フォトラクションの新サービス「施工BIMビルダー」のサービスサイト制作

一般社団法人hoistle
チームが自走するために、まず情報管理の土台を整えた研修。

株式会社GORO
当社の採用サイトを制作

株式会社マネーフォワード
マネーフォワードが主催する士業向けイベントサイトのStudio実装

パーソルワークスイッチコンサルティング株式会社
組織・個人のキャリア自律支援を支援する調査・分析サービスのUIUX改善

株式会社mofmof
システム開発をしている株式会社mofmofのコーポレート改善

パーソルワークスイッチコンサルティング株式会社
既存サービスでも提供価値の整理からデザイン・開発まで一貫してサポート

プロソフィー株式会社
プロソフィー株式会社のコーポレートサイトリニューアル

株式会社ふんどし
飲食業界専門の採用支援サービス「飲食ジョブズ」の新規事業立ち上げとUIUXデザイン

株式会社ふんどし
新規事業立ち上げにおけるプロダクトマネジメントとUIUXデザイン

株式会社mofmof
ニーズ検証のための広告LP構築

株式会社ふんどし
飲食業界専門の採用支援サービス「飲食ジョブズ」サービスサイト制作

定時ダッシュ
コミュニティ運営やイベント事業を手がける経営者ひとりと、業務の棚卸しから始めた約3時間のマンツーマン研修。1ヶ月後、本人は何をClaudeに任せていたか。

株式会社ふんどし
飲食業界専門の求人メディア「飲食ジョブズ」の業務管理ツールのUIUX設計

定時ダッシュ
SNS総フォロワー13万人以上の定時ダッシュのコミュニティサービスサイト制作

株式会社ネバーマイル
「繋げる」というコンセプトで設計したコーポレートサイトリニューアル

高井俊明税理士事務所
税理士事務所が提供する相続税サービスサイト制作

株式会社GORO
人材紹介会社向け Studioテンプレート「BtoB|コーポレートサイト」

株式会社GORO
BtoBのマーケティング会社向け Studioテンプレート「BtoB|マーケティング会社」

株式会社GORO
SaaS・BtoBサービス向け Studioテンプレート「BtoB|Webサービスサイト」

株式会社GORO
D2Cの健康食品向け Studioテンプレート「商品LP|D2C企業向け」

株式会社GORO
BtoBのAIサービス向け Studioテンプレート「BtoB|AIサービスLP」

株式会社GORO
人材系のBtoB企業向け Studioテンプレート「BtoB|オウンドメディア」

株式会社GORO
BtoBサービス向け Studioテンプレート「BtoB|FAQ・ヘルプサイト」

株式会社GORO
BtoBの展示会・イベント向け Studioテンプレート「BtoB|展示会LP」(販売準備中)

株式会社GORO
受託型のBtoBサービス向け Studioテンプレート「BtoB|受託系サービスサイト」

株式会社GORO
BtoBのクライアントワーク会社向け Studioテンプレート「BtoB|採用LP」と強化版
© 2021 GORO, Inc. All Right Reserved.