Retty流 User Happyのつくりかたvol.2　デザイナーによるiOS版アプリのUI/UX改善事例

はじめまして。Rettyのデザイナー山本麻友美です。
日本大学芸術学部デザイン学科卒業後、2007年にビジネス・アーキテクツに入社し、2011年頃よりアートディレクターとして、特にWeb及びモバイルアプリケーションの設計・デザインに多く関わってきました。その頃よりユーザー調査をベースとしたコンセプト立案・設計、ユーザーテストによるUI改善など、調査からコンセプト立案、UI設計・デザインまで行うプロジェクトに深く携わり、2013年にHCD-NET認定人間中心設計スペシャリストの資格を取得しました。もっとユーザーのことを考えてデザインがしたい、ビジネスに直結する現場でデザインをしたいと考え、2017年6月Rettyにジョインしました。

今回は私が入社後すぐに担当したiOSアプリのリニューアルについて、具体的な事例をあげながら紹介します。
そもそもの目的やプロセス、結果についてもレポートします。

• なぜリニューアルが必要だったのか
• リニューアルの目玉“オススメ度アイコン”
• 想いは正しく伝わっているか
• 様々な洞察から見えてきたカタチ
• リニューアルによりもたらされた結果
• 改悪となるリスクも忘れずに
• 今後の改善と新たな挑戦

なぜリニューアルが必要だったのか

このiOSアプリのリニューアルは、これからのRettyを目指したリニューアルでした。目的としては大きく2つあります。 1つ目は、プラットフォームの再構築です。以前のアプリは2015年にリリースしたものだったので、この先さらにグロースしていくために、技術的にも、情報設計的にも、ベースを新しく構築する必要があったということ。2つ目は、さらに多くの人々にRettyを使ってもらうために、もっとRettyらしい体験をしっかり作り上げるというものでした。

リニューアルの目玉〜オススメ度アイコン〜

iOSアプリのリニューアルと同時におすすめ度合いを表すアイコンのリニューアルも行いました。
まず、なぜこのアイコンが重要なのかということについてですが、このアイコンが「オススメの想いをストレートに表現する」重要な役割を担っているからです。

一般的にアイコンは、意味を視覚的に伝えるものとして使用されます。 Rettyのオススメ度アイコンは、行ったお店がどのくらいオススメなのかをアイコンで表現しています。アイコンがあることで、投稿する人はどれくらいオススメなのかが伝えやすく、お店を探している人は、オススメ度合いを直感的に理解することができます。
視覚的で簡単にオススメ度合いを伝えられるアイコンは、「信頼できる人の『オススメ』からお店を探す」というRettyのサービスコンセプトを構成する重要な要素であるとともに、Rettyのアイデンティティを表現する一つにもなっています。Rettyのサービスでは、「みんなのオススメから自分にとってBESTなお店が見つかる」ことを目指しています。

今回のリニューアルの目的である「もっとRettyらしい体験を」というのは、このBESTなお店が見つかる体験を向上させることが重要なミッションとなっています。そのためには、ユーザーのみなさんのオススメ内容がお店を探しているユーザーさんにストレートに伝わるような設計やUIであること、そしてこのアイコンがきちんとその役目を果たしていることがとても重要でした。

想いは正しく伝わっているか

以前のアイコンは顔の表情でオススメ度を表現していました。しかし、顔の表情の変化は非常に繊細な違いです。また、度合いを示すアイコンとしてはあまり見慣れないデザインでした。

このアイコンの意味が、ユーザーさんに正しく伝わっているのかということを調査するため、約200人にユーザーアンケートを実施しました。アンケートでは、アイコンの意味やオススメの度合いがきちんと理解できるかを調査しました。
回答結果をみてみると、オススメ度アイコンの意味、オススメの度合いの両方について、運営側の意図していた内容をユーザーのみなさんに伝えられていないことがわかりました。

様々な洞察から見えてきたカタチ

アイコンのデザインは2つの軸で検討を進めました。1つは誰もが直感的に理解できるモチーフかどうか、もう1つはオススメ度合いが正しく伝わるかどうか。この2つの軸をベースにして、アイコンのデザインを検討していきました。

まず「誰もが直感的に理解できるモチーフかどうか」という点ですが、2つの観点からモチーフを検討しました。
1つ目に、世の中で浸透しているモチーフを選定すること。 国内だけでなく、グローバルな視点でみても認知度が高いモチーフは何かを考えました。
2つ目に、スケールのしやすさです。 年齢、性別、文化などに影響しないモチーフにすることで、国やマーケットが違っても適用しやすく、またデザインの汎用度も高いことを重要視しました。
以上の2点から、モチーフはスターマークを採用しました。

次に「オススメ度度合いが正しく伝わるかどうか」についてですが、今回オススメ度合いをデザインするにあたって、手法としては「数と濃度とサイズ」を使って視覚的に度合いを表現することにしました。スターの数を物理的に増減させることで、度合いを視覚的にかつ直感的に伝えることができます。ただし、アイコン自体が小さいため、ぱっと見での違いをより強調させる必要があります。そこで、濃度とサイズでの差をプラスすることによって、視覚的にはっきりと度合いの差を表現することができます。

また、ユーザーさんのオススメする想いをアイコン化するために、オススメ度合いを伝える言葉をセットにしてアイコンをデザインしました。

リニューアルによりもたらされた結果

数値的な結果として、来店率（Rettyでお店を検索した人が実際にお店を訪問する率）が昨対比で約20%アップしました。 他の施策もあるため、オススメ度アイコンのデザインを変えたことだけによるものではありませんが、一つの要因として結果に寄与したと感じています。

また、リニューアル後、ユーザーさんから多数のポジティブな声もいただきました。 通常ですと、フルリニューアルの場合はネガティブな意見が出やすい傾向がありますが、想像以上にポジティブな声を多くいただき、Rettyでのお店探しがさらに良い体験へと進化したと感じています。

改悪となるリスクも忘れずに

フルリニューアルするに当たり、体験を大きく損ねる問題や大きなバグなどがあってはなりません。
そのため、リリース前にユーザーテストを複数回行っています。また、リリース前に社内にβ版アプリを配布して、約1ヶ月間、社員の約半数に実際に使ってもらいました。社員からあがってきた緊急度の高い不具合や問題点は、随時対応しながらリリースできる状態までブラッシュアップを重ねていきました。

また、オススメ度アイコンについては、ここまで抜本的なデザイン変更がサービス開始から初めてのことであったため、Rettyを長年使ってくださっているユーザーさんを困惑させてしまわぬよう細心の注意を払う必要がありました。

アイコンのデザインは、企画段階から代表と密にコミュニケーションを取りながらデザインを詰めていきました。また、早めの段階からカスタマーサポートチーム、営業チーム両方と連携しながらリリースまでの準備を行い、Rettyを利用しているユーザーさんと店舗会員の方々の両方にご迷惑をおかけしないよう、タイミングや事前告知をしっかり行った上でリリースしています。事前準備をしっかり行ってきたこともあり、リリース後にネガティブなご意見はほとんどありませんでした。

今後の改善と新たな挑戦

今回のリニューアルで“みつかる”という機能を新たに追加しました。自分から能動的にお店をさがす体験だけではなく、受動的にお店がみつかる体験をつくることができないかと考え追加した機能です。自分の位置情報から表示される料理の写真からお店をさがす体験をこの「みつかる」機能で実現しようとしています。

この機能はデザイナーが中心となって、コンセプトから画面までデザインしていきました。制作過程ではエンジニアやプランナーともディスカッションを行い、ブラッシュアップを繰り返して実装されました。
しかしこの機能はまだスタートしたばかりです。これからもっとユーザーのみなさんに使ってもらえる機能になるよう改善を重ねていく予定です。機械学習を取り入れるなど実験的な取り組みも行っていきながら、お店が見つかる新しい体験を実現したいと思っています。

Retty株式会社が運営する実名グルメサービス「Retty」 ( https://retty.me/ ) は、「信頼できる人からお店探しができる」グルメサービスとして、2011年6月にサービスを開始しました。実際に行ったお店のオススメ情報を投稿していただく形で、20〜40代の男女を中心に、幅広い年代にご利用いただいています。2017年5月に、月間利用者数が3,000万人を突破しました。

企業サイト：https://corp.retty.me/

関連記事