Tweet
Tweet

Slide 1

Slide 1 text

SEARCH AND DESTROY Dafed / Novi Sad March / 2019 Mario Šestak — Head of Design / Bornfight

Slide 2

Slide 2 text

HELLO! Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 3

Slide 3 text

MARIO Dafed / 2019 Head of Design / Bornfight

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

STRATEGY DESIGN DEVELOPMENT DigitaLabin / 2018 Mario Šestak — Head of Design / Bornfight

Slide 20

Slide 20 text

STRATEGY DESIGN DEVELOPMENT DigitaLabin / 2018 Mario Šestak — Head of Design / Bornfight

Slide 21

Slide 21 text

STRATEGY DESIGN DEVELOPMENT DigitaLabin / 2018 Mario Šestak — Head of Design / Bornfight

Slide 22

Slide 22 text

Mario Šestak — Head of Design / Bornfight 60 PEOPLE Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

www.bornfight.com

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

SEARCH AND DESTROY Mario Šestak — Head of Design / Bornfight Dafed / 2019

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight Ovom interfaceu fali malo UX-a da bude bolji. —Klijent 01 “

Slide 52

Slide 52 text

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 “

Slide 53

Slide 53 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight Treba nam pomoć, trebalo bi poboljšati UX-a aplikacije. —Klijent 03 “

Slide 54

Slide 54 text

INPUT Treba nam pomoć oko UX-a aplikacije “ Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

• 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…

Slide 58

Slide 58 text

POTREBE POSLOVANJA DESIGN / UX POTREBE KORISNIKA Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 59

Slide 59 text

DISCOVERY Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 60

Slide 60 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight Discovery—The process of finding information, acquiring knowledge that informs design decisions. “

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight WHAT DO WE DISCOVER? PROBLEM UNDERSTANDING SOLUTION EXPLORATION 01 02

Slide 63

Slide 63 text

RESEARCH? Dafed / 2019 Mario Šestak — Head of Design / Bornfight DISCOVERY METHOD

Slide 64

Slide 64 text

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 …

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

POTREBE POSLOVANJA POTREBE KORISNIKA Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 69

Slide 69 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight DISCOVERY METHODS

Slide 70

Slide 70 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight METODE - POSLOVNE POTREBE 1. Analiza konkurencije 2. Analiza podataka 3. Razgovor s ljudima 4. Radionice …

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Client Workshop

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

DISCOVERY OUTPUTS Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 75

Slide 75 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight METODE - POSLOVNE POTREBE 1. Goals 2. Motivation 3. Validated assumptions 4. Opportunities 5. Vision of success …

Slide 76

Slide 76 text

It’s collaborative activity. Document your discoveries. —Smart person Dafed / 2019 “

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

POTREBE POSLOVANJA POTREBE KORISNIKA Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 79

Slide 79 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight DISCOVERY METHODS

Slide 80

Slide 80 text

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 …

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

DISCOVERY OUTPUTS Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 86

Slide 86 text

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 …

Slide 87

Slide 87 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight POTREBE POSLOVANJA POTREBE KORISNIKA THEY GO SIMUL TANEITY

Slide 88

Slide 88 text

PROJECT WITHOUT DISCOVERY? Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 89

Slide 89 text

Mario Šestak — Head of Design / Bornfight ME PROBLEMS PILLING IN Dafed / 2019

Slide 90

Slide 90 text

THERE IS ALWAYS SOME KING OF DISCOVERY Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

IT DEPENDS… Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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 …

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

You Information RESEARCH Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 100

Slide 100 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight Research is creating new knowledge Neil Amstrong “

Slide 101

Slide 101 text

Continuous / Active 01 Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 102

Slide 102 text

Continuous / Active 01 Ad-Hoc 02 Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 103

Slide 103 text

Typography Grids Layouts Content Copy Continuous / Active 01 Ad-Hoc 02 X Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 104

Slide 104 text

More time Continuous / Active 01 Ad-Hoc 02 X Less time Typography Grids Layouts Content Copy Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 105

Slide 105 text

RESEARCH IN DIGITAL ENVIROMENT Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 106

Slide 106 text

Context Website type Visual Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 107

Slide 107 text

Context /ecommerce websites https://ecomm.design/

Slide 108

Slide 108 text

Context /ecommerce website elements: Product page Search Checkout … Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 109

Slide 109 text

Context /ecommerce website elements: Product page Search Checkout … Dafed / 2019

Slide 110

Slide 110 text

Context /ecommerce website elements: Product page Search Checkout … Dafed / 2019

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

Context /ecommerce website elements: Product page Search Checkout … Dafed / 2019

Slide 114

Slide 114 text

Website elements

Slide 115

Slide 115 text

Website elements

Slide 116

Slide 116 text

Website elements

Slide 117

Slide 117 text

Website elements Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 118

Slide 118 text

Website elements Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 119

Slide 119 text

Grid Dafed / 2019

Slide 120

Slide 120 text

Grid Dafed / 2019

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight INFORMATION GATHERING

Slide 124

Slide 124 text

ORGANIZE Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 125

Slide 125 text

ORGANIZE ORGANIZE Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 126

Slide 126 text

ORGANIZE ORGANIZE ORGANIZE Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

1. Evernote 2. Google docs 3. Sheets 4. Notes Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

AND MANY MORE… Dafed / 2019 Mario Šestak — Head of Design / Bornfight

Slide 136

Slide 136 text

Dafed / 2019 Mario Šestak — Head of Design / Bornfight QUESTIONS?

Slide 137

Slide 137 text

/ THE END THANK YOU! Dafed / 2019 Mario Šestak — Head of Design / Bornfight