更新日:

2024/9/16 02:00

先端テクノロジー企業の新規事業を、UIUX設計でリリースまで伴走した事例

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

会話をリアルタイムに視覚化するサービス VUEVOのアプリケーション設計
※2023年6月時点の画面

クライアント

ピクシーダストテクノロジーズ株式会社

プロジェクト概要

「VUEVO(ビューボ)」は、独自開発のワイヤレスマイクと専用アプリケーションを用いて、聴覚障害や聞こえにくさがある人と聴者をつなぐサービスです。

聴覚障害者と聴者の間には、職場での聞こえの違いによって会議など複数人の会話の場でコミュニケーションが難しいという課題があります。VUEVOは、「誰が」「何を」話しているかをリアルタイムに直感的に表示することでこの課題を解決します。今回、GOROは新規事業として立ち上がったVUEVOのアプリケーション側のUIUXデザインに携わりました。コミュニケーション課題にどのようにアプローチしたのか紹介します。

スコープ

#新規事業 #調査・リサーチ  #情報設計 #UIUXデザイン

期間

2021年9月〜2023年6月

URL

https://vuevo.net/


VUEVO グッドデザイン賞

Before/After

  • 聴覚障害の方と聴者をつなぐために、より最適な課題の解決策・要件の検討をしたい

  • 使いやすいサービスUIUXの設計をしたい

実施したこと

  • ユーザーの解像度を上げるためのリサーチ・インタビューの実施・分析

  • 仮説検証(モック作成とユーザーテスト)

  • サービス要件の整理とUIの設計

成果

  • サービスリリースまでの到達

  • ユーザーインタビューやテストによって必要・不要な機能の取捨選択

サービス内容の検討や企画段階から支援

VUEVOは、2023年より販売を開始したサービスです。「聴覚障害や聞こえにくさがある人と聴者のコミュニケーションをスムーズにしたい」という思いのもと、2021年にピクシーダストテクノロジーズ社が研究開発を始めました。

ピクシーダストテクノロジーズ社が働く難聴者向けのサービスを作ることを決め、サービスの内容を詰めていく段階で、GOROにUIUXデザインの設計のご依頼をいただきました。

先端技術を用いてダイバーシティの課題に取り組むピクシーダストテクノロジーズ株式会社と、Webやアプリ開発を専門とする弊社の知見を掛け合わせて、聴覚障害や聞こえにくさがある人と聴者のスムーズなコミュニケーションを支援するサービスを作っていくことになりました。

GOROはリサーチから参画し、アプリケーション側の要件の具体化やUIUXデザインをご支援しました。

ユーザー理解を深めるリサーチ・インタビューの実施

想定していた、発話方向が特定できるマイクを使ったサービスが、実際にユーザーにとって便益があるのか、より効果的に使ってもらうにはどんなアプリケーションにすべきかを考えるため、まずはユーザーリサーチから実施しました。

聴覚障害がある方の就労状況や、働く業界などの基本情報をまとめる他、ピクシーダストテクノロジーズ社がすでに実施していたユーザーインタビューの資料や動画から、働く難聴者が抱える課題の解像度を上げていきます。

また、ユーザーインタビューの情報に加え、難聴者が働く環境で実際に使用されている既存のソリューションの調査を行いました。例えば、補聴器や他のコミュニケーションアプリなどのツールや、読唇・筆談・手話などのコミュニケーション方法まで含めて分析しました。各ソリューションのユースケースやメリット・デメリットをまとめて、新サービスに活かせる点を探していきます。

VUEVO 難聴者が働く環境で実際に使用されている既存の解決策のメリット・デメリット

また、ピクシーダストテクノロジーズ社では働く難聴者の方々だけでなく、雇用側の企業も対象としてリサーチしていました。それらのリサーチの結果、難聴者が働く環境で使われている既存のソリューションには下記のような課題があることがわかりました。

  • 複数人での会話だと、発話方向がわからず誰が話しているか把握しにくい

  • 会議参加者の声以外の雑音などが入ってくると、内容の把握や発話者の識別が難しい

  • 既存の文字起こしツールなどは誤変換が多く使いにくい

  • 難聴者と働く聴者は、互いに内容が正しく伝わっているか不安を感じている

これらの課題から、当初想定していた「誰がどこから話しているのか」の発話方向が特定できるマイクを使ったサービスは提供価値があることが確認できました。

小さく仮説検証を繰り返し、スピーディーに設計を進行

リサーチの結果を活かし、仮説検証へと移ります。ピクシーダストテクノロジーズ社とGOROのチームで議論を重ねる中で、下記のような点を特に重要視するようになりました。

  • 誰が・どこから・何を話しているかがわかるインターフェースが必要

  • マイクの置き方で使い勝手が変わるため、オンボーディングが重要

  • 発話できない難聴者向けにチャット機能も必要

これらの仮説を反映し、モックの設計・検討をしていきました。

ビジネスメンバーと開発メンバーでは週次でデザイン会議を開きました。必要な要件を素早くワイヤーに起こし、それらを元に議論を重ねます。こまめにやり取りしながら、PDCAを回し、スピーディーにプロトタイプを作成していきます。

VUEVOの設計進行 こまめに議論しながらスピーディーにプロトタイプを作成

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

実際のアプリに反映された画面を紹介

仮説検証を繰り返し、出来上がったのが下記のような画面です。特徴的な部分をご紹介します。

発話者の方向と発言が見やすい360°ビュー

VUEVOのアプリ画面 発話社の方向と発言が見やすい360°ビュー
※2023年6月時点の画面

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

タイムライン形式で議事録のような使い方も実現

VUEVOのアプリ画面 タイムライン形式
※2023年6月時点の画面

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

簡単に使える会議招待機能

VUEVOのアプリ画面 会議招待機能
※2023年6月時点の画面

会話に参加するメンバーを招待する機能も簡単に使えるように設計しました。急遽決まった会議でも、すぐにアプリから招待を送ってVUEVOを使えます。

このほか、会話が難しい方でも使いやすいチャット機能なども備えています。アプリ全体に共通して、情報の視認性に注力し、文字のサイズや色は試行錯誤を重ねました。

マイクの置き方に迷わないオンボーディング

VUEVOのアプリ画面 オンボーディング
※2023年6月時点の画面

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

その他の制作画面

VUEVOの制作画面 アプリデザイン
アプリデザイン(※2023年6月時点の画面)

VUEVOの制作画面  PCデザイン
PCデザイン(※2023年6月時点の画面)

要件定義と開発チームとの連携

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

GOROでは、下記のような観点から要件の絞り込みをご提案する場合が多くあります。

THE PRODUCT VISION BOARD
引用元 THE PRODUCT VISION BOARD

要件を絞り込んでいくときは、初めに行ったユーザーリサーチから見出したような、ユーザーのニーズにより近いものから実装する仕様として採用するのがおすすめです。

今回のプロジェクトでは、開発はVUEVOチームが行いました。開発連携をスムーズにし、質の高い実装を実現するために、GOROでは下記のようなことを実施しました。

  • サービス要件をまとめたドキュメントを作成

  • 条件分岐などがFigmaから画面仕様がわかるようにまとめる

  • 共通要素のcomponent化

  • 実機でテストを行いデザインレビュー

VUEVO サービス要件をまとめたドキュメント
サービス要件をまとめたドキュメント

VUEVOのアプリ画面 条件分岐
※画面は、2023年6月時点のものです。

プロジェクト全体を振り返って

1年10か月に及ぶプロジェクトの中では、リサーチから実装まで幅広い工程でご支援させていただきました。チームで試行錯誤しながらの制作となり、密に議論を重ねる場面も多いため、その都度、要点や論点を言語化・図式化しながら認識を合わせて進めていきました。

GOROのプロジェクトでは、マイルストーンごとにお客さまと共に振り返りを行います。今回のプロジェクトではピクシーダストテクノロジーズ社とこまめにディスカッションをしながら、プロジェクトを進行できました。その結果、スピーディーに仮説検証や要望の反映を進めたり、開発スコープや要件などの整理まで踏み込んでご支援できたプロジェクトとなりました。

VUEVO 振り返り

クライアントからのコメント

UIデザインにとどまらず、サービス体験の設計、アイデアの幅だしなどのファシリテーションに及ぶまで、主体的にプロジェクトをご支援頂きました。

また、仮説検証を繰り返す中でのデザインの変更にも柔軟かつスピーディに対応していただき、開発との連携もうまく進行することができました。GORO社の強みは、高いレベルの主体性と柔軟な対応力にあると思います。

ピクシーダストテクノロジーズ株式会社

シニアエンジニア 平岡 尚

クレジット

プロジェクトマネージャー:旭俊成
UIデザイナー:棚橋七海 ・國分椋太
フロントエンドエンジニア:小林

Share on

We

Are Hiring!

Create Services Together.

Create Services

Together.

Join

GOROでは一緒にサービスを作る仲間を募集しています。

View More

Works

制作実績

実績インタビューPartnerお知らせ
会社概要コラム
実績インタビューPartnerお知らせ会社概要コラム
プライバシーポリシー

© 2021 GORO, Inc. All Right Reserved.