How Amnesty International Uses Design Systems and Advanced Custom Fields to Win on the Web
1 like446 views
The document discusses the use of design systems and advanced custom fields in web development, focusing on optimizing user engagement and creating a consistent visual language for various platforms. It highlights the transition from Drupal to WordPress for easier maintenance and development, emphasizing the importance of a flexible design system to enhance user experience. Future plans include launching a mobile application and a desktop app, both integrating the design system to streamline interactions.
How Amnesty International Uses Design Systems and Advanced Custom Fields to Win on the Web
- 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:
- 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
- 53. 53 KEEP IT SIMPLE AND SCSSY
- 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