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

▶
drupal admin ui modernization
SMART_READER_LITE
LIVE PREVIEW

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

Sep 29, 2023 507 likes •1.12k views

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

slide-1
SLIDE 1

Cristina Chumillas - Ymbra

DRUPAL ADMIN UI MODERNIZATION

slide-2
SLIDE 2

DRUPAL

ADMIN UI

MODERNIZATION

slide-3
SLIDE 3

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

slide-4
SLIDE 4

I N D E X

User studies Design System Wireframes UI design Initiative overview “New Seven”

slide-5
SLIDE 5

IN IT IAT IVE OVE RVIE W

slide-6
SLIDE 6

6

01DESIGN SYSTEM

Create a new "design system" for Drupal's editing and administrative interface, and implement this in incrementally.

02REACT APP

Create a decoupled, single-page React application that manages Drupal administration

03JS MODERIZATION

Modernize the underlying JavaScript code and enhance Drupal's APIs to better support all types of decoupled applications.

TODAY’S SESSION

T O P P R I O R I T I E S

slide-7
SLIDE 7

7

UX Research and User studies New design Seven refresh

DESIGN SYSTEM

WORK AREAS

slide-8
SLIDE 8

8

TIME LINE

SEPTEMBER 2017

DRUPALCON VIENNA

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

slide-9
SLIDE 9

DRUPALCAMP RUHR SEVEN REFRESH D.O. ISSUE CREATED MARCH 2018 ADMIN INFORMATION ARCHITECTURE

DRUPAL .ORG ISSUE AND TESTS

UX AND OTHER MEETINGS

Start Design System and define target as content authors Join efforts with IA team

MARCH 2018 MAY 2018

ADMIN UI & JAVASCRIPT MODERNISATION INITIATIVE
 CREATION

JS MODERNIZATION INITIATIVE

FRONTEND UNITED UTRECH

DRUPALCON NASHVILLE APRIL 2018

UX & User Tests plan starts

TWIN CITIES DRUPAL CAMP JUNE 2018

First User tests

DRUPAL DEV DAYS JULY 2018

Sprints

slide-10
SLIDE 10

10

FIRST WIREFRAMES PRESENTED SURVEY LAUNCH AUGUST 2018 CARD SORTING LAUNCH SEPTEMBER 2018 SEPTEMBER 2018

DRUPAL EUROPE

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

slide-11
SLIDE 11

DE S IG N SYS T E M

slide-12
SLIDE 12

SKETCH BY ROY SCHOLTEN

slide-13
SLIDE 13

U S E R S T U DIE S

slide-14
SLIDE 14

14

Comparative Study Card Sorting Wireframes Test Survey

August 2018 September 2018 Round 1 November 2018 delayed

T H E P L A N

Participants will get:

  • DrupalCon Seattle 2018 ticket thanks to the Drupal

Association

  • Free Drupal training by Evolving web
slide-15
SLIDE 15

15

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.

slide-16
SLIDE 16

16

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

slide-17
SLIDE 17

17

USER STUDIES

SURVEY

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

slide-18
SLIDE 18

18

USER STUDIES

CARD
 SORTING

+150 people completed the Card Sorting Goal: improve Information Architechture

slide-19
SLIDE 19

19

CONTENT APPEARANCE CONFIGURATION PEOPLE STRUCTURE

Similarity Matrix

slide-20
SLIDE 20

20

CONTENT APPEARANCE CONFIGURATION PEOPLE STRUCTURE

Dendogram

slide-21
SLIDE 21

21

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.

slide-22
SLIDE 22

22

USER STUDIES

COMPARATIVE STUDY

Wordpress with Gutenberg Craft CMS Contentful SquareSpace

slide-23
SLIDE 23

23

USER STUDIES

COMPARATIVE STUDY

Wordpress with Gutenberg Craft CMS Contentful SquareSpace

slide-24
SLIDE 24

RESULTS SPOILERS

Contentful

Intimidating, not for editors

Craft CMS

Interface seemed too simple to handle

SquareSpace WordPress Gutenberg

Interface prepared for editors Interface prepared for editors, complex features less prominent Terminology too complex UI too simple with no clues Confusion with difference from adding elements into the body field or outside like paragraphs. Confused Gutenberg editor by content preview

slide-25
SLIDE 25

25

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.

TAKEAWAYS

slide-26
SLIDE 26

W IR E FR AM E S

slide-27
SLIDE 27

27

DRUPAL EUROPE

WIREFRAMES PRESENTATION

slide-28
SLIDE 28

28

STRUCTURED AND UNUSTRUCTURED CONTENT

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 LANDING PAGE + PARAGRAPHS VS PREDEFINED STRUCTURE ROLE-BASED VISIBLE OPTIONS / EXTENDABLE

slide-29
SLIDE 29

CLASSIC FORM MODE

slide-30
SLIDE 30

TOP BAR

CLASSIC FORM MODE

slide-31
SLIDE 31

LEFT MENU FOR TOOLS

CLASSIC FORM MODE

slide-32
SLIDE 32

32

NEW “INLINE” FORM MODE

slide-33
SLIDE 33

33

NEW “INLINE” FORM MODE

INLINE BASIC EDITING FOR ELEMENTS

slide-34
SLIDE 34

34

NEW “INLINE” FORM MODE

ADVANCED EDITING OPTIONS FOR SELECTED ELEMENT

slide-35
SLIDE 35

NEW “INLINE” FORM MODE

LEFT MENU TOGGABLE

slide-36
SLIDE 36

NEW “INLINE” FORM MODE

LEFT MENU TO ADD NEW ELEMENTS

slide-37
SLIDE 37

37

NEW “INLINE” FORM MODE

slide-38
SLIDE 38

38

NEW “INLINE” FORM MODE

slide-39
SLIDE 39

BUT

slide-40
SLIDE 40

40

C O N T E N T P R E V I E W 
 P R O B L E M S

DECOUPLED PREVIEW SOLUTION REAL-TIME CONTENT PREVIEW REAL FRONTEND PREVIEW + LAYOUT&MOVING ELEMENTS RESPONSIVE PREVIEW

slide-41
SLIDE 41

NEW “INLINE” FORM MODE

slide-42
SLIDE 42

SIDE BY SIDE MODE

slide-43
SLIDE 43

SIDE BY SIDE MODE

slide-44
SLIDE 44

U I DE S IG N

slide-45
SLIDE 45

45

DEGIGN WORKFLOW

FIGMA

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

slide-46
SLIDE 46
slide-47
SLIDE 47

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

slide-48
SLIDE 48

C O M P O N E N T S

slide-49
SLIDE 49

C O M P O N E N T S

slide-50
SLIDE 50

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

slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53
slide-54
SLIDE 54

S E VE N R E FR E S H

slide-55
SLIDE 55
slide-56
SLIDE 56

G E T IN VO LVE D

slide-57
SLIDE 57

UX RESEARCH AND USER STUDIES

#admin-ui

SEVEN REFRESH REACT APP AND JAVASCRIPT MODERNIZATION DESIGN SYSTEM AND UI DESIGN

#javascript drupalux/seven jsdrupal/drupal- admin-ui Mondays
 18:30h-19:30h CEST Wednesdays
 15:30h-16:30h CEST

slide-58
SLIDE 58

Sascha Eggenberger Archita Arora Dennis Cohn Ricardo Marcelino Balazs Kantor Lewis Nyman

THANKS TO

Suzanne Dergacheva Roy Scholten Antonella Severo Sarah Lowe Michelle Jackson Jessica Becker

slide-59
SLIDE 59
slide-60
SLIDE 60

THANK YOU

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