How design should me more like programming and vice-versa - How & why to adopt a Design System
- 1. How Design should be more like programming and vice-versa How to create a design system PINKSTRATDESIGN UX & UI DESIGNER <body> Design </body>
- 2. I’M A UX & UI DESIGNER
- 3. PINKSTRATDESIGN I’M A UX & UI DESIGNER
- 6. HOW MANY DEVELOPERS IN THE AUDIENCE?
- 7. HOW MANY DESIGNERS IN THE AUDIENCE?
- 8. I HAVE A GREAT… NEWS
- 9. THIS TALK IS FOR YOU BOTH
- 10. ONCE UPON A TIME…
- 11. • Top 10 big-data analytics company • Based in the Silicon Valley • 2.5 millions A-round investment ONCE UPON A TIME…
- 12. THEY HIRED ME TWO WEEKS AGO…
- 13. THEY HIRED ME FOR REDESIGNING MORE THAN… 50 Apps
- 14. 50 Apps THEY HIRED ME FOR REDESIGNING MORE THAN…
- 15. 50 Apps x 1 month
- 16. ~4 years
- 17. Unsustainable Hard to mantain Hard to use
- 18. ? DEAR DEV, WHEN YOU ARE CODING AN APP HOW DO YOU MANAGE IT IN TERMS OF FRONT-END?
- 19. Framework Scalability Reusability UI Components? DEAR DEV, WHEN YOU ARE CODING AN APP HOW DO YOU MANAGE IT IN TERMS OF FRONT-END?
- 20. DEAR DESIGNER, WHEN YOU ARE DESIGNING AN APP HOW DO YOU MANAGE IT IN TERMS OF UX & UI? ?
- 21. Guidelines Scalability Patterns UI Libraries DEAR DESIGNER, WHEN YOU ARE DESIGNING AN APP HOW DO YOU MANAGE IT IN TERMS OF UX & UI?
- 24. DESIGN SYSTEM A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. -designbetter.co
- 25. DESIGN SYSTEM It’s how you organize your app It’s component-based It’s about visual It’s about colors It’s about patterns It’s cross-platform
- 26. IT’S HOW YOU ORGANIZE YOUR APP The grid represents the basic structure of our design: it helps organize the content, it provides consistency, it gives an orderly look - Massimo Vignelli - The Vignelli Canon
- 28. HORIZONTALLY
- 29. VERTICALLY
- 30. VERTICALLY
- 31. VERTICALLY Login into your account Cancel Username Password LOGIN
- 32. IT’S COMPONENT- BASED Components are portions of reusable code within your system and they serve as the building blocks of your application’s interface.
- 33. IT’S COMPONENT- BASED Components range in complexity. Reducing components to a single function, like a button or a drop down increases flexibility, making them more reusable
- 34. WHAT DESIGNERS NEEDS TO LEARN FROM DEVS (AND VICE-VERSA)?
- 35. MYBUTTON WHAT DESIGNERS NEEDS TO LEARN FROM DEVS (AND VICE-VERSA)?
- 36. MYBUTTON
- 39. SAVE
- 40. SAVE YEAH! SAVED
- 42. ONCE 1
- 43. CODE ONLY ONCE
- 46. GOING BACK TO NUEVORA.COM 4 BUTTONS 3 FORMS 1 TABLE 1 SLIDER 1 CHECKBOX 1 MODALVIEW 1 SIDEBAR 1 HEADER
- 47. 4 BUTTONS 3 FORMS 1 TABLE 1 SLIDER 1 CHECKBOX 1 MODALVIEW 1 SIDEBAR 1 HEADER 13 COMPONENTS 24h of work
- 50. IT’S COMPONENT- BASED REUSABLE DESIGN BECOME SCALABLE LESS BUGS LESS TIME LESS MONEY
- 51. 50 Apps
- 52. 50 Apps
- 54. Win Win
- 55. Win Win I’m going to design faster, consistent, better We are reducing design decisions across the processs
- 56. SHOULD I ALWAYS START FROM SCRATCH? MY BLANK SCREEN
- 58. EXAMPLE
- 59. EXAMPLE App that helps kindergarten teachers to track the daily routine of their little students
- 60. EXAMPLE App that helps kindergarten teachers to track the daily routine of their little students
- 61. EXAMPLE App that helps kindergarten teachers to track the daily routine of their little students
- 62. EXAMPLE App that helps kindergarten teachers to track the daily routine of their little students
- 63. EXAMPLE • 400 clients • 1500 Installations • About 10.000 download on Google Store • Based in Bassano del Grappa
- 64. BEFORE
- 65. DURING 5-days Design Sprint UI & UX based on Google Material Design
- 66. TEST • 2 subjects that are not working as teachers and never used Infoasilo before • 2 teachers that never used Infoasilo before • 1 teacher that is using Infoasilo in her daily routine
- 67. TEST • % OF COMPLETED TASKS • TIME TO COMPLETE ALL TASKS
- 68. RESULTS/1 2 people that are not working as teachers and never used Infoasilo before Subject 1 Subject 2 New App Old App New App Old App Task Completed 7 tasks (100%) 1 task (≃14%) 7 tasks (100%) 4 tasks (≃56%) Time 7:55min Abandoned after 5mins 9:12min Abandoned after 7 mins
- 69. RESULTS/2 2 teachers that had never used Infoasilo Before Subject 3 Subject 4 New App Old App New App Old App Task Completed 7 tasks (100%) 3 tasks (≃14%) 7 tasks (100%) 5 tasks (70%) Time 7:11min Abandoned after 6mins 6:20min Abandoned after 9 mins
- 70. RESULTS/3 Teacher that already uses Infoasilo Subject 5 New App Old App Task Completed 7 tasks (100%) 7 tasks (100%) Time 4:37min 5:15min (+13%)
- 71. RESULTS/3 Teacher that already uses Infoasilo Subject 5 New App Old App Task Completed 7 tasks (100%) 7 tasks (100%) Time 4:37min 5:15min (+13%)
- 72. A SMALL VIDEO OF THE TEST
- 73. A SMALL VIDEO OF THE TEST
- 74. HOW DID WE DO THAT?
- 75. HOW DID WE DO THAT? WERE WE LUCKY?
- 76. HOW DID WE DO THAT? WERE WE LUCKY? CHANCE?
- 77. HOW DID WE DO THAT? WERE WE LUCKY? CHANCE? GOD?
- 78. 50% TEAM
- 82. I DID NOT WORK ON THE UI DESIGN
- 84. THE FUTURE
- 85. HOW DESIGN SHOULD BE MORE LIKE PROGRAMMING AND VICE-VERSA