The current state of the Drupal Admin UI Redesign 9th March 2019

Sascha Eggenberger Design Unicorn at Unic Drupal.org/u/saschaeggi @saschaeggi

Cristina Chumillas Drupal Dreamer at Ymbra Drupal.org/u/ckrina @chumillas

Archita Arora’s Session

Zero lines of code given.

Initiative Overview User Studies Drupal Design System New Admin UI Theme New content editor experience

Initiative Overview

Why all this?

The Drupal Administration didn’t had a refresh in years

” […] Drupal’s administration UI looks outdated and it’s preventing Drupal agency owners from selling Drupal […] dri.es/refreshing-the-drupal-administration-ui

Admin UI and JavaScript Modernisation Initiative d.org/about/strategic-initiatives/admin-ui-js

DRUPAL CORE JS CHANGES IN CORE JS APP UX CHANGES IN CORE USER RESEARCH UI CHANGES IN CORE DRUPAL DESIGN SYSTEM

In the short term, we plan on updating the existing Admin UI with the new design system

In the longer term, we are working on creating a completely new JavaScript-based administration UI

User Studies

Comparative Study Survey Card Sorting Wireframes testing

Survey

What can we improve about the content editorial experience?

→ Modern looking UI → Simplify complex editing experience → Better Media management → More content-role configuration for editors

Card sorting Improve Information Architecture

Comparative Study A. Wordpress with Gutenberg B. Craft CMS

Drupal Design System

powerful empathetic, responsive clear, clean, concise accessible, transparent friendly, respectful

Base

Modular scale MAJOR SECOND - 8:9 - 1.125

We use system fonts font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen-Sans”, “Ubuntu”, “Cantarell”, “Helvetica Neue”, sans-serif;

Accessible colors

Components

What are design components?

Component based Design is the practice of splitting the UI into smaller, more manageable parts with clear names

Components are ireusablei

Components can ievolve over time

Iterative process

The story of a button… https://giphy.com/gifs/hd-Dqmts7W3iiRkA

Specifications

Collaborative Design Tool

Figma

Open Design System

https://www.figma.com/file/Oq WgzAluHtsOd5uwm1lubFeH/D esign-system?node-id=2442% 3A724&viewport=532%2C105 0%2C0.0978964

https://thumbs.gfycat.com/FelineBareGardensnake-max-1mb.gif

https://bit.ly/2Gk1ItH

The new Admin UI

Meet Claro

A ibetteri Mobile Experience

Accessibility is i!important;i

Exciting, right? https://media1.giphy.com/media/l46CkATpdyLwLI7vi/giphy-downsized.gif

But when will Claro ship?

Test version iSpring 2019i

Experimental theme iDrupal Core 8.8.0i* December 2019, d.org/core/roadmap

We won’t stop there…

A new content editor experience https://i.imgur.com/V4O01t8.gif

Even more exciting, right? https://fansofdavid.com/wp-content/uploads/2014/06/tumblr_mjl02zysKA1r0k70yo1_500.gif

Get your hands on!

Help wanted! d.org/project/claro https://giphy.com/gifs/sad-baby-crying-8ykJ4yAnwgK2I

Drupal Design System #admin-ui-design UX Research and User studies #admin-ui Figma Wednesdays, 8pm IST Claro React App & JS Modernization #admin-ui #javascript d.org/project/claro github.com/jsdrupal/ drupal-admin-ui Mondays, 11pm IST

Any Questions? Questions? https://giphy.com/gifs/snl-saturday-night-live-season-42-l0Ex7QyrZeDd2GBLq

https://media.giphy.com/media/xULW8wG4l2XMmMkjzq/giphy.gif