Transcript
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
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
8
ネイルブックが抱えるデザイン負債
「デザイン負債」とは
「デザインの年輪」が見える状態!
Copyright © Spika Inc. 2015 all rights reserved.
confiden'al
• ナレッジ上の負債
• 実装上の負債
• 心理上の負債
9
ネイルブックが抱えるデザイン負債
Copyright © Spika Inc. 2015 all rights reserved.
confiden'al
14
ネイルブックが抱えるデザイン負債
歴代のディレクターの数 歴代のデザイナーの数
これリハで知りました!
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
• 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
26
ネイルブックが抱えるデザイン負債
理由がわからないし。 全然統一されてないし。 ダサいって言われるし。
もう、全面リニューアルしたい!
全部変えたい。
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
• 横浜駅とは? 日本のサグラダファミリア!
- 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
• 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
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
• 合意を得るのが大変 -「変えたい」意欲のある人は大切。 - 変えたい人は主張が強い。 横浜駅方式では[追記](行き過ぎの)コントロールが必要。 • なぜそんなに変えたいのか? -「みんな」結果がでるか不安。 - [追記]結果はでなくて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
• Gitをデザイナーさんにも導入、ただしゆるく -‐ SourceTreeまかせ -‐ PullRequestとか面倒なのはなし
57
デザイン成果物の管理方法
Copyright © Spika Inc. 2015 all rights reserved.
confiden'al
• レビューの制度化
Sketchの導入でコミュニケーションロスを回避しておく - スタイルガイドなしでもなんとかなる。 - 綺麗には組めていなくても、無いよりいい。 - 全員分買っています。 レビューの実践 - ワイヤーとデザイン清書の2回。 - リリース前にモンキーテスト会。 レビュー導入の利点 - エンジニア・デザイナーの意見反映が可能になる。 - 調整が1回で済むので時間短縮。
59
ワークフロー整理
Copyright © Spika Inc. 2015 all rights reserved.
confiden'al
• ユーザーの行動を変えられるものが優先。
• ないものはない。議論より、リリースと結果。 [追記] 手数を増やして成功にいかに早く近づくか。
• 割り切れる仕組みづくりとマインド形成の努力。
• 結果的にリニューアルできて数字も伸びる。
62
デザイン改修に対する考え方
前提:デザインは目的を実現するための手段
top related