1. Atomic and
Modular Design
Alfonso Moreno for Polaris Industries
March 2017

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. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
(a) Modules & Patterns

4. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
This is a module.

5. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
This is a module.

6. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
This is a module.

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. 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. 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. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
This is a module.
a

11. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
It’s also a pattern.
a

12. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Patterns repeat...
car
dashboard
highway
trailer
passenger
transmission

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. 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. 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. 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. 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. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
...and come together as systems or codes

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. (b) Atomic Design
Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com

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. 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. 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. 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. 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. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
“Atomic design helps predict re-use
and prevent redundancy.” ”

27. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
(c) Pattern Libraries

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. 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. 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. 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. 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. 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. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
(d) Where do we start?

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. 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. 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. 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. 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. 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