読者です 読者をやめる 読者になる 読者になる

Locotory

宿泊予約サイト「Relux」を運営するLoco Partnersの広報ブログです。

『プロダクトドリブン』で加速する、Reluxのカスタマー目線のものづくり

こんにちは、Loco Partners 組織開発グループの酒井です。

この夏、Reluxの裏側では大掛かりな開発プロジェクトが進行していました。その名も『Miesプロジェクト』。Reluxのアプリ(iOS,Android)の施設詳細(旅館やホテルの情報を表示するページ)のUX/UIのリニューアルを目的としたプロジェクトです。

「Less is more.」(より少ないことは、より豊かなこと)や「God is in the detail.」(神は細部に宿る)という標語で知られる近代建築の巨匠、Ludwig Mies van der Roheの名前をとって名付けられたこのプロジェクトでは、従来のReluxの開発体制とは一線を画する新たな試みがいくつも取り入れられました。

そこで、今回はその取り組みや成果を、Miesプロジェクトチームへのインタビューを通じて探ってみました!

左から
・技術推進室 技術グループ 赤池
・技術推進室 UXDチーム 唐橋
・プロダクト統括部 プロダクトグループ 前本
・技術推進室 技術グループ 武井

「Expediaヤバい!」と思って、声を上げた

—このプロジェクトは、どういうきっかけで始まったのでしょうか?

前本:元々は5月にプロダクトチームが本格的に発足して、「何から始めようか?」と議論している中で、アプリのUX/UIとか改善できるよね、という話が上がっていました。競合比で優れたものにしていこうと。

武井:競合の中でも、ExpediaのAndroidアプリをターゲットにしてスタートしました。

特に誰かから言われたとかではなくて、元々エンジニア内で「このアプリはヤバい!」って話してて、それをそのまま行動に移した感じです。自分たち主導で発案して、プロダクト統括部長の宮下や代表の篠塚も「それいいね、やろう!」となりました。

—デザイナー目線ではどんな課題感を持っていましたか?

唐橋:僕も元々アプリのUXについては直したいなと思っていたところがいくつもありました。情報の見やすさなどが気になっていましたが、それを一気に直せるチャンスだと思いましたね。

具体的には以下の方針で進めようと思いました。

・旅館やホテルの情報をさらに見やすくする

・同じ旅館やホテルで、部屋同士の比較検討をしやすくする

例えば、今までのReluxアプリは、施設の詳細を表示するページと、宿泊する部屋を選択するページが分かれていたんです。一方で「ヤバい!」と思ったExpediaのアプリは情報が1ページにまとまっていて、とても見やすかった。なので、そういう方針でリニューアルしていこうと思いました。

前本:かつマーケター目線で言うと「予約完了までに要するページ数が1ページ減ることで、カスタマーの離脱率を改善できるのではないか?」という仮説もありました。

チャレンジだからこそ、物を見ながら開発していく

—「直したい」「改善したい」というモチベーションは、皆さん主導で始まった感じですね。開発はどのように進めていったのでしょうか?

武井:最初にワイヤーフレームを作ってみんなで認識を合わせて、動きの確認はモックでやっていました。

唐橋:基本的な方針は決めていたので、そこはぶらさず、あとは実際に動かしながら制作を進めました。

—ワイヤーやモックを使いながらの開発って、今までの社内開発にはあまりなかったですよね?なぜ今回そのような進め方に?

武井:そうですね。今回は時間に余裕があったので。(笑)

という冗談はさておき、実際の動きを細かく確かめたかった、という理由が一番にあります。例えば、施設ページのアコーディオンの動きとか、あまり他のアプリでもない動き方なんです。チャレンジしたい一方で、品質は落とせないので、それに適したフローを選択しました。

赤池:今回「Expediaアプリを目標にUX/UIを改善しよう」というゴールが先にドンとあって、どうやるかは実際手探りのところも多かったんですよね。その分、実際に動きを見たり、テスト工数をきちんと見積りながら開発する、ということを意識的にやっていました。

武井:あわせて、DeployGateやSketchなどのツールを活用して、コミュニケーションを密に取るようにしていました。

デザイナー、エンジニア、ディレクターみんなが同じツールを使って、実装したらすぐ確認してフィードバックをもらえ、それを逐一反映させていくことができました。

唐橋:普段はデザインカンプを作ってから実装、というフローが多いのですが、それだとそんなにスピーディーなコミュニケーションは取れないんですよね。カンプでは動きまでは確認できないので。

あとはSketchを使うことで、いい意味でデザイナー⇔エンジニア間の侵食が起こったと思います。時には開発側からデザインが上がってきて、それをディレクターが見て意見するとか。

前本:ディレクター側も、Sketchを常に見ながらの進行でしたね。

武井:あー、アイコンとか作りましたね、そういえば。こんな感じでみんなが触りながら議論することで、仕上がりまでの過程はすごくスムーズだったと思います。

唐橋:実際に物を見ながらのフローになるので、デザイナーの初動が結構重要になります。一方プロジェクトが始まったころは他にも案件がいくつも走っていて、その頃はなかなか大変ではありました。(笑)

実際に完成したデザイン(iOS

「使いやすい」が増えた!

—実際のリリースは9月でしたが、周囲から何か反応はりましたか?

前本:App StoreGoogle Play上のグッドレビューが増えましたね。

武井:今までReluxコンシェルジュや宿泊時のお手紙などでお褒めの言葉をいただくことはありましたが、プロダクトに対してのそういうのはあまりなかったんですよね。今回の改修を機に明確に「使いやすい!」というレビューが増えて、ありがたい限りです。

赤池:社内でも結構話題に上がりましたね。開発ではない他の事業部のメンバーが「めっちゃいい!」「使いやすい!」って言ってくれたのも励みになりました。

武井:営業現場でも見やすくなったという声があったそうで、とても良かったです。

インフォグラフィックス「ひと目でわかるRelux」より

—ビジネス的な影響はどうでしたか?仮説に上げていた離脱率のところとか・・・。

前本:実際のところ改善しました!改修前と改修後の比較で、iOSAndroidとも予約率が数%上がっています。背景として、最初仮説に上げてた離脱率の部分も改善していました。

すべては『プロダクトドリブン』から始まる

—今回、プロジェクトの出だしや進行の中で新しいトライがいくつもあったと思います。その学びを今後どう活かしていきたいですか?

赤池:UXやUIの改善について、最初から最後まで自分たち主導でチャレンジできて、実際成果になったことがとても大きかったと思います。今後もそういう取り組みをいくつも作っていきたいです。

今、武井や前本と新たにアプリチームを結成し、更にiOS/Androidアプリを良くしていこうという取り組みを進めています。そういう中で事例を作って、より良いサービス、プロダクトにしていきたいですね。

武井:今回の流れで、プロトタイピングをもっと積極的に導入していきたいですね。

今まではドキュメントで仕様を決めてそれを起こすみたいな開発が多かったですが、触りながら作っていくほうがスムーズだとよくわかりました。

かつ、デザイナーやエンジニアだけでなく他の部署の人間も巻き込んで反応を取っていきながら開発したいと思っています。ツールをうまく使うことで、その辺も幅広い意見を集約できるので。

前本:ディレクター側でも、物ありき、デザインありきでもっと物事を進めていくようにしたいと思っています。

武井が言うとおりですが今回色んな意味で『プロダクトドリブン』な考え方や開発がスムーズだとわかったので、早速普段のMTGなどでもそういう試みを増やしています。デザインの観点から論点整理する、フィジビリチェックする、などなど。

唐橋:そういう取り組みをweb側でも取り入れて、プロダクトを底上げしていきたいですね。

—最後に、この記事の読者、特にエンジニアの方々に一言お願いします!

武井:Reluxをかっこよくしてみたい!という方はぜひお話しましょう!!

唐橋:アプリに負けないくらいPC/SP版にも力をいれてるので、一緒にものづくりをしてくれるエンジニア/デザイナーさん大募集中です!


Reluxでは、日々このようなプロダクト改善の試みを多数走らせています!

プロダクトドリブンな環境で「働いてみたい」「興味ある」という方、ぜひ一度Loco Partners オフィスまで遊びにきてください!

www.wantedly.com

www.wantedly.com

www.wantedly.com

www.wantedly.com

www.wantedly.com