Web Design in Cross-Channel Era


Published on

Here is the new design attitude for web designers in the cross-channel user experience era.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design in Cross-Channel Era

  1. 1. クロスチャネル時代のWebデザインCONCENT #concentinc長谷川 敦士, Ph.D. @ahaseg
  2. 2. 理解をデザインする人:インフォメーションアーキテクトInformation Architect
  3. 3. © Nathan Shedroffデータ 情報 知識 知恵
  4. 4. ユーザーコンテンツ コンテキスト利用者顧客情報機能目的制約
  5. 5. ユーザーコンテンツサービスつなぎかたIA = ♥
  6. 6. (すべての)Webデザイナー= IA
  7. 7. • WebデザイナーWebサイトを活用し、主にコミュニケーションの問題を解決するデザイナー
  8. 8. デザインって?無意識スタイル↑“機能+形状”↑問題解決↑問題の定義(フレーミング)↑
  9. 9. 問題解決プロセス情報アーキテクチャ設計のプロセスIA設計プロセスを構成する2つの軸と5つのステージAbstract抽象Analysis分析Synthesis統合Concrete具体反復SolutionsソリューションObservations観察FrameworksフレームワークImperatives方針「Research  Strategies  for  Future  Planning」,  『interactions』VolumeXVI.2,pp.63-‐‑‒66,  ColleenMurray
  10. 10. サービスデザイン:提供サービス、事業戦略略アクティビティデザイン:ユーザー体験インタラクションデザイン:個別タッチポイント
  11. 11. サービスデザイン:ビジネス価値と顧客の期待価値に基づくビジネスの再定義体験のコンセプト顧客ビジネス・期待価値・⾏行行動⽂文脈・提供価値・競合優位性
  12. 12. • いま、なにをデザインすべきなのか?
  13. 13. ユーザー体験(UX)UI/機能広告(認知)製品形状アフターケア
  14. 14. 体験の視覚化:Customer Journey Map
  15. 15. Customer  Journey  Map「経験」にまつわるストーリーを深く、豊かに表現する⽅方法by  Chris  Risdon  from  Adaptive  Path  @  IA  Summit  2012
  16. 16. レイアウト時系列列:基本 円環:タスク単位Touchpoint:サービス接点Experience:体験Phase:フェーズ Phase:フェーズTouchpoint:サービス接点Experience:体験
  17. 17. CJMの主な要素• ペルソナ・シナリオ・ユーザーゴール・ニーズ• フェーズ:注意、態度度、興味、ムード、etc.• ユーザー要素-‐‑‒ ⾏行行動:Behavior-‐‑‒ ⼼心理理状況:Think-‐‑‒ 感情要素:Feel• タッチポイント• サービス・システム要素• 経路路• 気づき・⽰示唆
  18. 18. Experience Maps:Understanding Cross-ChannelExperiences For Gamers
  19. 19. Starbucks Experience Map - Little Springs Design http://bit.ly/vlJoQ8
  20. 20. Experience Map for Rail Europe | August 2011STAGESDOINGFEELINGResearch & Planning Shopping Booking Post-Booking, Pre-Travel Travel Post TravelPeople choose rail travel because it isconvenient, easy, and flexible.Rail booking is only one part of people’s largertravel process.People build their travel plans over time. People value service that is respectful, effectiveand personable.EXPERIENCERail Europe Experience MapKayak,compareairfareGooglesearchesResearchhotelsTalk withfriendsRelevance of Rail EuropeEnjoyabilityHelpfulness of Rail EuropePaper ticketsarrive in mail• I’m excited to go to Europe!• Will I be able to see everything I can?• What if I can’t afford this?• I don’t want to make the wrong choice.• It’s hard to trust Trip Advisor. Everyone isso negative.• Keeping track of all the different productsis confusing.• Am I sure this is the trip I want to take?• Website experience is easy and friendly!• Frustrated to not know sooner about whichtickets are eTickets and which are paper tickets.Not sure my tickets will arrive in time.• Stressed that I’m about to leave the countryand Rail Europe won’t answer the phone.• Frustrated that Rail Europe won’t ship ticketsto Europe.• Happy to receive my tickets in the mail!• I am feeling vulnerable to be in an unknown place inthe middle of the night.• Stressed that the train won’t arrive on time for myconnection.• Meeting people who want to show us around is fun,serendipitous, and special.• Excited to share my vacation story withmy friends.• A bit annoyed to be dealing with ticket refundissues when I just got home.ViewmapsArrangetravelBlogs &Travel sitesPlan withinteractive mapReview faresSelect pass(es)Enter trips ConfirmitineraryDeliveryoptionsPaymentoptionsReview &confirmMap itinerary(finding pass)DestinationpagesMay call ifdifficultiesoccurE-ticket Printat StationWebraileurope.comWait for paper tickets to arriveResearch destinations, routes and productsLive chat forquestionsActivities, unexpected changesChangeplansCheck ticketstatusPrint e-ticketsat homeweb/appsLook uptimetablesPlan/confirmactivitiesWebSharephotosShareexperience(reviews)RequestrefundsFollow-up on refunds for booking changesShare experienceBuy additionalticketsLook uptime tablesStakeholder interviewsCognitive walkthroughsCustomer Experience SurveyExisting Rail Europe DocumentationOpportunitiesGuiding PrinciplesCustomer JourneyInformationsourcesRAIL EUROPETHINKING• What is the easiest way to get around Europe?• Where do I want to go?• How much time should I/we spend in eachplace for site seeing and activities?• I want to get the best price, but I’m willing to pay alittle more for first class.• How much will my whole trip cost me? What are mytrade-offs?• Are there other activities I can add to my plan?• Do I have all the tickets, passes and reservationsI need in this booking so I don’t pay moreshipping?• Rail Europe is not answering the phone. Howelse can I get my question answered?• Do I have everything I need?• Rail Europe website was easy and friendly, butwhen an issue came up, I couldn’t get help.• What will I do if my tickets don’t arrive in time?• I just figured we could grab a train but there arenot more trains. What can we do now?• Am I on the right train? If not, what next?• I want to make more travel plans. How do Ido that?• Trying to return ticket I was not able to use. Notsure if I’ll get a refund or not.• People are going to love these photos!• Next time, we will explore routes and availabilitymore carefully.Ongoing,non-linearLinearprocessNon-linear, buttime basedCommunicate a clear valueproposition.STAGE: Initial visitConnect planning, shopping andbooking on the web.STAGES: Planning, Shopping, BookingArm customers with informationfor making decisions.STAGES: Shopping, BookingImprove the paper ticketexperience.STAGES: Post-Booking, Travel, Post-TravelMake your customers into better,more savvy travelers.STAGES: GlobalProactively help people dealwith change.STAGES: Post-Booking, TravelingSupport people in creating theirown solutions.STAGES: GlobalVisualize the trip for planningand booking.STAGES: Planning, ShoppingEnable people to plan over time.STAGES: Planning, ShoppingEngage in social media withexplicit purposes.STAGES: GlobalCommunicate status clearly atall times.STAGES: Post-Booking, Post TravelAccommodate planning andbooking in Europe too.STAGE: TravelingAggregate shipping with areasonable timeline.STAGE: BookingHelp people get the help theyneed.STAGES: GlobalGLOBAL PLANNING, SHOPPING, BOOKING POST-BOOK, TRAVEL, POST-TRAVELRelevance of Rail EuropeEnjoyabilityHelpfulness of Rail EuropeRelevance of Rail EuropeEnjoyabilityHelpfulness of Rail EuropeRelevance of Rail EuropeEnjoyabilityHelpfulness of Rail EuropeRelevance of Rail EuropeEnjoyabilityHelpfulness of Rail EuropeRelevance of Rail EuropeEnjoyabilityHelpfulness of Rail EuropeMail ticketsfor refundGet stampfor refund
  21. 21. AS-IS現状TO-BEプランInside-outサービス視点サービス現状分析サービス拡張Cross  ChannelOutside-in顧客視点ユーザー⾏行行動分析新サービス企画Cross  Serviceカスタマージャーニーマップの種類
  22. 22. PointTouchpoint≠  Channel
  23. 23. Touchpoint:• 特定のユーザーニーズに対応した、特定の場所と時間に紐紐付く、インタラクションするためのポイントChannel:• ユーザー(カスタマ)がインタラクションするメディアby  Chris  Risdon  from  Adaptive  Path  @  IA  Summit  2012
  24. 24. Google  GmailTouchpoint:• コンピュータの認証Channel:• Web• スマートフォン  or  電話  or  Emailby  Chris  Risdon  from  Adaptive  Path  @  IA  Summit  2012
  25. 25. ホームプラス  バーチャルショップ(韓国)Touchpoint:• ⾷食料料品の購⼊入Channel:• 駅ホーム• 携帯電話by  Chris  Risdon  from  Adaptive  Path  @  IA  Summit  2012http://www.honpo21.net/archives/341
  26. 26. • ⽂文脈+⽂文化に合わせる• ニーズ/必要な機能に関連づける• 重要性/⽬目的に合わせた意味性• さり気なさ/遊び/楽しさによる好感• 利利⽤用可能/連続的な体験のつながりTouchpointby  Chris  Risdon  from  Adaptive  Path  @  IA  Summit  2012
  27. 27. 1. 調査・分析に基づくプラニング2. タッチポイントの組み合わせによる経験3. チームを巻き込む4. アクションを引き起こすTouchpointby  Chris  Risdon  from  Adaptive  Path  @  IA  Summit  2012
  28. 28. Cross  ChannelDesign
  29. 29. 「旅行」という体験
  30. 30. 出発前∼旅行中∼旅行後タイミングごとに、必要となる情報/利利⽤用するサービスはなにか
  31. 31. 旅⾏行行前 旅⾏行行中 旅⾏行行後航空会社Cross  Chanelクロスチャンネル
  32. 32. Multi  to  CrossサービスPC モバイル 店舗“マルチ”チャンネルサービスPC モバイル 店舗“クロス”チャンネル+ +
  33. 33. Pocket(Read  it  Later)PCiPhoneiPadsource: Read it Laterhttp://bit.ly/rSLU68帰宅宅後早朝出勤帰宅宅就寝前就寝前デバイスが持つ利利⽤用⽂文脈
  34. 34. 個々のサイトでの考慮(ヒューリスティック)•場所性:Place-‐‑‒making•⼀一貫性:Consistency•弾性、復復元⼒力力:Resilience•縮約性:Reduction•相関性:Correlation
  35. 35. 旅⾏行行前 旅⾏行行中 旅⾏行行後フライト確認/予約フライトチェックインNEX確認ホテル予約ホテル経路路確認レストラン探索索アルバム作成写真シェアCross  Serviceクロスサービス
  36. 36. Atsushi  HASEGAWA  <ahaseg@gmail.com>eTicket  Itinerary  and  Receipt  for  Confirmation  GCEWWWUnited  Airlines,  Inc.  <unitedairlines@united.com> Sat,  Mar  10,  2012  at  11:06  PMTo:  AHASEG@gmail.comConfirmation:GCEWWWCheck-­In  >Issue  Date:  March  10,  2012Traveler eTicket  Number Frequent  Flyer SeatsHASEGAWA/ATSUSHIMR 0162320667315 UA-­EGT4XXXX  Premier  Silver  /  *S 30H/12D/-­-­-­/-­-­-­FLIGHT  INFORMATIONDay,  Date Flight ClassDeparture  City  and  Time Arrival  City  and  Time Aircraft MealWed,  21MAR12 UA8041S TOKYO,  JAPAN  (NRT  -­  NARITA)  4:30  PMWASHINGTON,  DC  (IAD  -­  DULLES)  3:51  PM777-­200DinnerWed,  21MAR12 UA2632S WASHINGTON,  DC  (IAD  -­  DULLES)  5:05  PMNEW  ORLEANS,  LA  (MSY)  6:47  PMA-­319 PurchaseMon,  26MAR12 UA4973S NEW  ORLEANS,  LA  (MSY)  6:01  AMSAN  FRANCISCO,  CA  (SFO)  9:00  AMA-­320 PurchaseMon,  26MAR12 UA8374S SAN  FRANCISCO,  CA  (SFO)  11:01  AMTOKYO,  JAPAN  (NRT  -­  NARITA)  2:00  PM  (27MAR)747-­400Lunch1  Flight  operated  by  UNITED  AIRLINES.2  Flight  operated  by  UNITED  AIRLINES.3  Flight  operated  by  UNITED  AIRLINES.4  Flight  operated  by  UNITED  AIRLINES.FARE  INFORMATIONFare  BreakdownAirfare: 77,400JPYJapan  Passenger  Security  ServiceCharge:500Japan  Passenger  ServiceFacilities  Charge:2,040Fuel  Surcharge: 50,000September  11th  Security  Fee: 630U.S.  Federal  Transportation  Tax: 2,760U.S.  APHIS  User  Fee: 420U.S.  Immigration  User  Fee: 580U.S.  Customs  User  Fee: 460U.S.  Passenger  Facility  Charge: 380Per  Person  Total: 135,170JPYeTicket  Total: 135,170JPYForm  of  Payment:AMERICAN  EXPRESSLast  Four  Digits  5303The  airfare  you  paid  on  this  itinerary  totals:  77,400  JPYThe  taxes,  fees,  and  surcharges  paid  total:  57,770  JPYFare  Rules: Additional  charges  may  apply  for  changes  in  addition  to  any  fare  rules  listed.REFUNDABLE/CXL  FEEInternational  eTicket  RemindersCheck-­in  Requirement  -­  Bags  must  be  checked  and  boarding  passes  obtained  at  least  60  minutes  prior  toscheduled  departure.  Baggage  will  not  be  accepted  and  advance  seat  assignments  may  be  canceled  if  thiscondition  is  not  met.Boarding  Requirement  -­  Passengers  must  be  prepared  to  board  at  the  departure  gate  with  their  boarding12/11/30 Gmail -‐‑ Hyatt Regency New Orleans -‐‑ Confirmation -‐‑ ATSUSHI HASEGAWA -‐‑ 3/21/2012 -‐‑ 17580811/3https://mail.google.com/mail/u/0/?ui=2&ik=9938667deb&view=pt&q=hyatt regency&qs=true&search…Naoko  KAWACHI  <naoko.kawachi@gmail.com>Hyatt  Regency  New  Orleans  -­  Confirmation  -­  ATSUSHI  HASEGAWA  -­3/21/2012  -­  1758081Hyatt  Regency  New  Orleans  <Concierge@hyatte-­concierge.com> Thu,  Mar  8,  2012  at  1:51  AMTo:  NAOKO.KAWACHI@gmail.com     Hyatt  E-­Concierge  |  Customer  Service  |  Hotel  Website  |  Print  E-­Mail  |  View  Online     RESERVATION  CONFIRMATION        CONFIRMATION  NUMBER:  1758081CHECK-­IN  DATE:  Wednesday,  March  21,  2012HOTEL  CHECK-­IN  TIME:  3:00  PMCHECK-­OUT  DATE:  Sunday,  March  25,  2012HOTEL  CHECK-­OUT  TIME:  11:00  AMHyatt  Regency  New  OrleansPoydras  At  Loyola  AvenueNew  Orleans,  LA  70113  USTel:  504-­561-­1234  Fax:  504-­587-­4141    ATSUSHI  HASEGAWA,Greetings  from  Hyatt  Regency  New  Orleans,Thank  you  for  your  reservation.  We  look  forward  to  welcoming  you  to  our  hotel.To  make  changes  to  your  reservation  please  click  here  or  email  us  as  at  reservations@hyatt.com.  Tospeak  with  us  directly,  please  call  1  877  827  1356  within  the  U.S.  and  Canada  or  simply  contact  yourlocal  worldwide  reservation  center.We  are  excited  about  your  upcoming  visit  and  look  forward  to  creating  a  memorable  experience  for  you.Warmest  Regards,Hyatt  Regency  New  Orleans  Team
  37. 37. 旅⾏行行前 旅⾏行行中 旅⾏行行後フライト確認/予約フライトチェックインNEX確認ホテル予約ホテル経路路確認レストラン探索索アルバム作成写真シェアデバイス/サービスをまたがった、旅行に関する情報のオーガナイズサポート→ TripIt
  38. 38. クロスチャンネル• 企業・サービス観点• 提供サービスの最適な提供⽅方法のプラニング例例:-‐‑‒  航空会社のサービス-‐‑‒  Amazon  Kindle  Whisper  Sync-‐‑‒  Read  it  laterクロスサービス• ユーザー観点→  企業/サービス横断• 新しい提供価値のチャンス→  メタサービス例例:-‐‑‒  TripIt-‐‑‒  レシピ  to  Evernote-‐‑‒  Indeed
  39. 39. CONCENT,inc New Logotype Desing by Shintaro Kobayashiロゴタイプコンセプト新しさを感じさせながら、10 年後に古く感じさせない デザインを目指しました。角を少し丸める事で、有機的で親しみやすい雰囲気を出しつつも、文字の骨格はあくまでもニュートラルに設計することで、奇をてらわない 現代らしさを表現しています。また、右への傾きには、これから先、ますます加速していくだろう世の中の変化に、WEB(コンセント)と紙(アレフ・ゼロ)のハイブリットにより対応し、絶えず前進していこう、という意志を込めました。ロゴマークコンセプトロゴタイプの右肩に付いているマーク。丸の中の二本の棒は、良く見れば右が少し短く、左が少し長い。これはコンセントです。わかりづらいです。しかし、この丸には可能性があります。WEB ではボタンになるかもしれません。紙ではハンコになって押されるかもしれません。そうして様々なかたちで使用していくと、いずれこのマークだけでCONCENT と読めるようになる。そんな存在になってくれることを望んでいます。concentinc.jp/THANKS!Twitter @ahasegFacebook facebook.com/ahaseg