Continuous Design - Vision

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

1

7

Develop / Test

Deploy Release

(Translate)

8

Deploy ReleaseDevelop / Test

(Translate)

10

Deploy Release

A LEAN vision for UI design and delivery

Continuous Design

Steve Henty, UI Architect / UX Designer

12

In the beginning…

BuildBuildDevDev TestTest DeployDeploy

Continuous Integration

BuildBuild DeployDeployDevDev TestTest



w/PSI


BuildBuildDevDev TestTest

w/PSI

DeployDeploy

Continuous Delivery

BuildBuild DeployDeployDevDev TestTest BuildBuild DeployDeployDevDev TestTest

Design+

Continuous Delivery

BuildBuild DeployDeployDevDev TestTestDesignDesign

Design, Validate+

Continuous Delivery

DesignDesign ValidateValidateBuildBuild DeployDeployDevDev TestTest

Research, Design, Validate+

Continuous Delivery

DesignDesignResearch /

SketchResearch /

SketchValidateValidate


Continuous…?

Design

DesignDesignResearch /

SketchResearch /



Continuous Design

BuildBuild DeployDeployDevDev TestTestDesignDesignResearch /

SketchResearch /

Sketch

ValidateValidate

Continuous Design


SketchResearch /

Sketch

w/ Mocks

ValidateValidate

(Cont. Integration)


SketchResearch /


Continuous Design

DeployDeploy

ValidateValidate


SketchResearch /


Continuous Design

w/ Feature Bits(Cont. Delivery)


SketchResearch /

Sketch

Continuous Design

ValidateValidate

ValidateValidate


SketchResearch /

Sketch

Continuous Design

w/ Feature Bits

ValidateValidate

ReleaseRelease


SketchResearch /

Sketch

Continuous Design

w/ Feature Bits

ValidateValidate

ReleaseRelease

w/ UI Usage Metrics

Why Continuous Anything?

Continuous Integration Code Quality

Continuous Delivery Value Frequency

Continuous Design ?

Why Continuous Anything?

Continuous Integration Code Quality

Continuous Delivery Value Frequency

Continuous Design Design Fidelity

How?

Tools

Resources

Commitment

Tools

Model-View-Controller (MVC) framework

Designer-friendly Views

Re-usable, de-coupled CSS

Re-usable, de-coupled components

Tools…MV★: AngularJS

•Decoupled, Mock-able View

•Declarative HTML Layout / Templates

•Composite views

•Robust presentation-layer data transforms

Tools…Re-usable CSS: SASS / LESS•CSS Variables

•CSS Functions / mixins

•Semantic CSS classes

•Responsive layout (Bootstrap)

•Flexible layout (Material / flexbox)

Tools…Re-usable Components: Polymer, React, native

•CSS Variables

•CSS Functions / mixins

•Semantic CSS classes

•Responsive layout (Bootstrap)

•Flexible layout (Material / flexbox)

Resources

Coding Standards

Validated Components

UI Developers

Mock Data

Resources…Coding Standards

•CSS / Naming conventions: BEM

•i18N / L10N UI string management

•Integrated UI “control surface” usage logging

Resources…Validated Components

•User tested / validated

•Technically feasible

•Pre-implemented

•Configurable

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

Resources…Mock Data

• Production Sample•Random / representative

•Sterilized

•Isolated

• Usability / Prototype Samples•Based on Personas

• Coverage Samples•Boundary conditions

Commitment

Unit / Integration Tests

Continuous Integration / Delivery

Declarative, Mock-able View Bindings

Configurable UI Components

UI usage tracking

Continuous Design - Vision

Design

Transcript of Continuous Design - Vision