メンバーの夏の願望

今年の夏は、墨田川の花火大会絶対見たいのスティーブです。

今年の夏は、ビアガーデンに行きたいメイラです。

今年の夏は、元気にいっぱい外で遊びたいマークです。

マーク、久しぶりに…あ、違う、ラヂオ初めてだ。

ラヂオ初めてですね。

いらっしゃいませ。

待ってました。

外に元気で遊びたいです。今年こそは夏に外でいっぱい遊びたいなと。

小学生みたいな。

確かに、日の光いっぱい浴びてね。

そうです。

日の光大事だから。
大事ですね。
メイラが今年の夏は、

ビアガーデンに行きたいです。

ビアガーデンって久しぶりに聞いたな。確かに、毎年行ってたな。

メイラでもあんまりお酒飲むイメージなかったですけど。

それが最近、この会社に入ってから飲めるように割となってしまいまして。

なんかちょっとあれが悪いな。ちょっとなんか印象が悪いな、それ。

スティーブは隅田川の花火大会。

そうそうそう、そうなんですよ。花火大会好きなの、僕が好きなの有名じゃないですか。

そうなんですか?

初めて聞きました。
初めて聞きました。

会社内では有名だと思うんですけど。

意外とロマンチックですね。

いやいやいや、もうあのでっかい音とでっかい花火大好きなんですけど、
隅田川の花火大会ずっとやってなくて、ようやく近所で見れるので。
ラヂオ初めての話

今回はマークをお呼びしております。

お願いします。

ではですね、最初にマークに簡単に自己紹介をしてもらおうと思うんですが。

マークと申します。
2016年ですかね、その時は学生だったんですけれども、
学生インターンとして、当時はジュビリーワークスっていう社名だったんですけど、
インターンとして来ていて、2018年にタイムツリーに入社したっていう感じになります。
今はプロダクトマネージャーとして働いてます。そんな感じ。

私よりもだいぶパイセンっていう、だいぶよる株なんだよね。
そうですよね、確かに。
入社以来ずっとプロダクトマネージャーなんですね。

企画とか一時期マーケティングとかも並行してやってたりはしましたけど、
基本的には企画がメインでやってましたね。

今はプロダクトディビジョンの方のプロダクトマネージャーですよね。

そうです。めらと一緒ですね。

そんなマークをお呼びして、今日はどんな話題を話しましょう。
タイムツリーのUIリニューアルについて

今日のテーマはタイムツリーのUIリニューアルについてお話ししたいと思っています。
UIがちょっとタイムツリー直近変わりましてですね。

マジですか。
そうなんですよ。

そのUIリニューアルの背景とか、どういう経緯でやっていったのかみたいなところとか、
そのあたりの話をマークにお伺いできればと思います。
早速なんですけれども、そもそもなんでUIリニューアルをしたのかみたいな背景をマークに聞いてもよいですか。

企画背景なんですけれども、一言でお伝えすると、
タイムツリーのユーザーが今4500万を超えているんですよね。
かなりユーザー数が拡大してきていて、これからももちろんより拡大させていきたいというところがあるので、
そうなった時に、どんなユーザーさんにも使いやすいシンプルなプロダクトにする必要があるというところと、
それに頼るUIにしなければならないというところがあるので、
そこを変えるためにリニューアルというところを始めたという感じですね。

前回、すごい大幅にUIを変えたタイミングが2020年とかでしたよね。
社内でメインストリートと呼んでいる縦スクロール型で、
マンスリー画面、月のカレンダー画面を下にスクロールしていくと、
メモ帳が見れたりとか更新履歴が見れたりするという、
あれが結構大幅なリニューアル、2020年とかだったと思うんですけど、
その一個前は、今最新の、変えようとしているUIと結構同じようなタブUIと呼んでいるやつですかね。

そうですね。

そんな歴史的背景もありつつ。

その背景というのは今お話ししてもらった通りだと思うんですけれども、
メインストリートのUIでどこに課題があったみたいなのってあるんですか。

課題でいうと、一般的なカレンダーアプリを見てもらうと分かると思うんですけれども、
基本的にはメインのカレンダービューというのがあって、
タブ形式、下にビューを切り替えるようなタブが固定であると思うんですよね。
それが一般的なカレンダーアプリに使われているUIだと思うんですけれども、
タイムツリーのUIというのは先ほどスティーブからもお伝えしてくれたように、
下にスクロールする形のUIになっているんですよね。
なので、一般的なカレンダーアプリ、サービスと比較すると、
その辺が結構珍しいUIをタイムツリーは採用しているというところがあって、
今まではそういう変わったUIとかでも使い勝手が多少難しいみたいなところがあっても、
言った言わないのミスコミュニケーションであったりとか、
そういう課題を解決したいといってタイムツリーを使ってくれているユーザーさんが多かったので、
多少その辺の使い勝手が悪かったとしても、そのハードルを乗り越えて利用してくれてたんですよね。
でも今ってユーザーがかなり大きくなってきていて、
そうなってくるとデジタルリテラシーが高くないユーザーさんも結構最近は多く入ってきているので、
そう考えると変わったUIっていうのは結構使い勝手とかがなかなか分かりづらかったりとかして、
そもそも課題が弱いユーザーさんも今入ってきている状態なので、
そうするとそういうちょっとした使い勝手の部分ですぐに離脱してしまうところが課題としてあるというところがあって、
もうちょっと一般的なカレンダーアプリのUIに寄せようというところでタブ化のUIに変えようという感じになった経緯ですね。

なるほど、使い心地の部分ということですね。

そうですね。

なんか認知負荷が高かったんじゃないかみたいな話も聞いたことがあったんですけれども、
それってどういう感じでしたっけ?

えっとですね、認知負荷って呼んでいるのはいわゆるマンスリビューをイメージしてもらうと、
タイムツインのマンスリビューを見てもらうと分かると思うんですけれども、
結構いろんなボタンというか機能がいろいろ配置されているんですよね。
そういう機能って置いていても結構使ってくれているユーザーさんって結構一部のユーザーさんとかであったりしていて、
その機能を使わないユーザーさんにとっては結構何かを使おうってなった時に、
それが気になっちゃったりとかして認知負荷につながっているんですよね。
特に新しいユーザーさんとか考えてもらうと分かると思うんですけれども、
例えば自分とかが新しいサービス使ってみようって言って使った時にいろんなボタンがあったら、
結局どう操作していいのかがそもそも分からなくなっちゃって、
結局離脱しちゃうみたいなケースも自分では結構あるんですよね。
あるのでそこをいかにタイムツリーで置いているコア価値って呼んでいるんですけれども、
それが予定作成と予定共有という部分なんですが、
そこが最短でいけるようにそこに認知の負荷がかからないような状態で体験してもらえるようにというところで、
あまり使われていない機能であったりとかいうところは、
そのマンスリーのメインのユーカラーは取り除こうというところで認知負荷を下げたという感じですね。
なるほど。よりシンプルにみたいなことですかね。

そうですね。具体的に言うと、旧UIと文字を呼ぶと、
1個前のUIだと右上にサブスクリプションタイムツリープレミアムの購入ページへの動線があったりとか、
あとはウィークリーとかマンスリーと表示を切り替えるようなボタンがあったりしたんですけど、
もちろんそういうのも便利に使っているタイムツリープレミアムも購読いただいているユーザーさんいるけど、
一定の割合だったので、他大多数のユーザーさんに向けてそこに置くっていうのは
ちょっとさっきから出ている認知負荷がどうしても高くなっちゃうと。
これ何のボタンなんだろうっていうのが分かりづらかったりする。

そうですね。

そういうのを極力シンプル化して、本来のカレンダーのこれもさっきから出ているコア価値、
コアな機能だけをファストビューに全て凝縮させたって感じですね。

そうですね。

アンジュもよく言ってますよね。コア価値に一直線なプロダクトみたいな。

一番大きい部分はスクロールがなくなってタブ化で固定になったっていうところが一番大きい点ですね。
あとはさっきスティーブが言ってくれてたプレミアムの機能をファーストビューからではなくて
設定タブの中に移動させたりとか、あとはカレンダービューの切り替えですね。
マンスリーからビークリーとか、あとリストとかバーチカルとかっていう
タイムツリーの新UIリニューアル

カレンダービューの切り替えも設定に移行したりとかっていうところが大きく変わってくる部分かなと思います。
すごい使ってみるとわかると思うんですけれども、マンスリーのビューがすごいでかくなった。
予定確認とかもすごい個人的にはしやすくなったんじゃないかなという感覚があります。

表示される予定の数増えましたよね。

大きくなった分。

どんなにシンプルなアプリ、サービスでも、やっぱりユーザーさんに便利に使ってほしい、より便利な機能を届けたいというので
どんどん機能が複雑化していったりとか提供価値が増えていったりというのは結構宿命的なところはあると思うんですけど
タイムツリーもそういうような道をたどりがちになっていたところを限定回帰したと。
そこのあたりでチーム内でシンプルスリム化しようってどんな議論があったのかなっていうのが気になっていて
割と思い切りとか決断が必要じゃないですか。
プロジェクトメンバーでどんな会話を行ったりしていたんですか。

結構みんなプロダクトをシンプルにしようっていうところで、かつユーザーにフォーカスしているものだったりするので
みんなも始めからスタートから納得感はすごいみんな持っていたっていうところがあったので
特段ここをめちゃめちゃ議論したっていうところはなかった気がしますね。

じゃあみんな共通認識共通見解でも持っていたんだね。

そんな気がしています。
メラさんどうですか。

どうだろう。割とシンプル化はAnjuのプロダクトディビジョンの方針として
まず機能とかを提供していくための下地開発として
タイムツリーはカレンダーアプリなので予定作成とかに一直線なプロダクトにしていきたいっていうのが前提としてあって
そのためにシンプルにするっていうのをまず取り組みたいっていうのがプロダクトディビジョンの設立時の方針だったんですよね。
なのでやることとしてはもうそれから取り組もうっていう風になっていたかなと思ってます。
例えば一部背景カスタマイズ機能を今回削除したんですけれども
例えばそこに関しては背景って本当に削除していいのかみたいな話は出たりしましたね。

あれ意外と賛否両論あった社内では。

そこはありましたね。
ユーザーさんの声からも事前になくなりますみたいなアナウンスを出してたんですけれども
一部なくしてほしくないみたいなユーザーさんはいましたね。

あったね確かにTwitterとかで。

でも今回割とメインストリートが配信になるので背景画像が見える部分っていうのがかなり限られてしまうんですよね。
マンスリー流だともう左右端しか見えないみたいな感じになっちゃって
どうしてもそこが最大限背景画像を生かすことが提供できないっていうところがあったので
そういう反対の意見とかもかなりあったんですけれども
そういう意図からなくそうっていう感じになったという感じですね。
あとユーザーさんが背景画像をしているっていうところの意見をもうちょっと深掘って考えてみると
TimeTreeってカレンダーを複数持てるので
今どのカレンダーを開いているのかって見分けるために割と背景画像を設定されている方が多かったんですよね。

なるほど確かに。

なので今回背景画像はなくなってしまうんですけれども
そのカレンダーを見分ける、今どのカレンダーを開いているのかっていうのを
より分かりやすくする方法っていうのは他にもアプローチ方法としてはあると思うので
その辺は今後課題によりなってきたら改めて解決策みたいなところは検討したいなと思っています。
メインストリートで得られた学び

マークに今回は新UIのお話をいろいろお伺いしたんですけれども
最後にまとめとして前回旧UIですね
メインストリートと呼んでいたUIを使って
メインストリートUIをリリースしていた時に何か得られた学びとか
そういったものがあれば教えていただきたいです。

前回のメインストリートでやってた仮説としては
カレンダーからメモであったりとか固定更新であったりとかっていうのを
タブを切り替えずにスクロールの流れで一貫して確認できるっていうので
そっちの方がタブよりも使いやすいんじゃないか
一連の流れで確認できるっていう方がユーザーさんにとっては使いやすいんじゃないかっていう仮説を持ってやってたんですけれども
最終的な結果で言うと多少は良くなったっていう感じのところはあって
良くはなったんですけどその仮説が本当に確からしいことが言えたのかっていうと
そこまではちょっと言い切れない部分があったのかなというところがありますと
なので

メインストリートと呼んでいる前回のUIリニューアルで
確かめたかった仮説は確かめられていたっていうことだよね

そうですね
この部分は確かめられて

一連の体験スムースな体験の中でユーザーさんによって確認を手作成をしてもらえれば
アプリの滞在時間とか利用率が上がるのではないかという仮説を検証できたという意味では
前回のリニューアル失敗ではなかったんですね

そうですね
それ自体の学びがあったって感じですね
検証の仮説の

その学びがなければ今回またタブUIに戻すというのかな
さらにブラッシュアップしたタブUIに変えるっていう判断はできなかったかな

そうですね

これは放送配信する頃にはちょうど変わってるぐらいなのかな
まだ変わんないのかな

7月末にAndroidがリリース予定

iOSは来週もリリース

来週

今がこれ撮ってるのが6月27なので
僕がラジオの編集をサボらなければなんかいい感じに出るはず
いいですねユーザーさんの反応もまたちょっと楽しみですね

そうですね

意見聞いてみたいですね

じゃあぜひこれをお聞きの方で使ってみて
ぜひ感想を言いたいという方がいらっしゃいましたら
ぜひお寄せください
では今回はプロダクトマネージャーのマークをお呼びして
新UIリニューアルの話をお伺いしました
マークありがとうございました

ありがとうございました

ありがとうございます
イヤホール行こう