A vision for the next step in the evolution of Continuous Integration and Continuous Deployment: Continuous Design. [NOTE: Animations in the front-matter do not come through. Skip to slide 12 or 30 for text] Continuous Design eliminates the translation and timing gap between traditional user-centered design and application development. When the design is validated through usability testing, the development is already done and ready for deployment.

1. A Designer, a Developer, and a
Researcher walk into a usability lab...
1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7
Develop / Test Deploy Release
(Translate)

8. 8
Deploy ReleaseDevelop / Test
(Translate)

9. 9

10. 10
Deploy Release

11. 11

12. A LEAN vision for UI design and
delivery
Continuous Design
Steve Henty, UI Architect / UX Designer
12

13. In the beginning…
BuildBuildDevDev TestTest DeployDeploy

14. Continuous Integration
BuildBuild DeployDeployDevDev TestTest

15. Continuous Integration
BuildBuild DeployDeployDevDev TestTest
w/PSI

16. Continuous Integration
BuildBuildDevDev TestTest
w/PSI
DeployDeploy

17. Continuous Delivery
BuildBuild DeployDeployDevDev TestTest BuildBuild DeployDeployDevDev TestTest

18. Design
+
Continuous Delivery
BuildBuild DeployDeployDevDev TestTest
DesignDesign

19. Design, Validate
+
Continuous Delivery
DesignDesign ValidateValidate
BuildBuild DeployDeployDevDev TestTest

20. Research, Design, Validate
+
Continuous Delivery
DesignDesignResearch /
Sketch
Research /
Sketch ValidateValidate
BuildBuild DeployDeployDevDev TestTest

21. Continuous…?
Design

22. DesignDesignResearch /
Sketch
Research /
Sketch ValidateValidate
BuildBuild DeployDeployDevDev TestTest
Continuous Design
BuildBuild DeployDeployDevDev TestTestDesignDesignResearch /
Sketch
Research /
Sketch
ValidateValidate

23. Continuous Design
BuildBuild DeployDeployDevDev TestTestDesignDesignResearch /
Sketch
Research /
Sketch
w/ Mocks
ValidateValidate
(Cont. Integration)

24. BuildBuild DeployDeployDevDev TestTestDesignDesignResearch /
Sketch
Research /
Sketch ValidateValidate
Continuous Design
DeployDeploy
ValidateValidate

25. BuildBuild DeployDeployDevDev TestTestDesignDesignResearch /
Sketch
Research /
Sketch ValidateValidate
Continuous Design
w/ Feature Bits
(Cont. Delivery)

26. BuildBuild DeployDeployDevDev TestTestDesignDesignResearch /
Sketch
Research /
Sketch
Continuous Design
ValidateValidate
ValidateValidate

27. BuildBuild DeployDeployDevDev TestTestDesignDesignResearch /
Sketch
Research /
Sketch
Continuous Design
w/ Feature Bits
ValidateValidate
ReleaseRelease

28. BuildBuild DeployDeployDevDev TestTestDesignDesignResearch /
Sketch
Research /
Sketch
Continuous Design
w/ Feature Bits
ValidateValidate
ReleaseRelease
w/ UI Usage Metrics

29. Why Continuous
Anything?
Continuous Integration  Code Quality
Continuous Delivery  Value Frequency
Continuous Design  ?

30. Why Continuous
Anything?
Continuous Integration  Code Quality
Continuous Delivery  Value Frequency
Continuous Design  Design Fidelity

31. How?
Tools
Resources
Commitment

32. Tools
Model-View-Controller (MVC)
framework
Designer-friendly Views
Re-usable, de-coupled CSS
Re-usable, de-coupled components

33. Tools…
MV★: AngularJS
• Decoupled, Mock-able View
• Declarative HTML Layout / Templates
• Composite views
• Robust presentation-layer data transforms

34. Tools…
Re-usable CSS: SASS
/ LESS• CSS Variables
• CSS Functions / mixins
• Semantic CSS classes
• Responsive layout (Bootstrap)
• Flexible layout (Material / flexbox)

35. Tools…
Re-usable
Components:
Polymer, React,
native
• CSS Variables
• CSS Functions / mixins
• Semantic CSS classes
• Responsive layout (Bootstrap)
• Flexible layout (Material / flexbox)

36. Resources
Coding Standards
Validated Components
UI Developers
Mock Data

37. Resources…
Coding Standards
• CSS / Naming conventions: BEM
• i18N / L10N UI string management
• Integrated UI “control surface” usage logging

38. Resources…
Validated
Components
• User tested / validated
• Technically feasible
• Pre-implemented
• Configurable

39. Resources…
UI Developers
• Implement UI components
• Liaise with UX / DEV
•Inform / explore technical feasibility
•Prototype support
•Integration assistance / consultation
• Central Governance model
•Promote UI standards and best practices
•Selective embedding with scrum teams

40. Resources…
Mock Data
• Production Sample
•Random / representative
•Sterilized
•Isolated
• Usability / Prototype Samples
•Based on Personas
• Coverage Samples
•Boundary conditions

41. Commitment
Unit / Integration Tests
Continuous Integration / Delivery
Declarative, Mock-able View Bindings
Configurable UI Components
UI usage tracking