Reimagining wp-admin

An inside look at the design process behind the Calypso project, a React based interface used to power the admin layer of WordPress.com.

We'll be diving into the design history of the project starting from when Automattic first started looking into creating a new wp-admin all the way up to a year and a half after Calypso was open sourced. We'll also take a look at some concepts on what it's like to bring the media library into a modern, product focused context.

Talk was given originally at the WordPress.com VIP workshop 2017 by Adam Becker - product designer at Automattic.

Transcript

1. R E I M A G I N I N G R E I M A G I N I N • R E I M A G I N I • • R E I M A G I N • • • R E I M A G I • • • • R E I M A G • • • • • R E I M A • • • • • • R E I M • • • • • • • R E I • • • • • • • • R E • • • • • • • • • R • • W P - A D M I N VIP Workshop 2017 Adam Becker
2. O U T L I N E 01.Organizational structure 02.Calypso history 03.Design workflow 04.Media library 05.Tips & tricks
3. O A R T G I A O N N I A Z L S T R U C T U R E 01.
4. D • • • • • • • • D D • • • • • • • • • • • • • • • • • • • • • • • • • D D D D D D D • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • D D D D D D D D D D D D D D D D D D D D D • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • start present near future far future
5. C L P O A Y S A Y S C L P O 02.
6. open-source WordPress.com 0 0 0 0 1 1 1 1 A redesign of the WordPress dashboard using a single-page web application, powered by the WordPress.com REST API. • • • • • • 0 1 A single interface to manage all your WordPress.com or Jetpack-enabled sites.
7. • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • “H4” ~N-4 - Single theme • - WordPress.com • • “Newdash” ~2011 - Javascript • - Powered by “H4” • • “Atlas” 2013 - Reboot • - API driven - SPA - Backbone • • “Explore” 2013 - Rendr • - Ember - React - Vanilla • • UX 2014 - React • - Pseudo-code • • PRE-OSS 2015 - Redux • - Prod-code - API data - Dummy data “Calypso” • • WP-CALYPSO 2015+ - Jetpack • - Product focus - Plugins - PHP - jQuery / Ajax
8. 03. D E S I G N • • • • W O F L R K O W 03.01.calypso-ux 03.02.calypso-pre-oss 03.03.wp-calypso
9. wp-admin * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
10. calypso-ux * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
11. calypso-pre-oss ^ • < > ^ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
12. * * * * * * ^ • * > * * * * ^ * ^ * * < * * * * * * * * ^ < * • ^ > * • > * * > * < * * ^ * * * * * * * * * * * * * * * ^ * * * * < * • ^ * * * * * * * * wp-calypso
13. * * * * * * ^ • * > * * * * ^ * ^ * * < * * * * * * * * ^ < * • ^ > * • > * * > * < * * ^ * * * * * * * * * * * * * * * ^ * * * * < * • ^ * * * * * * * * wp-calypso++ * * * * * * ^ • * > * * * * ^ * ^ * * < * * * * * * * * ^ < * • ^ > * • > * * > * < * * ^ * * * * * * * * * * * * * * * ^ * * * * < * • ^ * * * * * * * * * * * * * * ^ • * > * * * * ^ * ^ * * < * * * * * * * * ^ < * • ^ > * • > * * > * < * * ^ * * * * * * * * * * * * * * * ^ * * * * < * • ^ * * * * * * * *
14. S \ | / — — / | \ goals - Wholistic view - Iterate quickly - Exposure - Standard toolset calypso-ux - Pseudo code +2,009 -1,568 S \ | / — — / | \ +1,309 -895 S \ | / — — / | \ +1,698 -3,208 screens S \ | / — — / | \ +1,309 -895 S \ | / — — / | \ +1,698 -3,208 / stats / posts / pages / themes / people / menus / sharing / … how’s it look?
15. calypso-ux • • • select inventory branch • • • • • • • branch branch PR • • • PR • • • • • • discuss • • • PR • • • • • discuss • / / • • • merge + let’s build a screen • url wp-admin option 1 option 2 option 3 borrow huzzah!
16. calypso-ux Consistency - What we need next - Fast to try UIs What we got - Separation of concerns - Chance to experiment - Learn React Production code - Real data - Standardized workflow -
17. calypso-pre-oss components / accordion / banner / button / date-picker / gauge / section-nav / site-selector / … — — — — | | | — — — | — | — — | | — — — — — | — — | | — — | • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • goals - Standardization - Re-use - Consistency - Focus - Cross-team comms fill the gaps
18. calypso-pre-oss let’s build a feature • • • select inventory gap/feature use cases • • • suggest ui proposal • • • branch self-contained • • • review iterate • • • • • • • • • • • • • • • merge component • + • • • • • • branch use case 2 branch use case 1 branch use case 3 • • • • merge use case + • • • discuss best use • • • identify additions / • • • • • • merge use case +
19. calypso-pre-oss Flow focus - What we need next - Library of components What we got - Established dev process - Data hooks - Less repetition New user experience - Identify usage patterns - User testing practices -
20. wp-calypso flows / purchase-domain / adjust-language / upgrade-plan / schedule-post / find-theme / adjust-nav / sign-up / … goals - Polish rough edges - Reduce friction - Establish drop-offs - Dive into metrics - Business goals follow the flows • • • • • M • • • • • • • • • • • • M • • • • • S M • S • • • • • • M • • • • • • S • • • • • • • • • • • • • • • • • S • S • S • • • • • • S • M • • • • • • • S • •
21. wp-calypso • • • select flow let’s refine a flow research current flow • • • identify critical paths • • • inventory component library • • • concept large scope • • • • • • • • • breakdown organization • • prototype fidelity ranges • • • • • interface components data requirements • • • • • • • • merge env. depending • • • • • + horizon env. test • • • • • enable production • measure Tracs refine A / B test • •
22. wp-calypso Expand product bounds - What we need next - Smoother flows What we got - Design process - Testing protocols - Metrics Inclusivity - Audience focus - Support marketing -
23. 04. L I B R A R Y M E D I A M E D I A M E D I A M E D I A M E D I A M E D I A M E D I A
24. I wish we could make folders on @wordpressdotcom for our photos/media. It would be so much more convenient. “ Interested in moving our website to WordPress. Any plans to have a folder structure in the media library as standard? “ I’d love to be able to delete multiple images at once. Just uploaded a bunch of accidental duplicates. “ Honestly, just any option for sorting and finding images when writing posts would be of benefit. Trying to sort through the photos is very hard when the only sort options seem to be date uploaded. “ Anything to assist searching through hundreds and hundreds of images. “ I’d like some assistance in finding quality photos. “
25. - Organize images Focused flows - Find images - Edit images Entry point - Hard to parse - Quickly overwhelming - Rough edges
26. W E A E T E D W H N 01.Dedicated section 02.Image editing 03.Robust search 04.Bulk deletion 05.Organization 06.Sources
27. C N O C E T P S 01.Collections
28. C N O C E T P S 02.Default organization
29. C N O C E T P S 03.Sourcing
39. I T 01.Dedicated section 02.Image editing 03.Robust search 04.Bulk deletion 05.Organization 06.Sources I S O W H O G N G I
40. 05. 05.01.flow.vs.screen—based 05.02.component-reuse 05.03.small-focused-prs T I P S T R I C K S & & & & & & 05.04.documentAll
41. Y O U T H A N K VIP Workshop 2017 Adam Becker github.com/Automattic/wp-calypso @adambbecker