Search & Destroy

DaFED#53
Speaker: Mario Šestak

Discovery is a DNA of every project—commercial or self-initiated. I will share some personal insights how research plays a huge role of every project  and how to use discovery to steer project in the right directions.

Transcript

1. SEARCH AND DESTROY Dafed / Novi Sad March / 2019 Mario Šestak — Head of Design / Bornfight
2. HELLO! Dafed / 2019 Mario Šestak — Head of Design / Bornfight
3. MARIO Dafed / 2019 Head of Design / Bornfight
19. STRATEGY DESIGN DEVELOPMENT DigitaLabin / 2018 Mario Šestak — Head of Design / Bornfight
20. STRATEGY DESIGN DEVELOPMENT DigitaLabin / 2018 Mario Šestak — Head of Design / Bornfight
21. STRATEGY DESIGN DEVELOPMENT DigitaLabin / 2018 Mario Šestak — Head of Design / Bornfight
22. Mario Šestak — Head of Design / Bornfight 60 PEOPLE Dafed / 2019 Mario Šestak — Head of Design / Bornfight
46. www.bornfight.com
49. SEARCH AND DESTROY Mario Šestak — Head of Design / Bornfight Dafed / 2019
50. Dafed / 2019 Mario Šestak — Head of Design / Bornfight STORY OF A PROJECT
51. Dafed / 2019 Mario Šestak — Head of Design / Bornfight Ovom interfaceu fali malo UX-a da bude bolji. —Klijent 01 “
52. Dafed / 2019 Mario Šestak — Head of Design / Bornfight Sviđa nam se što ste napravili za xyz klijenta, mi bi tako isto, ali malo drugačije za svoju aplikaciju / proizvod. —Klijent 02 “
53. Dafed / 2019 Mario Šestak — Head of Design / Bornfight Treba nam pomoć, trebalo bi poboljšati UX-a aplikacije. —Klijent 03 “
54. INPUT Treba nam pomoć oko UX-a aplikacije “ Dafed / 2019 Mario Šestak — Head of Design / Bornfight
55. INPUT • strukture • navigacije • upotrebljivosti • interaction designa Treba nam pomoć oko… ZNAČENJE Treba nam pomoć oko UX-a aplikacije “ “ Dafed / 2019 Mario Šestak — Head of Design / Bornfight
56. Treba nam pomoć oko UX-a aplikacije” —Klijent • Clear structure and navigation flows • Compelling and clear visual design • Great copy and tone of voice • Thoughtful transitions and animations • The app’s performance and speed • The user’s mobile phone performance and speed • The user’s internet connection • The product making sense to that user • The product adding value to what that user needs • A clear understanding by the user of what the product does • How accessible the product is • The user’s social, cultural and demographic context • Where the user is at the time they engage with the app • Everything the user has seen in their entire life Dafed / 2019
57. • Clear structure and navigation flows • Compelling and clear visual design • Great copy and tone of voice • Thoughtful transitions and animations • The app’s performance and speed • The user’s mobile phone performance and speed • The user’s internet connection • The product making sense to that user • The product adding value to what that user needs • A clear understanding by the user of what the product does • How accessible the product is • The user’s social, cultural and demographic context • Where the user is at the time they engage with the app • Everything the user has seen in their entire life Treba nam pomoć oko UX-a aplikacije Treba nam pomoć oko…
58. POTREBE POSLOVANJA DESIGN / UX POTREBE KORISNIKA Dafed / 2019 Mario Šestak — Head of Design / Bornfight
59. DISCOVERY Dafed / 2019 Mario Šestak — Head of Design / Bornfight
60. Dafed / 2019 Mario Šestak — Head of Design / Bornfight Discovery—The process of finding information, acquiring knowledge that informs design decisions. “
61. Dafed / 2019 Mario Šestak — Head of Design / Bornfight WHAT DO WE DISCOVER? 1. Problem 2. Objective / Goal 3. Context 4. Idea / Concept 5. Principles / process guidelines
62. Dafed / 2019 Mario Šestak — Head of Design / Bornfight WHAT DO WE DISCOVER? PROBLEM UNDERSTANDING SOLUTION EXPLORATION 01 02
63. RESEARCH? Dafed / 2019 Mario Šestak — Head of Design / Bornfight DISCOVERY METHOD
64. Dafed / 2019 Mario Šestak — Head of Design / Bornfight DISCOVERY—OTHER METHODS 1. Research 2. Benchmark Analysis 3. Industry Study 4. Data Analysis 5. Competitors Comparison 6. Discovery Workshops 7. Design Sprints 8. User interviews …
65. Dafed / 2019 Mario Šestak — Head of Design / Bornfight EASY EASY HARD FIRST IDEA EXECUTION
66. Dafed / 2019 Mario Šestak — Head of Design / Bornfight DESIGN SOFT SKILLS DESIGN HARD SKILLS 01 02
67. Dafed / 2019 Mario Šestak — Head of Design / Bornfight DESIGN SOFT SKILLS 01
68. POTREBE POSLOVANJA POTREBE KORISNIKA Dafed / 2019 Mario Šestak — Head of Design / Bornfight
69. Dafed / 2019 Mario Šestak — Head of Design / Bornfight DISCOVERY METHODS
70. Dafed / 2019 Mario Šestak — Head of Design / Bornfight METODE - POSLOVNE POTREBE 1. Analiza konkurencije 2. Analiza podataka 3. Razgovor s ljudima 4. Radionice …
71. Discovery workshop is an in-depth analysis which is the part of the definition and planning phase of a project and which has clear outputs that can serve as a blueprint. Dafed / 2019 Mario Šestak — Head of Design / Bornfight Discovery Workshop
72. Client Workshop
73. Dafed / 2019 Mario Šestak — Head of Design / Bornfight DISCOVERY PROBLEM UNDERSTANDING BUSINESS UNDERSTANDING 01 02
74. DISCOVERY OUTPUTS Dafed / 2019 Mario Šestak — Head of Design / Bornfight
75. Dafed / 2019 Mario Šestak — Head of Design / Bornfight METODE - POSLOVNE POTREBE 1. Goals 2. Motivation 3. Validated assumptions 4. Opportunities 5. Vision of success …
76. It’s collaborative activity. Document your discoveries. —Smart person Dafed / 2019 “
77. Dafed / 2019 Mario Šestak — Head of Design / Bornfight
78. POTREBE POSLOVANJA POTREBE KORISNIKA Dafed / 2019 Mario Šestak — Head of Design / Bornfight
79. Dafed / 2019 Mario Šestak — Head of Design / Bornfight DISCOVERY METHODS
80. Dafed / 2019 Mario Šestak — Head of Design / Bornfight METODE - POSLOVNE POTREBE 1. Field research 2. Focus groups 3. Usability testing 4. Feedback 5. User journey 6. User stories 7. Personas …
85. DISCOVERY OUTPUTS Dafed / 2019 Mario Šestak — Head of Design / Bornfight
86. Dafed / 2019 Mario Šestak — Head of Design / Bornfight METODE - KORISNIČKE POTREBE 1. Behavior and context 2. Motivations 3. Frustrations 4. User goals and needs …
87. Dafed / 2019 Mario Šestak — Head of Design / Bornfight POTREBE POSLOVANJA POTREBE KORISNIKA THEY GO SIMUL TANEITY
88. PROJECT WITHOUT DISCOVERY? Dafed / 2019 Mario Šestak — Head of Design / Bornfight
89. Mario Šestak — Head of Design / Bornfight ME PROBLEMS PILLING IN Dafed / 2019
90. THERE IS ALWAYS SOME KING OF DISCOVERY Dafed / 2019 Mario Šestak — Head of Design / Bornfight
91. Dafed / 2019 Mario Šestak — Head of Design / Bornfight
92. USER INTERVIEWS FIELD RESEARCH WIREFRAMES USABILITY TESTING RAPID PROTOTYPING USER FLOWS STAKEHOLDERS INTERVIEWS DATA ANALYSIS COMPETITORS COMPARISON BENCHMARK ANALYSIS USER JOURNEY
93. IT DEPENDS… Dafed / 2019 Mario Šestak — Head of Design / Bornfight
94. USER INTERVIEWS FIELD RESEARCH WIREFRAMES USABILITY TESTING RAPID PROTOTYPING USER FLOWS STAKEHOLDERS INTERVIEWS DATA ANALYSIS COMPETITORS COMPARISON BENCHMARK ANALYSIS USER JOURNEY
95. Dafed / 2019 Mario Šestak — Head of Design / Bornfight IT DEPENDS… 1. Project type 2. Type of problem 3. Budget 4. Time frame 5. Persononal or team experience …
96. USER INTERVIEWS FIELD RESEARCH WIREFRAMES USABILITY TESTING RAPID PROTOTYPING USER FLOWS STAKEHOLDERS INTERVIEWS DATA ANALYSIS COMPETITORS COMPARISON BENCHMARK ANALYSIS USER JOURNEY
97. USER INTERVIEWS FIELD RESEARCH WIREFRAMES USABILITY TESTING RAPID PROTOTYPING USER FLOWS STAKEHOLDERS INTERVIEWS DATA ANALYSIS COMPETITORS COMPARISON BENCHMARK ANALYSIS USER JOURNEY
98. Dafed / 2019 Mario Šestak — Head of Design / Bornfight DESIGN HARD SKILLS 02
99. You Information RESEARCH Dafed / 2019 Mario Šestak — Head of Design / Bornfight
100. Dafed / 2019 Mario Šestak — Head of Design / Bornfight Research is creating new knowledge Neil Amstrong “
101. Continuous / Active 01 Dafed / 2019 Mario Šestak — Head of Design / Bornfight
102. Continuous / Active 01 Ad-Hoc 02 Dafed / 2019 Mario Šestak — Head of Design / Bornfight
103. Typography Grids Layouts Content Copy Continuous / Active 01 Ad-Hoc 02 X Dafed / 2019 Mario Šestak — Head of Design / Bornfight
104. More time Continuous / Active 01 Ad-Hoc 02 X Less time Typography Grids Layouts Content Copy Dafed / 2019 Mario Šestak — Head of Design / Bornfight
105. RESEARCH IN DIGITAL ENVIROMENT Dafed / 2019 Mario Šestak — Head of Design / Bornfight
106. Context Website type Visual Dafed / 2019 Mario Šestak — Head of Design / Bornfight
107. Context /ecommerce websites https://ecomm.design/
108. Context /ecommerce website elements: Product page Search Checkout … Dafed / 2019 Mario Šestak — Head of Design / Bornfight
109. Context /ecommerce website elements: Product page Search Checkout … Dafed / 2019
110. Context /ecommerce website elements: Product page Search Checkout … Dafed / 2019
113. Context /ecommerce website elements: Product page Search Checkout … Dafed / 2019
114. Website elements
115. Website elements
116. Website elements
117. Website elements Dafed / 2019 Mario Šestak — Head of Design / Bornfight
118. Website elements Dafed / 2019 Mario Šestak — Head of Design / Bornfight
119. Grid Dafed / 2019
120. Grid Dafed / 2019
122. Typography scale swiss.com H1 32 / 37 H2 24 / 29 H3 20 / 22 p 14 / 21 12 / 18 CH SANS" CH SANS" CH SANS ARIAL ARIAL Dafed / 2019 Mario Šestak — Head of Design / Bornfight
123. Dafed / 2019 Mario Šestak — Head of Design / Bornfight INFORMATION GATHERING
124. ORGANIZE Dafed / 2019 Mario Šestak — Head of Design / Bornfight
125. ORGANIZE ORGANIZE Dafed / 2019 Mario Šestak — Head of Design / Bornfight
126. ORGANIZE ORGANIZE ORGANIZE Dafed / 2019 Mario Šestak — Head of Design / Bornfight
127. Brandoctor inspiracija! Generalno fotke - fotografije ureda, radna atmosfera, design oriented! http://www.rebrand.com/hallo#ame! https://www.behance.net/gallery/34350345/Portfolio-proposal?utm_medium=email&utm_source=transactional&utm_campaign=project-published"- design layout typo! http://heliom.ca/blog/posts/studio-update-march-2015" - blog post! http://studiosouth.co.nz/"- grid! http://studiosouth.co.nz/profile" - who we are / approach! http://www.designoftheworld.com/re-turned/"- you might also like na dnu / share article social icons! http://www.instrument.com/work/stumptown"- case study! http://www.instrument.com/studio/"- about us fotke! http://www.georgeandharrison.nl/projecten/spaces-at-ease/"- full width grid! http://paprika.com/"- animacija header pa na ni$e! http://brightbyte.co.uk/logos-of-the-week-5/"- grid %irina! http://snohetta.com/projects#4"- grid layout! https://deuxhuithuit.com/en/"- tranzicija, font (apercu reg), grid layout! http://www.akqa.com/work/audi/audi-usa/"- case structure! http://generationpress.co.uk/services/duplexing/"- layout! http://generationpress.co.uk/about/"- about us header ideja sa overlayem, mozda za homepage! http://studiomoniker.com/about/"- font (akzidenz grotesk next)! http://redantler.com/blog/allsetwithboxed"- font (sailec)! http://heybaby.tv/directors/darren-statman/bentley/"- directors link (modal window)! http://www.placemeter.com/platform"- font (post grotesk)! http://www.wol#olins.com/views/133330523553/health-warning-innovating-without-empathy-can-be-lethal"- font (akkurat)! http://oslodesignfair.com/"- tranzicija na klik i load nove stranice! http://bielkeyang.com/projects/holzweiler-agency/"- footer! http://www.putput.dk/profile"- header efekt na skrol"! http://pierre.graphics/"- grid layout! http://www.forbrands.pl/projects/ideo/"- load animacija! http://charactersf.com/projects/adobe-ink-slide"- footer! http://joshsender.com/#"- about page fotke gif! http://www.akqa.com/work/"- hover efekt! http://landor.com/work/central-park-conservancy"- related content iznad footera! http://snask.com/"- homepage feed! http://lesdeuxmondes.com/"- font larsseit! http://www.julienrenvoye.fr/"- animacija load! http://www.lemuriastyle.com/en/contacts-section"- newsletter! http://crane-brothers.com/dispatch/2015/12/new-website/ - slider paginacija! https://northernlighting.no/"typo struktura! http://www.shewasonly.co.uk/profile/"- typo! http://www.oursroux.com/project/pulse"- hoover u footeru! https://weareshellshock.com/case-study/anti-sports-league/ - case study struktura! http://www.smartmatter.com/"- grid layout! http://www.mikebloomberg.com/"- load tranzicija i dolazak pagea na stage! https://www.editionpatrickfrey.com/en/books/rendering-eye-urban-america-revisited-regula-bochsler-philipp-sarasin"- layout! http://sutromanagement.com - footer velicina s bg fotkom! http://photomap.chris-wang.com/"-linkovi! http://kuroiandco.com/profile/"- grid typo layout! Website type /BRANDOCTOR INSPIRACIJA Dafed / 2019 Mario Šestak — Head of Design / Bornfight
128. http://www.whatwatch.com/! https://aarkcollective.com/products/shell-white! https://momentlens.co/shop/tele-lens/#tele-lens! http://www.cantorfineart.com/story/please-touch-the-art/ " - fotke zum efekt na click (show!!!)! https://www.tenslife.com/?ref=ecommdesign " - komunikacija + CTAs! http://www.gitman.com/ - popup sign up! https://www.ayr.com/?ref=ecommdesign " - layout! https://kotn.com/collections/all - grid! https://lestrangelondon.com/store/sweatshirts/cross-collar-sweatshirt/? attribute_pa_colour=navy&attribute_pa_size=m "! - navigacija na skrol i product page! https://lestrangelondon.com/brand-profile/ruben-nesse/ - typo i ui! http://www.studiomarani.it/ " - cinemagraphs! http://cornichewatches.com/ - ikone payment na dnu! https://hem.com/ — CONTENT naslovnica! https://versaudio.com/product/vers-2q/ "— Specifications! https://www.greyhours.com/en/product/vision-carbonshine — typo! http://alisharaf.com/diary/alyaqaza-magazine/" - dolazak fotki! http://www.the5th.co/! Context /ecommerce websites Dafed / 2019 Mario Šestak — Head of Design / Bornfight
129. 1. Evernote 2. Google docs 3. Sheets 4. Notes Dafed / 2019 Mario Šestak — Head of Design / Bornfight
130. serif fonts! Questa Grande -!http://thequestaproject.com/! Newzald -"https://klim.co.nz/retail-fonts/newzald/! Feijoa -!https://klim.co.nz/retail-fonts/feijoa/! Tiempos Text! Tiempos Headline! Austin typeface - "https://commercialtype.com/catalog/austin/austin! Farnham Display - "http://harbr.co/project-planner/! Adriane typeface -"https://typekit.com/fonts/adriane-text! Copernicus book! Kepler STD Display! Kepler Text! Petersburg Web - typekit! Libre Baskerville! Lora -"http://www.course-de-drone.fr/1_le-circuit-de-la-course-de-drone-world-drone-prix- de-dubai-en-video/! Lora -"http://pubpub.media.mit.edu/pub/AgeOfEntanglement! Freight text! Burges regular -"http://www.colophon-foundry.org/fonts/burgess! http://www.margauxlepierres.com/! Utopia std! Austin! https://commercialtype.com/catalog/austin/fat! Typography /SERIF
131. Dafed / 2019 Mario Šestak — Head of Design / Bornfight
132. Dafed / 2019 Mario Šestak — Head of Design / Bornfight
133. Dafed / 2019 Mario Šestak — Head of Design / Bornfight
134. Dafed / 2019 Mario Šestak — Head of Design / Bornfight
135. AND MANY MORE… Dafed / 2019 Mario Šestak — Head of Design / Bornfight
136. Dafed / 2019 Mario Šestak — Head of Design / Bornfight QUESTIONS?
137. / THE END THANK YOU! Dafed / 2019 Mario Šestak — Head of Design / Bornfight