Design for Developers
•
1 j'aime•915 vues
This deck has been used to introduce the design practice to our developers and managers. For more information about Cometa Works please visit http://www.cometa.works
Recommandé
Contenu connexe
Similaire à Design for Developers
Similaire à Design for Developers (20)
Dernier
Dernier (20)
Design for Developers
- 1. DESIGN FOR DEVELOPERS AN INTRODUCTION TO THE DESIGN PRACTICES AND PROCESS COMETA WORKS CROSS TRAINING
- 2. WHO I AM DOMENICO MARCO DI DONNA In the design industries since 2005 UX Designer and Digital Art Director Since 2009 Currently working at Cometa Works @domenicodd
- 3. DESIGN FOR DEVELOPERS AGENDA ‣ Evolution of Design Disciplines ‣ Design Process
- 7. 90S
- 8. WEB DESIGNER AN UNICORN CALLED 90S
- 10. THE WEB TODAY IS WAY MORE COMPLEX THAN 90S
- 11. NO MORE UNICORNS
- 12. TEAMS
- 13. DESIGNERS DEVELOPERS FRONT-END BACK-END SYSTEM UX / INTERACTION UI VISUAL / GRAPHIC MOTION
- 14. HOW DESIGNERS (ARE SUPPOSED TO) SOLVE PROBLEMS
- 15. THE DESIGN PROCESS DESIGNERS FOLLOW
- 16. DESIGN PROCESS FRAMEWORKS USER CENTERED DESIGN USER EXPERIENCE DESIGN DESIGN THINKING LEAN UX AGILE UX …
- 19. UNDERSTAND & ANALYZE WHERE WE BEGIN 1.
- 21. WHAT WE NEED TO UNDERSTAND?
- 22. BRAND & VISION WHO IS AND WHERE HE WANT TO GO
- 23. BUSINESS NEEDS & SUCCESS METRICS THE GOAL OF THE PROJECT IN BUSINESS TERMS.
- 24. CUSTOMERS WHO THEY ARE, HOW THEY THINK, WHAT THEY WANT.
- 25. POLITICS WHO PAYS? WHO GAINS? WHO LOSES?
- 26. HOW WE RESEARCH?
- 29. FOCUS GROUP CUSTOMERS ATTITUDE (DE-CONTEXTUALIZED)
- 30. USABILITY STUDIES CUSTOMERS BEHAVIORS ON EXISTINGS PRODUCTS (SCRIPTED)
- 31. EYE TRACKING CUSTOMERS BEHAVIORS ON EXISTINGS PRODUCTS (SCRIPTED)
- 33. A/B TESTS CUSTOMERS BEHAVIORS ON EXISTINGS PRODUCTS (NATURAL)
- 34. CLICK STREAM ANALYSIS CUSTOMERS BEHAVIORS ON EXISTINGS PRODUCTS (NATURAL)
- 35. EMAIL SURVEYS CUSTOMERS ATTITUDE (DE-CONTEXTUALIZED)
- 36. ON-SITE SURVEYS CUSTOMERS ATTITUDE (NATURAL)
- 37. OTHER RESEARCH METODOLOGY PARTICIPATORY DESIGN CARD SORTING TRUE INTENT STUDIES ETHNOGRAPHIC FIELD STUDIES CONCEPT TESTING CUSTOMER FEEDBACK
- 38. DO WE REALLY NEED TO DO ALL OF THAT RESEARCH?
- 39. DEPENDS KNOW HOW (MARKET / BUSINESS / CUSTOMER) TIME BUDGET
- 40. I MADE MY HOMEWORK. WHAT HAPPEN NOW?
- 42. HOW WE ANALYZE ?
- 44. UBER LET’S MAKE EXAMPLES REFERRING TO TRANSPORTATION AS RELIABLE AS RUNNING WATER, EVERYWHERE FOR EVERYONE.
- 45. PERSONAS FICTIONAL CHARACTERS IDENTIFIES KEY USERS GROUPS FOCUS ON NEEDS AND EXPECTATIONS
- 46. PERSONASWHY ARE THEY IMPORTANT? THEY HELP BEING EMPATHETIC. YOU ARE NOT THE USER!
- 47. PERSONASHOW WE BUILD THEM? PERSONAL INFORMATIONAGE, GENDER, EDUCATION… PROFESSIONAL INFORMATIONWORK EXPERIENCE, PROFESSIONAL BACKGROUND, WHY-WHEN-HOW WILL ACCESS THE SITE/APP… TECHNICAL INFORMATIONWHAT TECHNOLOGICAL DEVICE HE USE, WHAT SOFTWARE, HOW MUCH TIME SPEND BROWSING… USER MOTIVATIONWHAT MOTIVATES, WHAT HE’S LOOKING FOR, WHAT ARE HIS NEEDS…
- 49. DRIVER PERSONA 1 : JOHN John Eve, 40 Years Old, College Education, Married (Wife Employed), 3 Child (4, 7, 12) 7 years of experience as a private truck driver. He’s an Apple fanboy, iPhone, iPad, Mac Book and Apple TV. He want to have more times to spend with his family, and be able to manage his time. PERSONAL WORK EXPERIENCE TECH INFO MOTIVATION
- 50. CUSTOMER PERSONA 1: LANA Lana Monroe, 35 Years Old, PhD, Single 6 Years Research in Biotechnologies. Fashion Blogger. iPhone User, Dell Laptop, Basic Coding Ability. She doesn’t like public transport. Doesn’t like to drive. Want to feel safe. PERSONAL WORK EXPERIENCE TECH INFO MOTIVATION
- 51. SCENARIOS STORY AND CONTEXT WHY USER VISIT HOW HE REACH THE GOAL
- 52. SCENARIOSWHY ARE THEY IMPORTANT? BEING EMPATHETIC WITH THE CASES DESCRIBED.
- 53. SCENARIOSHOW WE BUILD THEM? WHO IS THE USER?USE THE PERSONAS AS REFERENCE. WHY DOES THE USER COME TO THE SITE?MOTIVATION, EXPECTATION, GOALS. HOW HE ACHIEVE THE GOALS HI HAS?IDENTIFIES THE VARIOUS POSSIBILITIES AND ANY POTENTIAL BARRIERS.
- 54. SCENARIO LANA 1 - BOOK A RIDE Lana has already installed the Uber app, created her profile, and connected the credit card. Lana is at friends house for dinner. Her friend can’t drive her back home, so she need to find a way to go back home. She decide to give Uber a try. While she’s drinking a coffe, she open the Uber app on her iPhone. She can view the riders around here and how distant they are. There a three available, so she’s not in hurry. She decide to finish her coffee, go to the bath, cheers the friends and open the app later. The riders around her are now two, she select the closest one, and in 10 seconds the driver confirm the availability. He will be at the door in 2 minutes. ASSUMPTIONS SCENARIO
- 55. TASK ANALYSIS IDENTIFY TASKS FROM THE SCENARIO TO DECOMPOSE THEM INTO SUB-TASKS.
- 56. TASK ANALYSISIMPORTANT TO UNDERSTAND: HOW USERS ACHIEVE THEIR GOALS INFLUENCED BY ENVIRONMENT INFLUENCED BY PREVIOUS EXPERIENCE
- 57. TASK ANALYSISHOW WE BUILD IT? IDENTIFY THE TASKS BREAK THEM INTO SMALL SUBTASKS DRAW A TASK DIAGRAM WITH THE SUBTASKS
- 58. TASK ANALYSIS - BOOK A RIDE
- 59. USER STORIES AGILE/SCRUM METHOD TO TRANSLATE THE TASKS ANALYSIS INTO REQUIREMENTS/ FEATURES.
- 60. USER STORIESIMPORTANT TO UNDERSTAND: THE EFFORT IN MAKING A FEATURE
- 61. USER STORIESHOW WE BUILD IT? FROM THE TASK TO THE FEATURE AS A <PERSONAS>, I WANT <GOAL> SO THAT <REASON/BENEFIT>.
- 62. USER STORIES - BOOK A RIDE (EPIC)
- 63. DESIGN WE ARE READY TO 2.
- 64. WHAT ARE THE DESIGN STEPS?
- 65. USER FLOW & SITEMAP WIREFRAMES USER INTERFACE STYLEGUIDE
- 66. USER FLOW & SITEMAP FOLLOW THE FLOW, BUILD A MAP.
- 67. USER FLOW & SITEMAPWHY ARE THEY IMPORTANT? TO SEE THE WHOLE PICTURE.
- 68. USER FLOW & SITEMAPHOW WE BUILD THEM? SCENARIOS, TASK ANALYSIS AND USER STORIES ARE OUR REFERENCE TO BUILD THAT SCHEME.
- 70. FLOW - BOOK A RIDE
- 73. WIREFRAMESWHY ARE THEY IMPORTANT? QUICK PROTOTYPE VALIDATE THE USER FLOW DEFINE PATTERNS
- 74. WIREFRAMESHOW WE BUILD THEM? PEN AND PAPER (LOW FIDELITY) SOFTWARE (HIGH FIDELITY)
- 78. WIREFRAMES - BOOK A RIDE
- 79. USER INTERFACE DEFINE THE VISUAL APPEARANCE OF THE SITE/APP BY FOLLOWING DESIGN PRINCIPLES AND COMBINING VISUAL ELEMENTS.
- 88. UI ELEMENTS TYPOGRAPHY FONT FAMILIES STYLE & WEIGHT LINE & READABILITY
- 97. TYPOGRAPHY LINE: LENGTH & LEADING
- 99. UI ELEMENTS COLORS COLOR TYPES COLOR METHODS COLOR SCHEME COLOR PSYCHOLOGY
- 101. COLOR TYPES
- 102. COLOR METHODS
- 103. COLOR SCHEME
- 104. COLOR PSYCHOLOGY
- 105. UI ELEMENTS LINES & SHAPE BASIC ELEMENTS - GEOMETRIC & ORGANICS - TO BUILD COMPLEX IMAGERY.
- 106. UI ELEMENTS LINES & SHAPE
- 107. STYLEGUIDE HELPS TO BEING CONSISTENT WITH THE STYLE OF THE WEBSITE/APP
- 109. FRONT-END FRAMEWORK PITFALLS OTHER DEV’S STRUCTURE CONVENTIONS NAMING STYLES LOOKALIKE ISSUES ONE SIZE FITS ALL ABILITY TO SCALE
- 110. FRONT-END FRAMEWORK LESSON LEARNED THE BENEFIT OF HAVING THE STYLE PRE-DEFINED BEFORE WE BUILD.
- 111. STYLE GUIDE PROBLEMS CREATED AFTER THE WEBSITE HAS BEEN ULTIMATE TIME-CONSUMING USELESS UNTIL NEXT UPDATE
- 112. WHY ARE WE TALKING ABOUT STYLE GUIDE? CONSISTENCY!
- 113. HOW WE SOLVE THAT STYLEGUIDE MESS?
- 114. MVSGMINIMUM VIABLE STYLE GUIDE DEFINE THE VISUAL ELEMENTS AT THE BEGINNING OF THE PROJECT
- 115. VISUAL ELEMENTS TYPOGRAPHY COLORS ICONS & SHAPES IMAGES
- 116. MVSG AND APPLY THE VISUAL ELEMENTS ONLY TO THE MINIMAL AMOUNT OF BASIC WEB ELEMENT
- 117. BASIC WEB ELEMENTS INPUT CONTROLS NAVIGATION ELEMENTS INFORMATION ELEMENTS CONTAINERS
- 118. SOUND FAMILIAR?
- 120. TEST & REFINE WE ARE READY TO 3.
- 121. WHEN AFTER A NEW FEATURE HAS BEEN MOCKED OR RELEASED
- 122. WHY TO VERIFY HYPOTHESIS, USABILITY AND GOALS