Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Atomic Design Presentation for Polaris Industries

In March 2017, I championed Atomic Design (term coined by developer Brad Frost) at Polaris to help with their efforts creating a pattern library that was reusable, scalable and manageable (their previous attempts had spilled into thousands of patterns which were redundant and hard to manage.) I summed my experience working for pattern library teams for Valspar, US Bank & Target to my research on the latest industry standards, and put them together in this story.

  • Be the first to comment

Atomic Design Presentation for Polaris Industries

  1. 1. Atomic and Modular Design Alfonso Moreno for Polaris Industries March 2017
  2. 2. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Table of Contents (a) Modules & Patterns (b) Atomic Design (c) Pattern Libraries (d) Where Do We Start?
  3. 3. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com (a) Modules & Patterns
  4. 4. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com This is a module.
  5. 5. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com This is a module.
  6. 6. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com This is a module.
  7. 7. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Modules are created to build things that have not yet been imagined.
  8. 8. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com HTML pages are modularDOCKING MODULE NAVIGATION MODULE FILTER MODULE PRODUCT GRID MODULE FOOTER MODULE COMMAND MODULE SERVICE MODULE
  9. 9. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com “Modular design, is a design approach that subdivides a system into smaller parts called modules or skids, which can be independently created and then used in different systems.” Wikipedia
  10. 10. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com This is a module. a
  11. 11. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com It’s also a pattern. a
  12. 12. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Patterns repeat... car dashboard highway trailer passenger transmission
  13. 13. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com ...and combine differently within same or varying systems, codes or languages. dashboard paneli daishabord salpicadero tableau de bord instrumententafel deska rozdzielcza
  14. 14. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com “A design pattern is an element of a user interface that solves a specific design problem and repeats across the product in various contexts or with various content.”
  15. 15. Design Patterns Are: Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Modular Consistent Learnable Scalable Re-usable * Road Vector Art Created by Freepic
  16. 16. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com this is a pattern this is a pattern this is a pattern this is a pattern
  17. 17. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Modular patterns follow hierarchies... a, b, c... and “The strongest of all warriors are these two — Time and Patience.” Letters Words Sentences Narratives
  18. 18. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com ...and come together as systems or codes
  19. 19. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Understanding the pattern hierarchy of a system is crucial to making it work letters can make words but words cannot make letters a, b, c... and and, b, c... and
  20. 20. (b) Atomic Design Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com
  21. 21. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com “Atomic design, is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.” Brad Frost
  22. 22. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com The five stages of atomic design are: Atoms Molecules Organisms Templates Pages * from Atomic Design by Brad Frost (atomicdesign.bradfrost.com)
  23. 23. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Page Pages are composed of organisms... Secondary words, lorem ipsum dolor sit amet consecuenctur Main Words Call to Action Image Call to Action Image Call to Action Image Call to Action LANGUAGESearch this site NAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINK logotype Organism Organism Organism
  24. 24. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com LANGUAGESearch this site NAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINK logotype ...organisms subdivide into molecules... Organism Molecule Molecule Molecule Molecule
  25. 25. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Search this site ...and molecules break into atoms... Atom (form field) Atom (icon) Atom (text style) Atom (button)
  26. 26. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com “Atomic design helps predict re-use and prevent redundancy.” ”
  27. 27. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com (c) Pattern Libraries
  28. 28. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Identify and collect your distinct and re-usable components Don’t think pages, think systems Mind the semantics, descriptive labels remain scalable Fundamentals
  29. 29. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Who Benefits from a Pattern Library? * Vector Art Created by Freepic and, ultimately Atomic patterns provide the team with a common language that breaks down silos and facilitates collaborative work. Content Managers Create once but output on separate devices and brands without being distracted by visual style or consistency, Developers Re-use common elements focused on functionality and unen- cumbered by rigid visual standards Designers Free to focus on design integrity while aware of the functional capabilities available within the system. Brand Managers More empowered to enable brand consistency across different content and functional needs. The Polaris Customer Better prepared to engage with the business by way of a more usable, intuitive, broadly accessible, and consistent digital experience.
  30. 30. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Common Obstacle: Design by Committee From “Designing The Stop Sign” (Parody) -- https://www.youtube.com/watch?v=Wac3aGn5twc Input Output
  31. 31. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com #1 Obstacle: Excessive Governance * cartoon by Quino Overhead is the enemy of “up-to-dateness” We must find a balance between stability and change. Being up to date is more important than anything else. Stay Agile “Working software over comprehensive documentation” (Principle #2 of The Agile Manifesto).
  32. 32. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Good Examples of Pattern Libraries Bootstrap http://getbootstrap.com/components/ Pattern Lab http://demo.patternlab.io Lonely Planet http://rizzo.lonelyplanet.com/style- Sales Force’s Lightning Design System https://lightningdesignsystem.com/icons/ Code Pen http://codepen.io/guide/ Mail Chimp http://ux.mailchimp.com/patterns/
  33. 33. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com An Atomic Pattern Library Pattern Lab is a tools agnostic and language agnostic platform that allows its users to construct pattern-driven interfaces in a versatile and device-responsive manner. See demo at: http://demo.patternlab.io/
  34. 34. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com (d) Where do we start?
  35. 35. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com BECOME ONE OF USBECOME ONE OF US (Aim For) Shared Understanding * from Toy Story 1
  36. 36. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com Stay Agile Individuals and interactions over processes and tools Working software over comprehensive documentation Customer collaboration over contract negotiation Responding to change over following a plan
  37. 37. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com EPIserver is already organized for pattern libraries We’re Already On Our Way There
  38. 38. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com We’re Already On Our Way There 1 3 4 2 1 3 4 5 6 2 1 3 4 5 6 2 HOLDS ICE AND IT STILL COSTS LESS THAN YETI’S 30 HOURS LONGER Get some! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh COMFORTCARRY HANDLES Consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet TRAVELLOCK SYSTEM Consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet EASYOUT DRAIN SYSTEM Consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet NOSLIP RUBBER FEET Consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet POLARWALL INSULATION Consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ICELOCK SEAL Consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet SHOP FOR COOLERS Select your brand  REAL PEOPLE, REAL FEEDBACK POLARIS NORTHSTAR COOLER ACCESORIES NEW WIRE BASKET 60 QUART ##### /### 30 QUART ##### /### SEAT CUSHION 60 QUART ##### /### 30 QUART ##### /### NEW NEW BOTTLE OPENER ALL COOLERS ##### /### NEW LOCK & RIDE QUICKSTRAP ALL COOLERS ##### /### 18 CANS OR 36 CANS? CERTIFIED BEAR RESISTANT GET SOME! GET SOME! 30 QUART DEMO CHALLENGE 1 WAY TO PARTITION 60 QUART 2 WAYS TO PARTITION POLARIS WINCHES GIVE YOU BACK YOUR TIME WHICH ONE WORKS FOR YOU? WHAT OTHERS ARE SAYING: POLARIS ENGINEERED ProHD or HD?Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet HD CUT STEEL GEARS for improved durability STEEL SPOOL can handle extreme loads 40% QUIETER – near silent free spooling SEALED motor and drivetrain LOW VOLTAGE contractor INTEGRATED WIRING & MOUNT PLATES ensure perfect fit EASY INSTALL HEAVY DUTY PRO HD TESTED 1,200+ PULLS at max load, it works when you need it to WITHSTANDS -20F temperatures SEALED MOTOR & HEAVY DUTY GEARS operate fully AUTO STOP TECHNOLOGY – stops winch at end of pull, prevents driveline stress & over lifting ALUMINUM FAIRLEAD – extends rope life, corrosion-resistant SYNTHETIC ROPE – Superior flexibility, great strength, lightweight BUILT FOR YOUR MACHINE, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh SEE ALL BENEFITS Make the right decision for your ride. What’s the difference? WORK FASTER Duis mi lacus, bibendum eu tortor ac, volutpat vulputate velit. Donec luctus dignissim eros, in convallis leo. Suspendisse potenti. PLAY FASTER Phasellus vulputate, lacus ac facilisis eleifend, purus nisi vulputate tellus, quis facilisis enim eros in purus. Integer mi massa, congue et sagittis eu, venenatis lobortis nisi. WASTE NO TIME Quisque mattis risus tortor, quis scelerisque elit condimentum ut. In ultrices diam pulvinar, posuere purus id, efficitur tellus. Nam vel mauris metus. BUY NOW BUY ONLINE Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam FIND A DEALER Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam NEED ACCESORIES? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam BUILT BY RIDERS FOR RIDERS, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh FULLY INTEGRATED MOUNT & WIRING, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam MILITARY TESTED & APPROVED, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh RANGER ATV POLARIS GENERAL RZR ACE GET YOUR WINCH Select your brand 
  39. 39. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com How to Iterate From an MVP Keep It Simple Not like this: 1 2 3 4 5 1 2 3 4 Like this: From Design to Learn by Melissa Perri as presented for Lean UX NYC 2014
  40. 40. Polaris Industries PG&A UX Team - March 2017 alfonso.moreno@polaris.com thank you * all photography (except where noted) borrowed from publicly available content on the internet -- no copyrights claimed or infringement intended

    Be the first to comment

    Login to see the comments

  • SantoshBharti1

    Jul. 10, 2019
  • MohamedSallamiRehoum

    Sep. 27, 2019
  • EdwigeMidi

    Oct. 29, 2019

In March 2017, I championed Atomic Design (term coined by developer Brad Frost) at Polaris to help with their efforts creating a pattern library that was reusable, scalable and manageable (their previous attempts had spilled into thousands of patterns which were redundant and hard to manage.) I summed my experience working for pattern library teams for Valspar, US Bank & Target to my research on the latest industry standards, and put them together in this story.

Views

Total views

39,276

On Slideshare

0

From embeds

0

Number of embeds

38,566

Actions

Downloads

0

Shares

0

Comments

0

Likes

3

×