Amnesty International USA launched a website redesign in May 2017 based on a design pattern that would reinforce our branding and make it easy to implement on any page using WordPress, Bootstrap 4 and Advanced Custom Fields. We’ll discuss how we defined the design pattern and why it’s important for every website to have one. Then we’ll explore how ACF uses flexible content and repeater fields to create an infinite number of design possibilities while still maintaining design guidelines. Code, design and process will be shared. Keynote Presentation at NTC WordPress Day 2018. Presented by Daniel Schutzsmith and Gabriel Dekoladenu, Amnesty International USA

1. USING DESIGN SYSTEMS &
ADVANCED CUSTOM FIELDS
TO WIN ON THE WEB

2. DANIEL SCHUTZSMITH
Digital Technology Manager
& Senior Web Developer
§ Designer + Programmer + Strategist
§ 20 years in web development.
I’M GETTING OLD!!!
§ 14 years teaching at Universities
(School of Visual Arts, NYU, &
currently SUNY New Paltz).
§ Built about 50 websites on Drupal.
§ Built over 100 websites/web apps
with WordPress.
§ I’M ALWAYS LEARNING!!!!!

3. GABRIEL DEKOLADENU
Junior Web Developer
§ Front/Backend Developer + Web
Designer
§ Knowledgeable in HTML, CSS(SASS,
Stylus), Vanilla JS, PHP, C++, a little
Python
§ Currently learning Angular, React,
and Vue Javascript.
§ Works with WordPress daily and
administrates all AIUSA Websites.
§ Loves sharing knowledge!!!

4. 4
“YOUR SITE LOOKS SO00000 2009”

8. RESPONSIVE /
MOBILE FIRST
DEFINE A
LADDER OF
ENGAGEMENT
CREATE A
VISUAL
LANGAGE
Website should load on all devices quickly and in the best
layout for the device at hand. Images and content should
be optimized for that device and load FAST.
Simplify and guide the user experience along a path of
online engagement (make a donation, become a member,
sign a petition, sign up for the newsletter, etc.).
Design and develop a common visual language that can be
used to create new microsites, campaign sites, and other
subdomains easily on the front and back end.
WEBSITE REDESIGN GOALS

9. 9
WHERE THE HECK
DO WE START???

12. METHODS OF DISCOVERY
AMNESTY
CONFERENCES
ONLINE SURVEY
STAKEHOLDER
WORKSHOPS
MEMBER LEADER /
VOLUNTEER CALLS
GROUP
INTERVIEWS
ONE-ON-ONE
INTERVIEWS
ANALYTICS HEATMAPPING
SEARCH ENGINE
RANKING

19. 19
A DESIGN SYSTEM FOR
ALL THE THINGS!!!

20. SUPPORT
THE BRAND
NATURALLY
AGILE
EASE OF USE
Because we’re a global brand we needed to look like we fit
in with other countries branding but not the same. Also
great for microsites.
All of the pieces of the building blocks are available to use
to make new solutions without sacrificing speed. Fits
nicely into an agile workflow.
Having a design system gives familiarity to the objects
provided right away for a user. It reinforces a recognizable
pattern the user can rely on for minimal decision making.
REASONS FOR A DESIGN SYSTEM

21. ATOMIC DESIGN

24. 24
ONE SYSTEM
TO RULE THEM ALL

25. 1 AMNESTY INTERNATIONAL TOOLKIT 2015
AMNESTY INTERNATIONAL VISUAL IDENTITY TOOLKIT
INSPIRING PEOPLE
TO TAKE INJUSTICE
PERSONALLY

30. ALL PRIORITIES
Our expertise and core work
Reducing & ending gun
violence
Defending refugees and
their rights
Holding police
accountable
Protecting human rights
defenders
We work both at home and across the world to tackle numerous
issues. Our core work is focused on:

34. ALL PRIORITIES
Our expertise and core work
Reducing & ending gun
violence
Defending refugees and
their rights
Holding police
accountable
Protecting human rights
defenders
We work both at home and across the world to tackle numerous
issues. Our core work is focused on:

43. 43
THE TECH STACK
OVERFLOWETH

46. FAITH IN
MAINTENANCE
EASIER
DEVELOPMENT
ROBUST
COMMUNITY
Plugins and core are regularly updated. Security updates
are flawless. Drupal upgrades were cumbersome and often
have breaking changes, even in Drupal 7 and 8.
We’ve experienced that smaller teams are able to get
bigger problems solved faster with WordPress. Dev
environments easy with MigrateDBPro, Pantheon, etc…
An abundance of experts and vendors to work with.
Support community always willing to help answer
questions and explain solutions. WORDCAMPS!!!!
REASONS WE MOVED TO WORDPRESS

48. SAGE STARTER THEME

53. 53
KEEP IT SIMPLE
AND SCSSY

61. Flexible Content
Repeater Fields

62. 62
LETS ENJOY SOME
CODE AND EXAMPLES

70. 70
THE FUTURE

71. MOBILE
APPLICATION
PUBLIC FACING
STYLE GUIDE
DESKTOP
APPLICATION
Launching a mobile application shortly. Built on top of the
Ionic Framework. We’re combining the Design System with
the native UI of Android and iOS.
Creating an interactive style guide with visual examples as
well as code for use with vendors and share our knowledge
of how we use the design system.
This Fall we’re creating a desktop application using
Electron that will sit in your operating system tray and
notify you when we need your help!
FUTURE OF THE DESIGN SYSTEM

73. 73
THANK YOU!!!
YOU’RE ALL AWESOME