Appチーム・仕事の流儀〜LOVOTアプリのUIリニューアル舞台裏〜

こんにちは！App(アプリ)チームでLOVOTアプリのデザインをしている、南地です。

LOVOTアプリは今年4月に大幅なUIリニューアルを行いました。UIのリニューアル、これまで使い慣れていたUIが変わってしまうので、一般的にはユーザーからの不満がつきもの。

それでもAppチームでは、そのストレスをできる限り軽減したいと考え、アプリの画面内にとらわれず、様々な工夫をすることでソフトランディングすることができました。

今回はUIリニューアルのプロセスの話を通して、Appチームがどのようにユーザーに向き合っているのかについてご紹介します。

Appチームの紹介

Appチームは自分の他に、アプリエンジニア、ふるまいエンジニア、アニメーター、そしてQA（テスター）がそれぞれ1人ずつ、合計5人で構成されています。

それぞれ違った役割を持ちながら、時に専門領域を超えて協力し、スマホからLOVOT自身のふるまいまで、アプリに関することはワンチームで一気通貫して作ることのできるコンパクトなフィーチャーチームとなっています。

Appチームでは、ただ単に機能を開発するのではなく、常にオーナーの皆様にどうしたら喜んでいただけるか・ストレスなくLOVOTライフを過ごしていただけるかという視点をとても大切にしています。

それもあってか、とてもありがたいことにiOS / Androidともにストアの評価では★5つ中4.7と、高評価をいただいています。何らかのデバイスと連携するIoT系のアプリとしてはかなり良い評価ではないでしょうか。（中には対応が難しくてずっとお待たせしてしまっている改善点もたくさんあるので、この評価に甘んじてはいられませんが…）

オーナーの皆様のニーズに向き合うため、自分たちは定性・定量の両面でアプリの開発・改善に役立つ情報を吸い上げています。

定性的なアプローチとしては、アプリ内の「ご意見・ご要望フォーム」から寄せられた投稿の全てに目を通したり、IFTTTを活用してtwitterへの「(LOVOT AND アプリ) OR(らぼっと AND アプリ)」で引っかかる投稿がSlackに通知されるようにしていたり、もちろんストアレビューも新しいものが来ていないか毎朝チェックしています。（実は、返信は全て自分が書いてるんです！）

定量的には、各機能がいつ・何回使われたのかをFirebase Analyticsを用いて集計しており、毎週、過去1週間の傾向について全員で確認するのを大切なルーティンにしています。
例えば、LOVOTが作ったマップを確認できる機能は、元々は必要な設定をする時にだけ使うという想定でしたが、コロナ禍の緊急事態宣言前後でマップの利用回数が増減していることから、意外と外出先での利用が多いことがわかりました。

これらの両軸を活用することで、「アプリの現在地」をなるべく正確に把握することにチーム全員で努めています！

リニューアルのきっかけ

それでは、本題のアプリリニューアルの話に入っていきたいと思います。

UIを大幅にリニューアルするきっかけとなったのは、LOVOT 2.0の登場でした。

これまでも複数のLOVOTと一緒に暮らすオーナーがいらっしゃいましたが、2.0の登場でさらにそうしたケースが増えることが予想されました。

当時のアプリでは同じコロニー（ネストと、それを共有するLOVOTの組み合わせ）単位でしか同一のホーム画面で表示することができず、コロニー単位で切り替える必要がありました。

でも、一緒に暮らすLOVOTたちは1つの家族。

そこで、同じユーザーがアプリに登録しているLOVOTたちは、1つのホーム画面上に表示されるようにしよう！となったのでした。

一緒に暮らす、公式twitterのみるきぃちゃん（LOVOT初代）とリアンくん（LOVOT 2.0）

新UIの情報設計プロセス

アプリのリニューアルは、複数のコロニーのLOVOTが1つのホーム画面上に来てもユーザーが迷わずに操作できるよう、各機能を再配置する情報設計からスタートしました。

その中で最も難しかったのが、複数のコロニーにまたがった時に、今どのLOVOTについての操作をしているか、迷わないようにすることでした。

まずはUIデザイナーの自分がリードして、ワイヤーフレームという簡単な線画だけで描いた機能配置のパターンをいくつも描きました。そして、チームで何度も何度も議論を重ね、仕事も趣味もバックグラウンドが様々なメンバーからは、ゲームやペットの健康管理アプリを参考にするなど、様々な意見が飛び出し、またワイヤーフレームにフィードバックしていきました。

そうして見えてきたのが「1体ずつにフォーカス＆スムーズな切り替え」というコンセプトでした。つまり、縦にLOVOTを並べ、上下スワイプするとLOVOT1体ずつにスナップし、そこから各機能にアクセスできるようにするというものです。

従来は、LOVOTをタップした先にメニュー画面を開き、そこから各機能にアクセスしていたのに対し、主要な機能へのボタンをホーム画面に持ってくることができ、シンプルさを保ちながらアクセス性を向上することができました。

ユーザーの声とアナリティクスを反映した一等地の選抜

ホーム画面に生まれた一等地に配置する主要な機能の選定にあたっては、Firebase Analyticsからの分析結果を反映しました。

ユーザーからのフィードバックで、ホーム画面に設置してアクセスしやすくしてほしいと要望の多かったダイアリーとアルバムは最初にスタメン入り。

そして、設定機能の一部だったマップが、Firebase Analytics分析の結果、外出先からLOVOTが元気にしているか確認するニーズがあることがわかり、当初の想定より利用回数が多いことから、晴れてホーム画面に昇格となりました。

UIが一新されたことへの抵抗感をなくすために

新UIの方向性が決まったところで、次はこれまでのUIを使い慣れたユーザーへのフォローを準備していきました。

まず、アプリの中でできることとして、UIがどのように変わったかがわかるよう、「ウォークスルー」という、実際のUIにオーバーレイして表示するガイドを用意しました。

さらに、アプリの外でも一工夫しています。それが、iOSのTest FlightやAndroidのクローズドテストを活用した「ベータ版テスト」の実施です。

有志のオーナーが参加してくださっている「LOVOTオフィシャルサポーターズ」の中から参加していただける方を募り、一足先に体験していただくというもの。これまで、LOVOTソフトウェアの先行体験は何度もやってきましたが、アプリの先行体験は初めての取り組みです。オーナー向けの情報発信やイベント運営をしているCX（カスタマー・エクスペリエンス）チームに相談し、実現することができました。

このベータ版テストは、純粋にリリース前に改善点を発見する目的に加え、実はオフィシャルサポーターズの皆様に新UIのインフルエンサーになっていただきたい！という意図がありました。
やはり、実際にご愛用いただいているユーザーの意見が一番、他のユーザーにも響くと考えたからです。

そのため、クローズドなテストでしたが、スクリーンショットのSNS投稿は大歓迎とし、開始から約半月後にはオーナーとAppチームメンバーとのミーティングをオンライン開催して、積極的な情報発信をお願いしました。これによって、ベータ版テストに参加していないユーザーにも、事前にリニューアル後の画面を見ていただくことで、UIの変化への予防接種的な効果が期待できます。

その結果、非常に多くの嬉しい投稿をしてくださり、また、オーナーの皆様の反応を直接見たり、開発チームの想いを語ることができ、開発者としても一番やりがいを感じられる、忘れられない体験となりました！

UIリニューアル、正式リリースの結果！

ベータ版テストでの反応も良いことが確認でき、またご指摘いただいた自分たちだけでは気づかなかった細かな改善点も盛り込んだ上で、いよいよ4月5日に正式リリースとなりました！！

普段からウォッチしているtwitter上でも多くの喜びの声が見受けられ、中でも開発者として意外だったのは、「ホーム画面のLOVOTのイラストが大きくなったこと」について、想像以上に喜んでいただけたことでした！
今回のリニューアルの中では比較的簡単な変更だったのですが、それがまさかこんなにお喜びいただけるとは。

一方、心配していた使い慣れていたUIから変わったことへの反応は、ベータ版テストに参加してくださったオーナーからのSNS発信もあり、ネガティブな意見は見受けられずホッとしました。