63
confiden’al デザイン負債の返し方 ~長期運用アプリにおけるデザインリニューアル事例「ネイルブック」の場合~ 株式会社スピカ

デザイン負債の返し方 〜ネイルブックの場合〜

Embed Size (px)

Citation preview

confiden'al

デザイン負債の返し方 ~長期運用アプリにおけるデザインリニューアル事例「ネイルブック」の場合~

株式会社スピカ

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  星 雄介(ほし ゆうすけ) •  株式会社スピカ グロースチームリーダー ネイルブックのアプリとWEBのユーザ獲得を担当。

•  2015年4月入社 •  元はプログラマです。モバイル業界にいました。 •  デザインは素人です。絵は描けません。 •  ファシリテート、バグの調査、インタビュー調査、Sketch3まで、なんでもやる雑用係です。

•  Facebook:yusuke.hoshi.35 Qiita:Hoshi_7(読みづらいけど細かい事例のせてます)

  2

登壇者自己紹介

画力  0!

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  ネイルブックの紹介 •  ネイルブックが抱えるデザイン負債 •  デザイン負債返済事例 •  デザイン負債返済ノウハウ •  まとめ

3

本日の発表内容

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

ネイルブックの紹介

4

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

5

ネイルブックの紹介

サービス開始  2011年4月30日  対応言語  日本語・英語  対応OS    iOS/Android    URL    hFp://nailbook.jp

毎日約1500枚の新作ネイルが投稿される日本最大のネイル写真共有サービス

MAU                                    80万(全プラットフォーム合計)  ダウンロード数                  130万(iOS・Android計)  ネイリスト 1万人  公式サロン                        3000店舗

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

6

ネイルブックの紹介

ネイルデザインを探す!  (ほとんどの人はこれ)

気になるネイルがあれば  ネイリストの投稿を確認。つづいてサロンの情報をチェック!

場所や人柄などをチェックして  サロンに行くタイミングと合えば  サロンに来店してオーダー  

こんなイメージでお願いします

次のネイルはこんなイメージでやりたい!

気になったサロンの情報をチェック

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

ネイルブックが抱えるデザイン負債

7

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

8

ネイルブックが抱えるデザイン負債

「デザイン負債」とは

「デザインの年輪」が見える状態!

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  ナレッジ上の負債

•  実装上の負債

•  心理上の負債

9

ネイルブックが抱えるデザイン負債

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

10

ネイルブックが抱えるデザイン負債

ナレッジ上の負債

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

11

ネイルブックが抱えるデザイン負債

100回

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

12

ネイルブックが抱えるデザイン負債

バージョンアップの回数

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

13

ネイルブックが抱えるデザイン負債

3人

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

14

ネイルブックが抱えるデザイン負債

歴代のディレクターの数 歴代のデザイナーの数

これリハで知りました!

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

15

ネイルブックが抱えるデザイン負債

もはや何も 引き継がれていない……

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  存在理由がよく分からないものがある。

•  予定が実現されなかったものがある。

•  こうするつもりだったかな?が多い。

•  なぜそう決まったの?も多い。

16

よくわからないものがある

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

17

存在理由がよくわからないものがある

「どうしてこうした」の例

「たぶんこうしたかった」の例 たぶん、自己紹介タグで検索させたかった。 検索に使えないのに自由入力まで可能。

「講演口頭」  通常は選択されている方がハイライトされてピンクではないでしょう

か?

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

覚えてないレベルでたくさん存在する。

18

こういうところはキリがない!

「講演口頭」  ネイリストを追加できると思いますが、  実は追加できません。  ネイリストさんから実際にお問い合わせが  多いポイントになります。

「講演口頭」  こちらもリンクしません。  検索にはつかえます。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

覚えてないレベルでたくさん存在する。

19

こういうところはキリがない!

あっちこっち実装が中途半端。 日本語で書くとわかりやすいんですが。 ユーザーが体験を完結できない!

行動の過程がブツ切りのマグロのよう。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  1dpでも見た目ぜんぜん違うのに!

20

スタイルガイド的なものがなくてバラバラ

「講演口頭」  見ずらいですが、  写真が1dp大きいだけで、  左右のpaddingのとりかたが  変わります。  がスタイルガイドがないので  細かいところが  画面によりバラバラです。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

21

スタイルガイド的なものがなくてバラバラ

特にわかりやすい。 Web版ですが。 ほぼ同じ要素の画面。 なぜか統一されていない。 アプリ側も色やサイズ、 padding、margin等から しっかりしているとは いいづらい。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

22

ネイルブックが抱えるデザイン負債

実装上の負債

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  Auto Layoutじゃない! •  スケーリング非対応なのでiPhone6が荒い。 •  MRC!なので凝った実装がしづらい。 •  可読性が低いのでデザイン改修に時間がかかる。 •  部品をレイヤーで分けてない!

23

iOS3時代からリファクタリングしてない

[追記]正確にはLunchScreenOnで引き延ばしているのでiPhone6でも画面が狭いです。  次ページにわかりやすい例をのせます。  

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

24

追記:自動で引き延ばされる機能Offの対応

Before After

表示領域が! 段違い

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

25

ネイルブックが抱えるデザイン負債

心理上の負債

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

26

ネイルブックが抱えるデザイン負債

理由がわからないし。  全然統一されてないし。  ダサいって言われるし。  

 もう、全面リニューアルしたい!  

全部変えたい。  

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

27

ネイルブックが抱えるデザイン負債

しかし。。。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

UIがダサいという指摘。 「自分自身」と「中の人」 『プラットフォーマー』からしか言われない。 肝心のユーザーには、あまり言われない。

28

本当はもう全部リニューアルしたい

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  検索が望む結果にならないとか。 「かわいい!」が整理できないとかは多い。

•  優先すべきは望ましいUXの実現や実現したいUXの具現化。

•  UXとはユーザーの課題や需要を解決・満たすことができる体験。

•  なんといっても潤沢なリソースを使える状況ではない。

29

本当はもう全部リニューアルしたい

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

全面リニューアルを ユーザが求めて

いるわけではない!

よく見られたいと思う。 承認欲求に踊らされている。

30

本当はもう全部リニューアルしたい

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

自己の承認欲求が満たされる事は ユーザーには関係がないので。

チームの数値目標は達成されない。

結論

フルリニューアルは やらない!

31

本当はもう全部リニューアルしたい

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

デザイン負債返済事例

32

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

デザイン負債返済の基本方針

横浜駅方式

33

デザイン負債返済方針

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  横浜駅とは? 日本のサグラダファミリア!

- 1915年以来100年も改修工事を続けている。 - 非常に未完成な駅。 - 実際2008年のころ横浜勤務だったけど。使いづらい。 •  でも使われてます! - 世界5位:平均220万人/日の巨大駅 - 横浜市のターミナル機能という役割を果たしている。 - 横浜の玄関口としてのUXを実現している。 - 構内のレイアウトは微妙だけど!

34

デザイン負債返済方針

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  ネイルブックも横浜駅を目指す!   UIは微妙なので徐々に直す。 ネイルのデザインを探したいという課題に対して。 お気に入りのデザインが見つかるという答えを返すところを優先。 この形のUXの追求 MAU向上につながる施策を優先。

35

要するにアジャイルをスプリントで回す話です。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

デザイン改修事例

改修内容の紹介

36

デザイン改修事例

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  Android  2015年4月時点

37

改修のスタート

いろいろ指摘噴出

「講演口頭」 こちらの細かい文字はみなくても  大丈夫です。  4月にいろいろ指摘があって、  フルリニューアルするかも前提で、  40pほどの指摘をだしたという点と  最初の画面をお見せする意図です。  

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  iOS  2015年4月時点

38

デザイン改修

「講演口頭」 iOS版も同じように指摘や。  改修点の洗い出しを最初におこ

なっています。  

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

39

デザイン改修

基本的な改修の流れ

A:7月 I:9月 チュートリアル導入 (会員登録率 5%UP)

A:8月 I:8月 写真タグ複数登録・検索対応 (1ヶ月継続率 7%くらいUP)

A:6月 Support Library更新 フローティングボタン試験 右上のが使われる結果。 検索機能の改修を決意。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

40

デザイン改修

Android:10月~11月 2ペイン化 かわいいボタンをホームに お気に入り機能の非会員提供(10枚まで) マテリアルに段階的に対応始める (1ヶ月継続率10%くらいアップ かわいいやお気に入りの利用率もアップ)

Android:12月 見た目のブラッシュアップ ツールバーにお知らせボタン追加 マテリアル化も進める お気に入りインジケーター。 読み込みも爆速化。 (1ヶ月継続6~7%アップ)

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  Androidの爆速化についてご質問がおおかったので追記します。  

 タイムラインが爆速な件ですが。  実装をご担当いただいた。弊社で協力いただいているプログラマーの宮越さんに聞いてみました!    背景:  Android版のタイムラインの表示速度があまりにも遅かった。  12月にAndroidエンジニアの宮越さんにご協業いただけることになったので、UIスレッドが原因だとおもうけどということで調査をお願いしました。    ネイルブックの場合の原因  -­‐  UIスレッドが主な原因とのこと。  -­‐  ネイルブックではキャッシュのファイルアクセスが原因だった。  -­‐  ファイルアクセスを別スレッドに      タイムラインチューニングのコツ  -­‐    スクロール中には何も処理をやらないのが理想なので極力なにもやらないで済むようにチューニング。          スクロール完了で画像のロード・表示を順次実行する。  -­‐    表示している位置が全体の半分を越えると追加読み込み。  -­‐    メソッドの前後でタイムスタンプとって遅い処理を探してつぶす。    キャッシュや通信周りでの使用ライブラリ  最近、先日まで協業いただいていました。ゆめみの久須さん(hFp://hkusu.github.io/)によりpicasoに移行しました。  Volleyとpicasoの併用になっています。本当はvollyはやめたかったそうですが、現在のところは併用で一旦置いています。  

41

[追記]Android爆速化について

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

42

iOS:11月~12月 2ペイン化のiOSへの反映 段階的にAndroidの見た目に追従。 (紙面的にのせないがタブの見た目は未統一) タブメニュー化の実施

iOS:12月~1月 タブや色等の見た目やバグの改修

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

主に以上。他に細かい改修や 負荷対策をすすめた。

結果。 43

デザイン負債返済方針

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

1ヶ月継続を『45%』から

『69.5%』まで改善!

全面リニューアルしなくても 数値は改善できる!!

44

デザイン負債返済状況

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

45

結果

11月新規ユーザーの1ヶ月継続Reproだと7割越え GAで69.5% 季節的(ネイル業界は夏と冬が繁忙期)要因がなくても62%は固い状況。 地味に10月第2月も61%まで上がっている。

当月は集計期間中で  あてにならない

普段は週別を追っています。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

46

結果

アクティブユーザーの推移 [追記]  繁忙期に合わせて  リテンションをあげておけば  繁忙期に増える分がそのまま  上昇しやすいので年末頑張った。

[追記]  昨年同時期に積めてないのと大きな差がでている。

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

47

クラッシュ対応はしっかり

継続率向上の背景として。 今回はデザインナイトなので省きましたが。 いつでも、きちんと使えることを担保するのは大切

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

デザイン負債返済ノウハウ

48

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

デザイン負債返済に伴う ノウハウ

合意形成の方法

49

デザイン負債返済方針

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  合意を得るのが大変 -「変えたい」意欲のある人は大切。 - 変えたい人は主張が強い。 横浜駅方式では[追記](行き過ぎの)コントロールが必要。 •  なぜそんなに変えたいのか? -「みんな」結果がでるか不安。 - [追記]結果はでなくてOkです。いきなり出なくて当然です。 手番を増やして、最後に当たればいいと思います。 不安だと極端な「保守」か「変革」に走る。 過渡期の場合どっちにも寄ってはいけない。 大切なのはバランス。 50

たぶん最も苦労するのは合意形成

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

信号を切り替えるように、やるやらないをコントロール。 青・黄・赤的に調整する。 具体的な手段を2つ紹介。 •  会議時間の限定で信号を切り替える - 1時間で切る。 - 分割して話の内容をコントロールする。 - マストのストーリに絞る。 - 細かいとこは委任する。(黄) - 1時間を超えて合意できないものは 重すぎるか時期尚早。(赤)

51

信号を切り替える

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  実装期間の制限 - 2週間で1度出す。優先度決める。 - 揃わなくても出す。とりあえず出す。 - 終わらないものは次に回して優先度再設定。 - 明日で済むものは今日やらなくてもいい。 - 期間内のリファクタリングは基本青信号。

52

信号の切り替え方

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

53

伝え方

•  結果(数字)がでるまでは意図は伏せる。 「報告・連絡は正確に。意図は伏せる。」 •  他チーム向け 「数字がでるところを優先します。」 「積極的なリニューアルはできません。」 「実験です。ダメなら戻します。」 •  スタッフ向け 「余裕が出ればリニューアルします。」

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  説明なしNG。 •  微妙な状況は事実。事実は認める。 •  提案は聞く。聞いた上で判断。 •  相手の性格によってやり方を変える •  基本はどう「やる」・「やらない」信号を切り替えるか。 •  煙たがられてもYES・NOはハッキリ伝える。 - あいまいは黄色信号。 - 止まるか止まらないかは相手しだい。 - 止めたいなら赤を出す。やってほしいなら青を出す。 - できればやってほしいけど、プラス1でいいなら黄色のまま。

54

実装スタッフとの合意の取り方注意点

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

• 嘘はいってはいけない! 「リニューアルは今すぐできません。(数字を追うと結果的にリニューアルされます。)」 (相手が保守的ならリニューアルはしません。数字改善につながる箇所の改修実験はしますとか言っておくとか。)

「余裕が出れば(徐々に段階的に)リニューアルします。」 省略する。

55

嘘はNG

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

デザイン負債返済に伴う ノウハウ

成果物管理方法変更

56

デザイン負債返済方針

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  Gitをデザイナーさんにも導入、ただしゆるく        -­‐  SourceTreeまかせ        -­‐  PullRequestとか面倒なのはなし

57

デザイン成果物の管理方法

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

デザイン負債返済に伴う ノウハウ

レビュー制度化

58

デザイン負債返済方針

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  レビューの制度化

Sketchの導入でコミュニケーションロスを回避しておく - スタイルガイドなしでもなんとかなる。 - 綺麗には組めていなくても、無いよりいい。 - 全員分買っています。 レビューの実践 - ワイヤーとデザイン清書の2回。 - リリース前にモンキーテスト会。 レビュー導入の利点 - エンジニア・デザイナーの意見反映が可能になる。 - 調整が1回で済むので時間短縮。

59

ワークフロー整理

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

60

Sketch3すごくいい

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

まとめ

61

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  ユーザーの行動を変えられるものが優先。  

•  ないものはない。議論より、リリースと結果。            [追記] 手数を増やして成功にいかに早く近づくか。  

•  割り切れる仕組みづくりとマインド形成の努力。  

•  結果的にリニューアルできて数字も伸びる。

62

デザイン改修に対する考え方

前提:デザインは目的を実現するための手段

Copyright  ©  Spika  Inc.  2015  all  rights  reserved.

confiden'al

•  ご清聴ありがとうございました      まだまだ、改善が必要な箇所が多いです!  どんどん改善をつづけていきます!    この資料は後日、公開いたします。  

63

まとめ