DRUPAL ADMIN UI MODERNIZATION Cristina Chumillas - Ymbra DRUPAL - PowerPoint PPT Presentation

DRUPAL ADMIN UI MODERNIZATION Cristina Chumillas - Ymbra

DRUPAL ADMIN UI MODERNIZATION

C R I S T I N A C H U M I L L A S D E S I G N E R & D R U P A L F R O N T E N D @chumillas ckrina

I N D E X Initiative overview Design System User studies Wireframes UI design “New Seven”

IN IT IAT IVE OVE RVIE W

T O P P R I O R I T I E S 01 DESIGN SYSTEM 02 REACT APP 03 JS MODERIZATION TODAY’S SESSION Create a decoupled, single-page Create a new "design system" Modernize the underlying React application that manages for Drupal's editing and JavaScript code and enhance Drupal administration administrative interface, and Drupal's APIs to better support implement this in incrementally. all types of decoupled applications. 6

DESIGN SYSTEM WORK AREAS UX Research and New design Seven refresh User studies 7

TIME LINE JS FIRST ISSUE ON DRUPAL.ORG TO MODERNIZATION REFRESH THE ADMIN UI INITIATIVE AUGUST 2017 DRUPALCON VIENNA SEPTEMBER 2017 REACT CHOSEN FOR THE NEW ADMIN UI FIRSTS BOF & SPRINTS ADMIN UI 8

JS ADMIN UX AND OTHER MODERNIZATION INFORMATION MEETINGS INITIATIVE ARCHITECTURE Start Design System and define DRUPAL .ORG target as content authors ISSUE AND TESTS DRUPALCAMP RUHR MARCH 2018 Join efforts with IA team SEVEN REFRESH D.O. ISSUE CREATED MARCH 2018 DRUPALCON NASHVILLE APRIL 2018 UX & User Tests plan starts FRONTEND UNITED UTRECH MAY 2018 TWIN CITIES DRUPAL CAMP JUNE 2018 ADMIN UI & JAVASCRIPT First User tests MODERNISATION INITIATIVE 
 CREATION DRUPAL DEV DAYS JULY 2018 Sprints

SURVEY LAUNCH AUGUST 2018 CARD SORTING LAUNCH SEPTEMBER 2018 DRUPAL EUROPE SEPTEMBER 2018 FIRST WIREFRAMES PRESENTED SET 8.7 AS TARGET FOR SEVEN REFRESH NEW SEVEN DEVELOPMENT STARTS NOVEMBER 2018 CHANGE WIREFRAMES DIRECTION NOVEMBER 2018 COMPARATIVE STUDY STARTS NOVEMBER 2018 DRUPAL.ORG ISSUE WITH SEVEN REFRESH COMPONENTS PROPOSAL 10

DE S IG N SYS T E M

SKETCH BY ROY SCHOLTEN

U S E R S T U DIE S

Survey Card Sorting T H E P L A N August 2018 September 2018 Participants will get: - DrupalCon Seattle 2018 ticket thanks to the Drupal Association Comparative Wireframes - Free Drupal training by Evolving web Study Test Round 1 delayed November 2018 14

USER STUDIES SURVEY WHAT’S REWARDING ABOUT DRUPAL? It’s flexible and customizable Editors like that Drupal allows them to have control over their content. 15

USER STUDIES SURVEY WHAT’S CHALLENGING ABOUT USING DRUPAL? Flexibility & customization cause complexity , specially Paragraphs. Difficult to find documentation Working with media Finding what content to edit 16

WHAT CAN WE IMPROVE ABOUT THE CONTENT USER STUDIES SURVEY EDITORIAL EXPERIENCE? A more modern UI (Gutenberg and SquareSpace mentioned) Simplifying the complexity of the content editing UI Better media management Improvements to the WYSIWYG editor More role-based configuration for content editors 17

USER STUDIES CARD 
 SORTING +150 people completed the Card Sorting Goal: improve Information Architechture 18

Similarity Matrix CONTENT APPEARANCE CONFIGURATION PEOPLE STRUCTURE 19

Dendogram APPEARANCE PEOPLE STRUCTURE CONTENT CONFIGURATION 20

USER STUDIES CARD 
 SORTING Results similar to what we have now. Participants described themselves as content authors, but most of them were also site builders with Experience with current Drupal IA. 21

USER STUDIES COMPARATIVE STUDY Wordpress with Gutenberg Craft CMS Contentful SquareSpace 22

USER STUDIES COMPARATIVE STUDY Wordpress with Gutenberg Craft CMS Contentful SquareSpace 23

RESULTS SPOILERS WordPress Contentful Craft CMS SquareSpace Gutenberg Intimidating, not for Interface prepared for Interface seemed too Interface prepared for editors editors simple to handle editors, complex features less prominent Confusion with difference from adding UI too simple with no Confused Gutenberg Terminology too complex elements into the body clues editor by content preview field or outside like paragraphs.

TAKEAWAYS More complex UI is expected for more complex sites Content editor-friendly Dashboard and terminology smooth the learning process Publishing anxiety. Editors fear consequences of clicking Save button. 
 Autosave and clear workflow can help. Editors want clear state of the content options for Preview, Save and Publish. 25

W IR E FR AM E S

DRUPAL EUROPE WIREFRAMES PRESENTATION 27

STRUCTURED AND UNUSTRUCTURED CONTENT LANDING PAGE + PARAGRAPHS VS PREDEFINED STRUCTURE C O N S T R A I N S DECOUPLED WITH DIFFERENT FRONTENDS SIMPLIFY INTERFACE GIVING SAME FLEXIBILITY DESKTOP FIRST SAME BASE FOR SIMPLE & COMPLEX FORMS ROLE-BASED VISIBLE OPTIONS / EXTENDABLE 28

CLASSIC FORM MODE

TOP BAR CLASSIC FORM MODE

LEFT MENU FOR TOOLS CLASSIC FORM MODE

NEW “INLINE” FORM MODE 32

INLINE BASIC EDITING FOR ELEMENTS NEW “INLINE” FORM MODE 33

ADVANCED EDITING OPTIONS FOR SELECTED ELEMENT NEW “INLINE” FORM MODE 34

LEFT MENU TOGGABLE NEW “INLINE” FORM MODE

LEFT MENU TO ADD NEW ELEMENTS NEW “INLINE” FORM MODE

NEW “INLINE” FORM MODE 37

NEW “INLINE” FORM MODE 38

BUT

RESPONSIVE PREVIEW C O N T E N T DECOUPLED PREVIEW SOLUTION P R E V I E W 
 P R O B L E M S REAL-TIME CONTENT PREVIEW REAL FRONTEND PREVIEW + LAYOUT&MOVING ELEMENTS 40

NEW “INLINE” FORM MODE

SIDE BY SIDE MODE

SIDE BY SIDE MODE

U I DE S IG N

DEGIGN WORKFLOW FIGMA DESIGN, PROTOTYPE, AND GATHER FEEDBACK ALL IN ONE PLACE WITH FIGMA. 45

FIRST STYLE GUIDE VERSION WEEKLY COMPONENTS REVIEW MVP COMPONENTS TO KICK OFF SEVEN ACCESSIBILITY REVIEW ROUND 2 EXTERNAL DESIGNERS REVIEW DRUPAL.ORG ISSUE TO GATHER FEEDBACK NOVEMBER - DECEMBER 2018

C O M P O N E N T S

C O M P O N E N T S

C O M P O S I T I O N S

S E VE N R E FR E S H

G E T IN VO LVE D

UX RESEARCH AND SEVEN REFRESH REACT APP AND DESIGN SYSTEM AND USER STUDIES JAVASCRIPT UI DESIGN MODERNIZATION drupalux/seven jsdrupal/drupal- admin-ui #admin-ui #javascript Mondays 
 Wednesdays 
 18:30h-19:30h 15:30h-16:30h CEST CEST

THANKS TO Sascha Eggenberger Suzanne Dergacheva Archita Arora Roy Scholten Dennis Cohn Antonella Severo Ricardo Marcelino Sarah Lowe Balazs Kantor Michelle Jackson Lewis Nyman Jessica Becker

THANK YOU This is a dream of mine that I have just dreamed. Just see your smiling face everywhere I go