Atomic Design Presentation for Polaris Industries

Atomic and
Modular Design
Alfonso Moreno for Polaris Industries
March 2017

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?

(a) Modules & Patterns

This is a module.

Modules are created to build things
that have not yet been imagined.

HTML pages
are modularDOCKING
MODULE
NAVIGATION
MODULE
FILTER
MODULE
PRODUCT GRID
MODULE
FOOTER
MODULE
COMMAND
MODULE
SERVICE
MODULE

“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

This is a module.
a

It’s also a pattern.
a

Patterns repeat...
car
dashboard
highway
trailer
passenger
transmission

...and combine differently within same
or varying systems, codes or languages.
dashboard
paneli
daishabord
salpicadero
tableau de bord
instrumententafel
deska rozdzielcza

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

Design Patterns Are:
Modular
Consistent
Learnable
Scalable
Re-usable
* Road Vector Art Created by Freepic

this is a pattern
this is a pattern
this is a pattern
this is a pattern

Modular patterns follow hierarchies...
a, b, c... and
“The strongest of all
warriors are these
two — Time and
Patience.”
Letters Words Sentences Narratives

...and come together as systems or codes

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

(b) Atomic Design

“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

The five stages of atomic design are:
Atoms Molecules Organisms Templates Pages
* from Atomic Design by Brad Frost (atomicdesign.bradfrost.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

LANGUAGESearch this site
NAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINK
logotype
...organisms subdivide into molecules...
Organism
Molecule
Molecule Molecule
Molecule

Search this site
...and molecules break into atoms...
Atom
(form field)
Atom
(icon)
Atom (text style) Atom (button)

“Atomic design helps predict re-use
and prevent redundancy.” ”

(c) Pattern Libraries

Identify and collect your distinct
and re-usable components
Don’t think pages, think systems
Mind the semantics,
descriptive labels remain scalable
Fundamentals

Who Beneﬁts 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 diﬀerent 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.

Common Obstacle: Design by Committee
From “Designing The Stop Sign” (Parody) --
https://www.youtube.com/watch?v=Wac3aGn5twc
Input
Output

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

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/

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/

(d) Where do we start?

BECOME ONE OF USBECOME ONE OF US
(Aim For)
Shared Understanding
* from Toy Story 1

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

EPIserver is
already organized
for pattern
libraries
We’re Already On Our Way There

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
EASYOUT DRAIN SYSTEM
NOSLIP RUBBER FEET
POLARWALL INSULATION
ICELOCK SEAL
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
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,
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
NEED ACCESORIES?
BUILT BY RIDERS FOR RIDERS, consectetuer
adipiscing elit, sed diam Lorem ipsum dolor sit amet,
FULLY INTEGRATED MOUNT & WIRING,
consectetuer adipiscing elit, sed diam Lorem ipsum
MILITARY TESTED & APPROVED, consectetuer
adipiscing elit, sed diam Lorem ipsum dolor sit amet,
RANGER ATV
POLARIS GENERAL
RZR
ACE
GET YOUR WINCH
Select your brand 

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

thank you
* all photography (except where noted) borrowed from publicly available content on the internet -- no copyrights claimed or infringement intended

Atomic Design Presentation for Polaris Industries

More Related Content

What's hot

Similar to Atomic Design Presentation for Polaris Industries

Recently uploaded

Atomic Design Presentation for Polaris Industries