Tools of destruction - Efrim Bartosik
•
1 gostou•1,744 visualizações
This is the presentation deck from UX Conference session by Efrim Bartosik as a part of UXSEA Summit 2019 in Singapore. UXSEA Summit 2019 was held from 18th to 20th November, 2019. For more information about UXSEA Society, visit https://uxsea.org/ The copyright of this material is with those who created this presentation material. Please take permissions from the authors if you are in doubt about copyright infringement.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Tools of destruction - Efrim Bartosik
Semelhante a Tools of destruction - Efrim Bartosik (20)
Mais de Kuldeep Kulshreshtha
Mais de Kuldeep Kulshreshtha (20)
Último
Último (20)
Tools of destruction - Efrim Bartosik
- 1. The future of UX Tools of Destruction Product Design Lead @ Efrim Bartosik www.linkedin.com/in/efrimbartosik 🛠
- 6. What How
- 9. Level 1 Producers 41% of companies Level 2 Connectors 21% of companies Level 3 Architects 21% of companies Level 4 Scientists 12% of companies Level 5 Visionaries 5% of companies Morebenefitsfromdesign More adoption of design *Source: The new design frontier
- 10. Level 1 Producers 41% of companies Level 2 Connectors 21% of companies Level 3 Architects 21% of companies Level 4 Scientists 12% of companies Level 5 Visionaries 5% of companies *Source: The new design frontier Design is what happens on screen Wireframes Design comps Interactive prototypes Design is what happens in a workshop Workshops Rapid sketching Stakeholder input Integrations between designer and developer tools Design is business strategy Trendspotting and foresight Product market fit tests Vision artifacts Cross- platform strategies Design is a standardised scalable process Daily standups Planning & prioritization Design briefs Written documentation Design is a hypothesis and an experiment Concept testing A/B tests Analytics 30 12 54 13 15
- 11. Level 1 Producers 41% of companies Level 2 Connectors 21% of companies Level 3 Architects 21% of companies Level 4 Scientists 12% of companies Level 5 Visionaries 5% of companies Morebenefitsfromdesign More adoption of design Design Systems *Source: The new design frontier
- 12. 2%9%16%27%46% 10%19%23%39% Transportation, automotive, delivery Level 2Level 1 Level 3 Level 4 Level 5 10% Leading Banking, financial services, and insuranceRoom for improvement *Source: The new design frontier
- 13. Product Design Address User Needs Meet business objectives
- 14. Product Design Address User Needs Meet business objectives Optimization & Innovation
- 18. Abstract Concrete Elements of user experience Strategy Scope Structure Skeleton SurfaceL1 L2 L3 L4 L5 Strategy Surface Design System Individual
- 19. 🤔 The downside of design systems *Source: The wonderful world of twitter
- 20. Design = Code
- 21. Naming conventions inspiration? – What CSS framework are we going to use? – What Grid system are we going to use? – How will we create our typography utility classes? Abstracts or concrete? – Who will be implementing this? – Where do we develop the Vue components? Single page with everything? – Aim to keep component nodes and DOM depth to a minimum – Do we need any environment setup or would push the library to gemfury for HK CC usage enough? – Who will be implementing this? – A/B testing in the future? – Will the spacing tokens be responsive? – Colour names? Do we want utility classes, or just abstracts? – How will we create out spacer classes? Do we want concrete utilities, or can use abstracts in CSS? – How to handle icons? – How do we approach this in a modular way? – How do we document these classes and functions? – The size implications of these decisions? – Naming conventions inspiration? – Normalize.css + Skeleton (minimal) + Tailwind (utility placeholder inspiration) – Do we use Pug? – Run time compilation?? Sometimes?? – Specify each prop or send over as big objects? – How do we decide on Vue libraries to use? (bloat vs just build it ourselves) – Directory Structure of
- 23. = Documentation HTML & CSS Design Tokens Playbook = Vue React Sketch Figma User Interface Tools Agnostic Code Output
- 24. Utilities
- 25. // Spacing Tokens $c-space-inset-xs: 4px; $c-space-inset-s: 8px; $c-space-inset-m: 12px; $c-space-inset-l: 16px; $c-space-inset-xl: 24px; // Color Tokens $color-smart-green: #5CCC5E !default; $color-fresh-cyan: #48D5DB !default; $color-trusty-peach: #FF917D !default; $color-epic-yellow: #FFD100 !default; $color-true-blue: #163E6B !default; Design Tokens
- 26. UI Kit
- 31. Product Design Address User Needs Meet business objectives Optimization & Innovation
- 33. *Source: Need for speed research Google The speed it takes to load a page How easy is it to find what I’m looking for How well the site fits my screen How simple the site is to use How attractive the looks 75% 66% 61% 58% 24%
- 34. x amount of legacy systems x amount of releases over x amount of ⏱ x amount of people Old Systems x amount of ⏱ and 💵 Vs New design system ❤ x amount of ⏱ and 💵 x amount of releases over x amount of ⏱ x amount of people = =
- 35. Emotional Design Usable Reliable Functional Emotional Design Usable Reliable Functional 👉 👆 Not this But this Minimum Viable Product *Source: Aaron Walter
- 36. Iteration Innovation ExperimentationCargo G G G S S S S S S S S S G G S G G G S S S S S S
- 38. 1570 Palladio provided rules and vocabulary for designing and constructing buildings, including principles and patterns, with detailed illustrations and explanations of how they work The past
- 39. The past
- 40. The future = learning from the past People Practices Platforms Users The entire company is accountable for the consumer experience
- 41. The sooner the better Level 1 Producers Level 2 Connectors Level 3 Architects Level 4 Scientists Level 5 Visionaries
- 42. Product Design Lead @ Thank you! The future of UX Efrim Bartosikcargodesignsystem.com coming soon… www.linkedin.com/in/efrimbartosik