In this talk you'll see how one of Automattic's team, Hyperion, worked to bring to life the first version of the Theme Showcase for the Calypso modern infrastructure — open-sourced in 2015.

1. Davide ‘Folletto’ Casali
THE MAKING OF CALYPSO
A TEAM PERSPECTIVE

2. Manifesto Ibridi
F E L L O W
UX REDIRECTOR ADVISOR
NIGHT.EU

3. @Folletto

4. CALYPSO
PART I

5. WordPress
OPENSOURCE CORE
Calypso
REST API
Front-End
Theme
ADMIN USER SITE USER

6. FRAMEWORK
NOTIFICATIONSWIDGETS
CATEGORIESTAGS
USERSMENUS
SHARECUSTOMIZE
MEDIATHEMES
STATSCOMMENT
PAGESPOSTS
AUTHENTICATIONNAVIGATION

7. CALYPSO BEFORE CALYPSO
TIMELINE
Open Source v1
~20 months
Prototype
~3 months
Wireframe
~1 month
previous
work

8. 127
Contributors
26,030
Commits
6,915
Reviews
March 2014 → November 2015 (20 months)

9. …how did you do that?
You’re fully distributed…

10. Communication is
Oxygen
Good, social, efficient

11. ~470
People
worldwide
~160k
Messages
per week
~1,000
Deployments
per week

12. Highly Independent
Individuals
Initiative and motivation

14. HYPERION

15. FRAMEWORK
NOTIFICATIONSWIDGETS
CATEGORIESTAGS
USERSMENUS
SHARECUSTOMIZE
MEDIATHEMES
STATSCOMMENT
PAGESPOSTS
AUTHENTICATIONNAVIGATION

16. THEME SHOWCASE
PART II

17. Themes

18. v2.0

19. THX

20. v4.0v4.0

21. 3 codebases
DIFFICULT
TO MAINTAIN
3 designs
PAINFUL
FOR USERS

22. Create one single
Theme Showcase
for WordPress.com

23. LET’S BUILD
PART III

24. Meetups:
face time is important
Know your people

25. MEETUP IN VIENNA HYPERION
14 April 2015

27. Pains Goals

28. Epic Planning
Only user-facing
features
One
major feature
Many smaller
details & fixes
EACH MILESTONE HAS:

30. “
”
Steve Seear, Hyperion
I found this session really valuable.
It was intense, challenging,
and led on to a lot more discussions.

31. “
”
Miguel Fonseca, Hyperion
+1000 on the value and ROI
of our meetup exercises.

32. Focus on
one thing
Communicate it well

33. FIRST MILESTONE
PART IV

36. Clear
Communication Spaces
Each with a need

37. Slack
Realtime
P2 Theme
Async
Wiki Theme
Stable
P2 W

39. TEXT STANDUP
POSTED ON SLACK

40. INITIAL ROADMAP
POSTED ON TEAM P2

41. MASTER THREAD
POSTED ON TEAM P2

42. DESIGNITERATION1

43. DESIGNITERATION2

44. DESIGNITERATION3

45. DESIGNITERATION4

46. DESIGNITERATION5

47. ITERATIONS POSTED ON P2

48. TRANSPARENT FEEDBACK
25
11
15
10
28
9
1
16

50. In Progress
Ready to Merge
Needs Review

51. Needs Design Review
In Progress
Ready to Merge
Needs Review

52. Transparency
across all teams
Everything is visible

53. Horizon
External Testing
JULY 21JULY 15
Automattic
Internal Testing
horizonfeedback.wordpress.com

54. M1 LAUNCHED
3 August 2015

55. THEME SHOWCASE M1
IN NUMBERS
5
Design
Iterations
11
Horizon
Testers
6
Automattic
Testers
100+
Feedbacks &
Comments
124
GitHub
Tickets
85
GitHub
Pull Requests

56. THEME SHOWCASE M1
TIMELINE
LIVE
~3.5 months
Meetup
4 days

57. THEME SHOWCASE M1
SALES CHECK

58. PRINCIPLES
PART V

59. THE REMOTENESS CONTINUUM
Distributed
100%
Local
100%
Remote
in between

60. A separate floor, office, city, country…
MAKES THE COMPANY
ALREADY REMOTE

61. Communication is
Oxygen
Highly Independent
Individuals
Meetups:
face time is important
Focus on
one thing
Clear communication
spaces
Transparency
across all teams
1 2 3
4 5 6

62. “
”
Bruno Munari
To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few are able to simplify.

63. Thanks.
@Folletto
INTENSEMINIMALISM.COM