O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Próximos SlideShares
Onlinepublicservice sd
Avançar
Transfira para ler offline e ver em ecrã inteiro.

35

Compartilhar

Baixar para ler offline

感情から読み解くデザインプロセス

Baixar para ler offline

2013/06/26(水) に開催した
スタートアップのデザイナー4人が語る、新しい価値を生み出すデザインプロセス
http://eventregist.com/e/SoDjxLSoKmRO
の登壇用スライドです。

スクーのウェブサイトを一例に、学生の「感情」を根拠としたデザインプロセスをひも解いていきます。

http://schoo.jp/

感情から読み解くデザインプロセス

  1. 1. 2013.6.26(⽔水)mixi本社 7F コラボルームスタートアップのデザイナー4⼈人が語る新しい価値を⽣生み出すデザインプロセス
  2. 2. ⾃自⼰己紹介経歴2009年年  ヤフー株式会社⼊入社        Yahoo!トラベルのビジュアル制作        Yahoo!ボックスのビジュアル/コーディング        Yahoo!メールのUI設計/ビジュアル/コーディングなど2012年年7⽉月  株式会社schoo⼊入社上⽻羽  智⽂文(うえばともふみ)趣味:⾳音楽とお菓⼦子作り/特技:⼀一⼈人カラオケhttps://www.facebook.com/thomweba
  3. 3. スクーでの仕事内容社 内 業 務 デ ザ イ ナ ー と し て上流流 機能定義コンセプト設計ワイヤーフレームデザインカンプコーディングJavaScriptJSテスト下流流 MVC組み込み・Illustrator・Photoshop・HTML/CSS/JS・PHP(MVCのV+C)主な仕事・仕様設計・デザイン部⾨門・グロースハック上流流 経営⽬目標KGI設定KPI策定仕様設計制作(デザイン)開発リリース・運⽤用下流流 データ取得・解析上流流 経営⽬目標KGI設定KPI策定仕様設計制作(デザイン)開発リリース・運⽤用下流流 データ取得・解析上流流 機能定義コンセプト設計ワイヤーフレームデザインカンプコーディングJavaScriptJSテスト下流流 MVC組み込み
  4. 4. schoo WEB-campusって?
  5. 5. WEBに誕⽣生した新しい学校のカタチ!学校授業試験/レポート友達/部活動/修学旅⾏行行/サークル/全国⼤大会/試合放課後の教室/運動場/プール/学部/学科/研究発表などなど…..
  6. 6. 本⽇日のお話本日はこの「校舎」を作るにあたって、どのようなデザインのプロセスを経たか。去年実施したリニューアルを事例に、(クイズを交えて)その失敗談と成功談の一部をお話したいと思います。
  7. 7. 本校舎Β版へのリニューアルΒ 版2 0 1 2 年年 4 ⽉月 時 点本 校 舎 Β 版2 0 1 2 年年 1 0 ⽉月 時 点●トップページ●授業のお知らせ●授業放送ページ  :動画+チャット+双⽅方向性
  8. 8. 従来のスクーのイメージ授業出席学⽣生たち先⽣生
  9. 9. みんなで作る学校のイメージ授業コミニケーシン出席先⽣生学⽣生たち
  10. 10. Q
  11. 11. QUIZこの時期に実装した次の3つの機能の中で、効果がなかったものはどれでしょうか?
  12. 12. 1.「みんなの声」【機能説明】授業前に学⽣生同⼠士がコミュニケーションをとれる掲⽰示板機能【設置場所】・各授業ページ
  13. 13. 2.「受けたいボタン」【機能説明】Facebookの「いいね」のような機能【設置場所】・授業の⼀一覧ページ・各授業ページ
  14. 14. 3.「現地表⽰示システム」【機能説明】授業中のチャットを、現地会場に映しだすツール【設置場所】・社内ツール
  15. 15. QUIZ:確認この時期に実装した次の3つの機能の中で、効果がなかったものはどれでしょうか?1.「みんなの声」2.「受けたいボタン」3.「現地表示システム」
  16. 16. 正解発表デザインはユーザーの行動で証明される→実際の結果から見ていきましょう
  17. 17. 3.「現地表⽰示システム」は成功回答質問数の増加先⽣生学⽣生・先⽣生への質問が圧倒的に増加・学⽣生の満⾜足度度も向上(毎授業後のアンケートより)
  18. 18. 2.「受けたいボタン」も成功質の向上注⽬目先⽣生学⽣生・授業の質の向上・学⽣生の満⾜足度度も向上(楽屋裏裏、毎授業後のアンケートより)
  19. 19. 1.「みんなの声」コミニケーシン・・?先⽣生学⽣生・投稿数が全く伸びなかった1.「みんなの声」は失敗…
  20. 20. 正解発表正解は1でした
  21. 21. なぜ「みんなの声」は不不発に?•  UIがよくないのでは?•  どんな内容を書き込めばいいのか伝わっていないのでは?•  授業を受けたいだけで、コメントすることなど求めていないのでは?•  誘導が張られていないからでは?などなど…
  22. 22. 微調整:サンプル⽂文⾔言を⼊入れてみる⽅方向性を提⽰示!
  23. 23. 微調整:投稿する内容を縛ってみる質問に特化した機能へ!
  24. 24. 施策の結果全く変化なし
  25. 25. ⽴立立ち返って考える「みんなで作る学校」を表現するため「みんなの声」の目的「他にも楽しみにしている学生がそこにいる」という感情を持ってもらうため
  26. 26. ⽴立立ち返って考える「みんなで作る学校」を表現するため「みんなの声」の目的「他にも楽しみにしている学生がそこにいる」という感情を持ってもらうため投稿の中⾝身よりも、投稿を出してもらうこと⾃自体が⼤大事!
  27. 27. 簡単になった問題投稿を促すために必要なものとは?<UI改修の例例>•  ページのファーストビューに持ってくる•  投稿ボタンを⼤大きくする•  トップページでみんなの投稿を⾒見見えるようにする•  ⾊色を変えて、もっと⽬目⽴立立たせるようにする•  などなど….
  28. 28. 簡単になった問題投稿を促すために必要なものとは?<UI改修の例例>•  ページのファーストビューに持ってくる•  投稿ボタンを⼤大きくする•  トップページでみんなの投稿を⾒見見えるようにする•  ⾊色を変えて、もっと⽬目⽴立立たせるようにする•  などなど….
  29. 29. 何を「デザインの根拠」とするかデザインの最初の⼀一歩は、何を作るかではなく、何を根拠として作るか。学⽣生の「感情」を根拠としてみました。例例)・データ・セオリー・ユーザー調査・流流⾏行行
  30. 30. 最も投稿したい瞬間はいつだろう?サイトを遷移してきた学生のモチベーションが一番高い瞬間。つまりは「スクーの授業面白そう!」と思っている瞬間を狙えば、何かしら投稿してくれそうです。モチベーションの高さココ!サイトのページ遷移
  31. 31. 最も投稿したい瞬間はいつだろう?サイトを遷移してきた学生のモチベーションが一番高い瞬間。つまりは「スクーの授業面白そう!」と思っている瞬間を狙えば、何かしら投稿してくれそうです。モチベーションの高さサイトのページ遷移=受けたいボタンを押した瞬間
  32. 32. 2.「受けたいボタン」【機能説明】Facebookの「いいね」のような機能【設置場所】・授業の⼀一覧ページ・各授業ページ
  33. 33. くっつけました
  34. 34. 2.「受けたいボタン」+「みんなの声」ボタンを押したらテキストボックスを表⽰示
  35. 35. 結果
  36. 36. 投稿数が急増機能リリース多い時は85件も!投稿数各授業
  37. 37. 授業への出席率率率も増加出席率(実際の出席者数/受けたいボタン数)機能リリース受けたいボタン数出席率率率100%200%0%例例)受けたいボタン=200⼈人、実際の出席数=100⼈人の場合、    出席率率率=50%例例)飲み会に誘われたときの「あの⼈人がいくなら私も⾏行行く」的な現象
  38. 38. 「みんなの声」が⽣生き返ったお互いが存在を確認しあう先⽣生学⽣生形を変える事で(デザインの⼒力力で)達成できた
  39. 39. 【おまけ】これって、どこかで⾒見見たような?
  40. 40. FACEBOOKのいいねモジュールと⼀一緒!?デザインの正解は同じところにたどり着く?
  41. 41. そして次の機能へと…授業のありかたを変えた新機能!次のヒット機能に活かせた(本⽇日は時間により割愛)
  42. 42. http://schoo.jp/全9職種採⽤用募集中です!ご清聴ありがとうございました。
  • TakaakiOno3

    Nov. 13, 2018
  • KeitaMizoguchi

    Jan. 18, 2018
  • kazuterutsumura

    Dec. 1, 2016
  • hashibakenn

    Apr. 11, 2015
  • TakahiroIshida

    Mar. 22, 2015
  • okyou

    Jul. 26, 2014
  • knife0125

    Apr. 14, 2014
  • mitsu32t

    Feb. 25, 2014
  • bislion

    Oct. 12, 2013
  • RyoWat

    Oct. 11, 2013
  • ideyuta

    Aug. 24, 2013
  • KentaroMajima

    Aug. 23, 2013
  • yuatetsu

    Jul. 22, 2013
  • maytant

    Jul. 10, 2013
  • niu4646

    Jul. 2, 2013
  • ssuser82d97a

    Jun. 30, 2013
  • ayumigibo

    Jun. 30, 2013
  • hoop34

    Jun. 30, 2013
  • yudainoguchi14

    Jun. 29, 2013
  • re_3_19

    Jun. 29, 2013

2013/06/26(水) に開催した スタートアップのデザイナー4人が語る、新しい価値を生み出すデザインプロセス http://eventregist.com/e/SoDjxLSoKmRO の登壇用スライドです。 スクーのウェブサイトを一例に、学生の「感情」を根拠としたデザインプロセスをひも解いていきます。 http://schoo.jp/

Vistos

Vistos totais

3.943

No Slideshare

0

De incorporações

0

Número de incorporações

38

Ações

Baixados

40

Compartilhados

0

Comentários

0

Curtir

35

×