51
How What Why Why and How Design UI 2015 Goodpatch Inc. Mikihiro Fujii

Whyand how Design UI

Embed Size (px)

Citation preview

Page 1: Whyand how Design UI

How

What

Why

Why and How Design UI

2015 Goodpatch Inc. Mikihiro Fujii

Page 2: Whyand how Design UI

藤井 幹大株式会社グッドパッチ 組織デザイン担当 執行役員 チーフUXデザイナー VOYAGE GROUPでBePROUDさんとお仕事

自己紹介

Page 3: Whyand how Design UI

人々のハートを揺さぶるようなDesign&Productを生み出し、世界をより良い方向に前進させる

Page 4: Whyand how Design UI

プロトタイプをつくるツールではなく、

プロトタイピングをチームにインストールするツール

Page 5: Whyand how Design UI

Prottの基本的な使い方

Page 6: Whyand how Design UI

なぜ、今 「デザイン」

なのか

Page 7: Whyand how Design UI

2013/5 2015/5

2012/10 2014/10

Page 8: Whyand how Design UI

2013/5 2015/5

2012/10 2014/10

デザイン会社の買収が進み、 ビジネス×デザインへの期待が高まっている。

Page 9: Whyand how Design UI

ビジネス×デザインへの期待が高まっている。

Page 10: Whyand how Design UI

なぜ UIをデザイン

するのか

Page 11: Whyand how Design UI

User Interface?

Page 12: Whyand how Design UI

User ?

Interface

User / Interface / ?【Interface】接触面、境界 「User」が誰で「?」が何なのかによって、その間に入るべきInterfaceは変わる。

Page 13: Whyand how Design UI

User ?User

Interface

User / Interface / ?

コンピュータ アプリ

サービス 事業 社会

【Interface】接触面、境界 「User」が誰で「?」が何なのかによって、その間に入るべきInterfaceは変わる。

Page 14: Whyand how Design UI

UI Design?

Page 15: Whyand how Design UI

体験 行動

UI

UI

事業 サービス システム

ユーザーの 体験

ユーザーの 行動

UIの役割• 事業/サービス/システム/社会…と人の接点 • 体験と行動を生み出す。

Page 16: Whyand how Design UI

既存のマインドセット事業の存続のためにモノをつくるというマインドセットでは成功しにくくなっている。

ユーザーの 体験

ユーザーの 行動モノ

存続 {収益目標

ユーザー数

問題解決

Page 17: Whyand how Design UI

2000年代前半誰よりも早くビジネスモデルを発見 Google Adwords:2000年10月 米国サービス開始Value Commerce(1999年), a8.net(2000年), Linkshare(2001年) 開始

存続 {

ユーザーの 行動 {

CTR / CVR

Acquisition Activation Retention Revenue Referral

収益目標

ユーザー数

問題解決

Page 18: Whyand how Design UI

2000年代後半誰よりも早く開発 Ruby on Rails: 最初のバージョン公開(2004年7月)Django:BSD License で公式にリリース(2005年7月)

モノ 存続} {

ユーザーの 行動 {

事業

サービス

コンテンツ

機能、価格

収収益目標

ユーザー数

問題解決

CTR / CVR

Acquisition Activation Retention Revenue Referral

Page 19: Whyand how Design UI

2010年代誰よりも早くユーザーに価値を提供する iPhone3G(2008年)→iPhone4S(2011年 SOFTBANK+KDDI)『The Lean Startup』『UX白書』(2011年)

ユーザーの 体験

ユーザーの 行動

モノ 存続}}

価値

感覚 / 感情 / 作業 / 意味

ストーリー {{

事業

サービス

コンテンツ

機能、価格

収益目標

ユーザー数

問題解決

CTR / CVR

Acquisition Activation Retention Revenue Referral

Page 20: Whyand how Design UI

UIデザインの役割• サイクル全体のデザイン • モノと人の接点となり、体験と行動を生み出す。

ユーザーの 体験

ユーザーの 行動

モノ 存続}}

価値

感覚 / 感情 / 作業 / 意味

ストーリー {{

事業

サービス

コンテンツ

機能、価格

収益目標

ユーザー数

問題解決UI

CTR / CVR

Acquisition Activation Retention Revenue Referral

Page 21: Whyand how Design UI

どうやって UIをデザイン

するのか

Page 22: Whyand how Design UI

UIデザインのスペシャリスト集団

Page 23: Whyand how Design UI

取締役会

経営会議

Tokyo Berlin

管理部

組織デザイン室

広報室

デザイン ディビジョン(受託)

Goodpatch組織図

プロジェクトチームプロダクト ディビジョン(自社)

Page 24: Whyand how Design UI

プロジェクトチームMTG1. 各チーム(2人以上)が独立してプロジェクトを進める。 2. メンバーはRole別に責任と権限持つ。 3. 原則掛け持ちしない。案件ベースで招集/解散。

Page 25: Whyand how Design UI

28.4歳

平均年齢

長老4人除外

27.7歳

PM 26%

Designer 35%

Engineer 39%

クリエイター系職種比率

メンバーの統計

経験豊富なメンバーは多くない

Page 26: Whyand how Design UI

UIデザインのスペシャリスト集団 ?

Page 27: Whyand how Design UI

UIデザインのスペシャリスト集団

目指してはいるがまだ途上

Page 28: Whyand how Design UI

UIデザインのスペシャリスト集団

お互いに補い合いながらデザイン

Page 29: Whyand how Design UI

どうやって実現しているのか?

Page 30: Whyand how Design UI

How

What

Why

なぜやるのか

価値観の共有• 職種問わず、デザインの力を信じている人だけを採用。 • 常にビジョンや「理由」を共有する。

Page 31: Whyand how Design UI

価値観だけでは質は高まらない。

Page 32: Whyand how Design UI

How

What

Why

どうやってやるのか

(Co-)Prototyping (ぷろとたいぴんぐ)• アイディアをリアルな評価ができる状態にして

チームで試しながらモノをつくっていくこと。 • それを当然だと思うマインドセット。

※公式の名称ではありません。

Page 33: Whyand how Design UI

課題チーム&前提 プロトタイピング デリバリー

!

チーム×プロトタイピング前提。 要件定義から開発完了までプロトタイピングし続ける。

デザインプロセス

※公式版作成中です。

Page 34: Whyand how Design UI

レビュー

レビュー

レビュー

プロトタイピング発見 → 仮説 → アウトプット を繰り返しながら常にレビューを入れていく。 コツ:制限時間をつくって未完成でもレビュー。

仮説に応じたプロトタイプ

Page 35: Whyand how Design UI

How

What

Why

何をするのか

レビュー・チーム内レビュー ・プロジェクトレビュー ・Role別MTGでのレビュー

Page 36: Whyand how Design UI

サンク コスト効果投資は無駄に したくない

IKEA効果がんばったから いいモノができた

確証 バイアス思ったとおり

の結果だ

内なる敵人は迷わずに行動するための仕組みを持っている。 影響範囲の大きさが個人の領域を大きく超える時、 自分が自分の敵になる。

Page 37: Whyand how Design UI

レビュー! レビュー! レビュー!

Page 38: Whyand how Design UI

チーム内レビューMTGチーム内では常にオープンなSlackチャンネルとProttプロジェクトで共有して、職種関係なく意見を出し合う。 チームメンバーだけではなく、社内の誰でも参加可能。

Page 39: Whyand how Design UI

プロジェクトレビューMTG毎週週明け午前中に開催。全プロジェクトを全社員で共有して、Goodpatchのデザインとしてレビューする。

Page 40: Whyand how Design UI

各Roleで気になっていることや発見を共有する。 Role担当者だけではなく、社内の誰でも参加可能。

Role別MTGでのレビュー

Page 41: Whyand how Design UI

(Co-)Prototyping (ぷろとたいぴんぐ)• アイディアをリアルな評価ができる状態にして

チームで試しながらモノをつくっていくこと。 • それを当然だと思うマインドセット。

※公式の名称ではありません。

?

+

Page 42: Whyand how Design UI

まとめ

Page 43: Whyand how Design UI

User ?

Interface

User / Interface / ?「User」だけではなく「?」を理解し、両サイドの間に入るべきリアルなInterfaceをデザインしよう。

Page 44: Whyand how Design UI

なぜUIをデザインするのか人の体験と行動を実際に生み出すのは、アイディアではなくモノだから。

ユーザーの 体験

UI

UI

事業 サービス システム

存続

ユーザーの 行動

Page 45: Whyand how Design UI

どうやってUIをデザインするのか• チームでデザインする。 • UIの目的を明確にした上で、可能なかぎり多くの

視点と回数で確かめる。

?

+

Page 46: Whyand how Design UI

偉大なチームをつくり

世界を前進させるモノをつくりましょう!

ユーザーの 体験

UI

UI

事業 サービス システム

存続

ユーザーの 行動

Page 47: Whyand how Design UI

ご静聴ありがとうございました。

Design your world!

Page 48: Whyand how Design UI

人々のハートを揺さぶるようなDesign&Productを生み出し、世界をより良い方向に前進させる

Engineer, Project Manager, Designerなど全職種募集してます!Wantedlyでポチッと!

チームメンバー募集中!

Page 49: Whyand how Design UI
Page 50: Whyand how Design UI

UX Design どんな体験をしてもらうかを計画し、その体験が量産・再生産される仕組みをつくること

Page 51: Whyand how Design UI

User Interface Smartphone App

自分の個性に 合っているかどうか

感覚的に魅力がある・よりパーソナル

・ストアで競合の中から選択

目的を 果たせるかどうか

コア機能>>>その他の機能画面に入る情報の制約

↓ 要件のフォーカス

コンテクスト上で 使いやすいかどうか

視認性/操作性の確保 移動時に小さい画面で見る