storytelling ux tokyo-en

Download Storytelling ux tokyo-en

Post on 30-Jun-2015




0 download

Embed Size (px)


  • 1. Storytelling for UXDDesigning UX by Experience plotting Yoshinori Wakizaka @UX Tokyo 3rd Jan 2013

2. IntroductionYoshinori WakizakaCurrentUI/UX specialist, Mobile Strategy SectionPastUsability Engineer, Mobile phone R&DUCD Specialist, Design departmentMember of UX TOKYO yoshinori wakizaka @wackiesrock 3. OverviewUX Tokyo has been conducting many storytellingworkshop during 2012 in Japan.Walkthrough full of step for crafting UX story at theworkshop.Invent Experience plotting to generate a plot of story.Trying to utilize storytelling approach for generatingdesign idea also.Experience plotting: a method to create a plot of UX storyGenerating design ideasCrafting UX StoryTelling UX Story 4. Storytelling workshop by UX Tokyo Storytelling for User Experience Japanese edition has issued Dec 2011. UX Tokyo has had presentation in seminar and conducted storytelling workshops.2012/2 2012/2 2012/52012/6 2012/92012/10 2012/11Dev LoveWorld IA DayInfo design Design Info design HCD-netWeb UX 2012/12 ForumForumAssociationJapanese Edition2012SeminarWorkshop 2012/12 2012/1 2012/22012/4 2012/82012/11 Web UX Chiba HCD-net Dev LOVEUX NagoyaUX NagoyaInstitute of tech & UX Osaka & UX Kyoto 5. How to utilize UX story for designing 6. How to utilize UX story for designing Visualize UX by crafting UX story 7. 3 steps to craft UX stories3 steps to craft UX story. CollectingSelecting CraftingStories StoriesStories Context Image Context Context Image Image ImageUX 8. Collecting StoriesStories start from listening. Investigate into log Hearing / Observation(Quantitative)(Qualitative) Search queries Hearing from; Server log - Users Online forum/ community - Business stakeholders Record of customer service Consumer survey in marketing dept. - Colleagues Log in usability testing Observation 9. Selecting Juicy StoriesSelect juicy stories from ingredients.Ingredients SelectionStory board AnecdotesImagesUX StoryP5 - Context Persona ISP ESPN Travelocity and Expedia YouTube WebMDSportsAuthorityESPN Youtube 10. Crafting StoryCraft story by weaving the ingredients of the story. AnecdotesAnecdotesAnecdotesAnecdotes Elements Context Image Point of viewContextCharacterImages diction (Persona) Structure 11. How to utilize UX story for designingDesigning UX by using UX story 12. Steps for creating design ideaCreating design idea while crafting stories.Ideation GeneratingCollectingSelectingCrafting &Iteration Stories StoriesStory Applying Design ideaContextImage ContextUX Context Image Image Image 13. Crafting storiesCreate design idea on the way of crafting UX story.AnecdotesStructure ContextContext of useImages for the design Anecdotes Scenario for design idea1. Craft UX story of the beginning. The story can be a set of 2. Generating design idea based on UXcontext of use, user insight or user scenario.story. The idea will be part of the story. 14. Experience PlottingA proposal of framework for creating UX story 15. Proposal of Experience PlottingA semi-structured method to design a plot (skelton) ofUX story.Plot ingredients of the story collected by survey/research onto story structure.Put context of use and images as well as anecdote ontothe plot.Creator can add ad-hoc story elements if need moreelements.Flexibility; Can be applied to both of crafting UX story orgenerating design idea with UX story. 16. Experience plottingStoryteller can craft the plot (skeleton) by plottingingredients onto story structure.Preparing story structure and framework beforecrafting UX story, storyteller can craft a quality assuredstory effectively.ContextContextImageAnecdotesAnecdotesAnecdotesStoryStructureScene A Scene BScene DScene CScene E 17. Procedure of the method4 steps to create the plot for crafting UX stories. Anecdote Anecdote Anecdote elements Anecdoteelements elements AnecdoteelementsStructure Anecdote AnecdoteAnecdote Anecdote Add ad-hoc elements to the plot4 1 Collect anecdotes (fragments of stories) Plot anecdotes onto story structure3 2 Selecting anecdotes that collected at step1 AnecdoteAnecdote Anecdote AnecdoteAnecdoteStructure Anecdote AnecdoteAnecdoteAnecdote 18. Pattern A: Story Structure frameworkPlot story elements along with story structures (e.g. hero)contentsemotion activityEveryday World anecdotecontextcontentscontentsThe returnThe call to activity to the world Adventureactivityanecdoteanecdoteemotion emotioncontext contextThreshold contentsAchieving Initiationcontents activitythe goal and trials activityanecdoteanecdoteemotion emotioncontext context contents World of the Quest emotionactivity context anecdote 19. Handwriting used for workshop 20. Experience plot by using the frameworkinsight context Design idea anecdotescontents 21. Pattern B: UX matrix frameworkMore structured matrix to ll out story elements. The call to Initiation The returnPlot of the storyAdventure and trials Departures World of the Quest to the world Activity Activity Activity ActivityActivity ActivitySub Activity Sub ActivitySub Activity Sub ActivitySub Activity Sub ActivityActivitySub Activity Sub ActivitySub Activity Sub ActivitySub Activity Sub ActivitySub Activity Sub ActivitySub ActivityContextContext of useContext of use Context of useContext of use Context of useContext of useContentsContents ContentsContentsContentsContents ContentsEmotionEmotionsEmotions Emotions EmotionsEmotions EmotionsDeviceDevice touch-point Device touch-point Device touch-point Device touch-pointDevice touch-point Device touch-pointtouch point 22. Pattern B: UX matrix framework (example)Craft partial story and generate and plot design ideas.The call to Initiation The returnPlot of the story Adventure and trials DeparturesWorld of the Questto the worldPlan a schedule forsearch somethinglaunch app book somethingdo activitiesFinish activitiesnext monthcheck with friends launch PC search something book a plan go outside Reflect the activityActivitycheck my schedulevisit to websitesee informations check date/ place do an activity Plan next actions UX backgroundstoryDesign idea Design details, Context of use Commute CommuteCommuteContext or at officeor at office or home homeoutside outsideContentscontents user usescontents user uses contents user uses contents user usescontents user uses contents user usesEmotionrelax exiting want to get ASAPhard to find out :( Finally !! enjoy reflectionsDevicemobilemobilemobile mobilePC PCPCtouch point 23. SceneActivity Context of useEmotionContents Design idea WIreframeUX background storyDesign idea Design details, Context of use 24. SummaryUX story is output of user experience ow: Workshopparticipants can use storytelling approach for ensuring/empathizing UX in target users.UX story is trigger to generate design idea: Trying toutilize storytelling approach for generating design ideaand combined the idea with UX story.Experience plotting for crafting UX story: Usingexperience plotting enable participants to craft qualityassured UX story more efciently.Telling: Need to cultivate how to tell the UX story. 25. Appendix: Story to requirements 26. Defining UX requirementsBreak down UX story into activity as user requirements. UX story Task step Task stepTask step Task stepactivityactivity activityactivityactivityactivity activityactivityactivityactivity activityactivityactivityactivity activityactivityactivityactivity activity 27. Defining UX requirements (example)Each activity can be user requirements for a development UX storylaunch an appselect a feature reserve something do tasks launch an appcheck scheduleregister information conrm schedules show home screensearch something register something conrm somethinglog in to system select datedo payment do somethingopen my pageselect place check reservation do somethingcheck updates add options check it at my pagesee somethingregister schedulescheck a venue 28. twitter@uxtokyofacebook uxtokyo 29. 30. UXUX Yoshinori Wakizaka @UX Tokyo 2nd Jan 2013 31. Introduction Yoshinori Wakizaka Current UX Specialist, mobile strategy section Past Usability Engineer in Mobile Device R&D UCD Specialist in Design department Member of UX TOKYOyoshinori wakizaka@wackiesrock 32. 201112UX TokyoStorytelling for User Experience2012UXUXUX: UX UX 33. UX Tokyo201112Storytelling for User Experience 2012/122012/2 2012/2 2012/5 2012/6 2012/9 2012/10 2012/11 Dev LoveWorld IA Day HCD-netWeb UX 2012SeminarWorkshop 2012/12 2012/1 2012/22012/42012/8 2012/11 Web UX HCD-net Dev LOVE UX Nagoya UX Nagoya & UX Osaka& UX Kyoto 34. UX 35. UXUX 36. UX Context ImageContextContext Image ImageImage UX 37. - / - - / 38. Anecdote Anecdote UX Anecdote 39. UXUX Anecdote AnecdoteAnecdote Context Image 40. UXUX 41. Ideation Generating Collecting SelectingCrafting &IterationStoriesStoriesStory Applying Design ideaContextImage ContextUX Context Image Image Image 42. 1. UX2. 43. UX 44. UX 45. UXUX ABD C E 46. 4 1 () 3 2 47. A: 48. 49. 50. B: UXUX 51. B: UX PC UX PCPC PC 52. UX 53. UXUXUXUXUX 54. : 55. UXUXUX story 56. UX ()UX 57. twitter @uxtokyo facebookuxtokyo (