Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Search & Destroy

DaFED
February 13, 2019

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.

DaFED

February 13, 2019
Tweet

More Decks by DaFED

Other Decks in Technology

Transcript

  1. SEARCH AND DESTROY Dafed / Novi Sad March / 2019

    Mario Šestak — Head of Design / Bornfight
  2. Mario Šestak — Head of Design / Bornfight 60 PEOPLE

    Dafed / 2019 Mario Šestak — Head of Design / Bornfight
  3. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight STORY OF A PROJECT
  4. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight Ovom interfaceu fali malo UX-a da bude bolji. —Klijent 01 “
  5. 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 “
  6. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight Treba nam pomoć, trebalo bi poboljšati UX-a aplikacije. —Klijent 03 “
  7. INPUT Treba nam pomoć oko UX-a aplikacije “ Dafed /

    2019 Mario Šestak — Head of Design / Bornfight
  8. 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
  9. 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
  10. • 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…
  11. POTREBE POSLOVANJA DESIGN / UX POTREBE KORISNIKA Dafed / 2019

    Mario Šestak — Head of Design / Bornfight
  12. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight Discovery—The process of finding information, acquiring knowledge that informs design decisions. “
  13. 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
  14. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight WHAT DO WE DISCOVER? PROBLEM UNDERSTANDING SOLUTION EXPLORATION 01 02
  15. 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 …
  16. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight EASY EASY HARD FIRST IDEA EXECUTION
  17. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight DESIGN SOFT SKILLS DESIGN HARD SKILLS 01 02
  18. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight DESIGN SOFT SKILLS 01
  19. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight METODE - POSLOVNE POTREBE 1. Analiza konkurencije 2. Analiza podataka 3. Razgovor s ljudima 4. Radionice …
  20. 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
  21. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight DISCOVERY PROBLEM UNDERSTANDING BUSINESS UNDERSTANDING 01 02
  22. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight METODE - POSLOVNE POTREBE 1. Goals 2. Motivation 3. Validated assumptions 4. Opportunities 5. Vision of success …
  23. 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 …
  24. 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 …
  25. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight POTREBE POSLOVANJA POTREBE KORISNIKA THEY GO SIMUL TANEITY
  26. THERE IS ALWAYS SOME KING OF DISCOVERY Dafed / 2019

    Mario Šestak — Head of Design / Bornfight
  27. USER INTERVIEWS FIELD RESEARCH WIREFRAMES USABILITY TESTING RAPID PROTOTYPING USER

    FLOWS STAKEHOLDERS INTERVIEWS DATA ANALYSIS COMPETITORS COMPARISON BENCHMARK ANALYSIS USER JOURNEY
  28. USER INTERVIEWS FIELD RESEARCH WIREFRAMES USABILITY TESTING RAPID PROTOTYPING USER

    FLOWS STAKEHOLDERS INTERVIEWS DATA ANALYSIS COMPETITORS COMPARISON BENCHMARK ANALYSIS USER JOURNEY
  29. 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 …
  30. USER INTERVIEWS FIELD RESEARCH WIREFRAMES USABILITY TESTING RAPID PROTOTYPING USER

    FLOWS STAKEHOLDERS INTERVIEWS DATA ANALYSIS COMPETITORS COMPARISON BENCHMARK ANALYSIS USER JOURNEY
  31. USER INTERVIEWS FIELD RESEARCH WIREFRAMES USABILITY TESTING RAPID PROTOTYPING USER

    FLOWS STAKEHOLDERS INTERVIEWS DATA ANALYSIS COMPETITORS COMPARISON BENCHMARK ANALYSIS USER JOURNEY
  32. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight DESIGN HARD SKILLS 02
  33. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight Research is creating new knowledge Neil Amstrong “
  34. Continuous / Active 01 Ad-Hoc 02 Dafed / 2019 Mario

    Šestak — Head of Design / Bornfight
  35. Typography Grids Layouts Content Copy Continuous / Active 01 Ad-Hoc

    02 X Dafed / 2019 Mario Šestak — Head of Design / Bornfight
  36. More time Continuous / Active 01 Ad-Hoc 02 X Less

    time Typography Grids Layouts Content Copy Dafed / 2019 Mario Šestak — Head of Design / Bornfight
  37. Context /ecommerce website elements: Product page Search Checkout … Dafed

    / 2019 Mario Šestak — Head of Design / Bornfight
  38. 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
  39. Dafed / 2019 Mario Šestak — Head of Design /

    Bornfight INFORMATION GATHERING
  40. 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
  41. 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
  42. 1. Evernote 2. Google docs 3. Sheets 4. Notes Dafed

    / 2019 Mario Šestak — Head of Design / Bornfight
  43. 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
  44. / THE END THANK YOU! Dafed / 2019 Mario Šestak

    — Head of Design / Bornfight