1. Oleg Pimenov, Tatyana Rodionova
Continuous Integration for Continuous Delivery: a positive practice from Positive Technologies
Oleg Pimenov, Tatyana Rodionova

2. About Us Oleg Pimenov Head of the User Interface Development
Tatyana Rodionova Head of the User Assistance Department, leading Global Content Management and Localization

3. Agenda About us “Telestrations” is the way we used to work
Continuous Integration in UI Development
Content Reuse Platform: how it works
Future plans

4. Takeaway Idea of a Content Reuse Platform
Links to all the technologies we used
Positive Direction for the most active attendees 
The idea of a Content Reuse Platform to share with your colleagues in UX and UI.
Links to all the technologies we used to create our Content Reuse Platform.
A Positive Direction for the most active attendees  to trigger positive changes in your companies.

5. About Positive Technologies
Leading global provider of
enterprise security solutions for vulnerability and compliance management
incident and threat analysis
application protection
Teams distributed across 7 countries
Provides products and services to clients around the world
We are a multi-product company with a quarterly release cycle, focused on providing very flexible software and services (vulnerability research, penetration testing).
10+ products
Release Cycle – quarter
Product Localizations: Russian, English, Korean
Each release of a product includes from 10 to 16 features, 80 percent of the feature list affects the user interface.
Within a quarter, we have to go through a full release cycle to deliver a new version of a product to the client. With a distributed development team, we realize that it is not possible to ensure continuous delivery without modern practices and technologies.
Industrial Control Systems
Telecom
Banking
Web Applications
ERP Security

6. Some Terminology
Continuous Integration is a practice of integrating new or changed code frequently.
Continuous Delivery is production of software in short cycles, ensuring that it can be reliably released at any time.
User Experience (UX) is how users interact with software given the user’s personal background and preferences.
User Interface Development (UI) is a process of programming a software user interface.
User Assistance (UA) is documentation, help, and any other form of content aimed to help people use software.
Continuous Integration is a software development practice where members of a team integrate their work frequently. Each person integrates at least daily - leading to multiple integrations per day. Each integration is verified by an automated build (including testing) to detect integration errors as quickly as possible. Many teams find that this approach leads to significantly fewer integration problems and allows them to develop cohesive software more rapidly.
Continuous Delivery is a natural extension of Continuous Integration, an approach in which teams ensure that every change to the system is releasable, and release any version with the push of a button. Continuous Delivery aims to make releases boring, so that we can deliver frequently and get quick feedback on what users care about.

7. Planning to play Telestrations with the audience to illustrate how different processes can affect product deliverables if they are not integrated continuously in each other.
Four people are invited to the stage (1 – UX role, 1 – UI role, 1 techwriter, and 1 translator). The only way of communication between all team members is to draw and write. They are not allowed to talk or whisper.
1. Tatyana (as business analyst) announces the «name of a feature» that must be included in the next product release (for example, Notification Center) by writing it on the Sketchboard.
2. The UX designer must draw a picture on the Sketchboard that illustrates this feature and give it to the UI developer.
3. The UI developer must name the picture, write this name on the Sketchboard, and give it to the technical writer.
4. The technical writer must draw a picture for the name provided by the UI developer and give it to the translator.
5. The translator must name the picture from the technical writer, write this name on the Sketchboard, and give it to Oleg.
6. Oleg announces the name of the feature we provide to our customer and we together compare the initial idea from the business analyst and the result delivered by developers.
All attendees on the stage receive Positive Balls as a gift.

8. How We Used to Work on User InterfaceUX UI UA
Mockup Structure
Initial UI Content (Text & Graphics)
UI Expertise
UI Development
UI Content Localization
Functional Testing
UA Content Creation
UA Content Localization
UA Cosmetic & Linguistic Testing of UI Content for consistency
Functional Testing
UX stage
UX creates initial text and graphical content on mockups; negotiate the structure of mockups and use cases with business analysts and other team members (tools: Sketch and Zeplin).
UI analyzes the mockups for implementation (Zeplin).
UI stage (predecessor: mockup finished)
UI creates the user interface based on mockups, but with some additional changes (for example, extended dynamic content of variables). They manually add all the text from mockups to resource files.
Localization Engineer and Translator perform localization using CAT tools. All bugs of the source language text are forwarded to developers to fix (low priority).
Test engineers perform functional testing.
UA stage (predecessor: feature developed)
Technical Writers create Help, user documentation based on a product build and technical documentation (technical requirements, business requirements, feature descriptions, etc.).
All UI terminology inconsistency, cosmetic, and linguistic bugs are forwarded to developers to fix.
Extra costs added for each function.
UA started too late to correct anything on the mockups.
~10%+
~15-20%+
~20%+ per language

9. How We Used to Work on User Interface
Main disadvantages
Three different sources of UI content (mockups, resource files, and user assistance materials):
To change
To synchronize
To test and fix bugs
At least two iterations of working with content at each stage
No localizability expertise at the UX stage at all

10. First Step to Continuous Integration: ProcessesUX
Mockup Structure
UI Expertise
UI Content Reviewing/Rewriting (new)
Localizability Expertise (new) UA UI
This scheme illustrates how we tried to fix bugs by continuously integrating UX, UI, and UA.
First, we agreed to integrate processes and communications.
UX stage: what’s new
UX designers create initial text and graphical content on mockups; negotiate the structure of mockups and use cases with business analysts and other team members (tools: Sketch and Zeplin).
UI developers analyze the mockups for implementation (Zeplin).
Technical Writers\Editors review/REWRITE the text content and add changes as comments (Zeplin).
Localization engineers review the mockups for localizability problems.
UX designers manually implement changes from Technical Writers/Editors on mockups (Sketch), redesign the mockups based on UI and UA feedback.
UI stage: what’s new
UI developers create the user interface based on mockups, but with some additional changes (for example, extended dynamic content of variables). They manually add all the text from mockups to resource files.
Localization Engineer and Translator perform localization.
Technical Writers/Editors conduct cosmetic and linguistic testing, terminology and consistency checks, correct linguistic bugs.
Test engineers perform functional testing.
We can always request changes to mockups at this stage if anything is not possible to develop or localize.
UA stage: what’s new
Technical Writers create Help, user documentation based on mockups and technical documentation (technical requirements, business requirements, feature descriptions, etc.). Almost all content is created simultaneously with product development.
Documentation Verification is performed on a product build and does not require significant changes.
At the UI Development Stage, all project team members are involved in Continuous Integration development (techwriters, localization engineers too).
But we still have bugs in the UI content because at each stage we manually enter the UI content to mockups, resource strings, documentation, and help.
UA Content Creation
UA Content Localization
UA Cosmetic & Linguistic Testing (incl. UI Content consistency)
Functional Testing
UI Development
UI Content Review (delta)
UI Content Localization
Functional Testing
UI Cosmetic & Linguistic Testing (new)

11. Second Step to Continuous Integration: ToolsUX
UI Kit UA UI
CCMS
Mosaic
…at the same time, multiple products, common components, repeatable content…
Each of us tries to optimize internal processes.
The UX Department creates a UI Kit with samples of all UI controls in different states, with fonts, colors, etc. They create mockups based on this UI Kit afterwards.
The UI Department creates Mosaic.
Mosaic is a library of UI components based on Angular 1.x. (soon Angular 2.x).
The library contains matching controls that share a single color palette and measurements.
It does not require Bootstrap, Font Awesome, or any other products.
Mosaic has been fine-tuned, it contains the correct hotkeys and animations (that was hard, trust us).
Mosaic does not only contain layout, but also behavior, hotkeys, and validation. It contains no backend.
Mosaic supports themes. If the appearance of a component does not fit, you can change it keeping the behavior.
UA uses CCMS for content creation and CAT tools for localization.
TMS
Dynamic Prototypes
Ecosystem

12. Second Step to Continuous Integration: ToolsUX
UI Kit UA UI
CCMS
Mosaic
Then the idea came to integrate not only processes and communications but also our tools and technologies and create a single-source database for all the UI content (text and graphics) to be reused in mockups, user interface resource strings, and user assistance materials.
If we have it integrated with Sketch (a UX platform where UX designers create product mockups), we can check the localizability of a future product (or feature) right on mockups and BEFORE we start UI development.
If integrated with Mosaic (a UI Development Platform), we can work with UI HTML prototypes (testing localizability and functionality in different languages) BEFORE we integrate changes in the first product build.
Integration with CCMS and TMS allows us to exclude UA cosmetic testing (when it comes to UI synchronization) and significantly reduce the cost of UI cosmetic and linguistic testing.
Keeping in mind that we need to continuously deliver our products to our customers every quarter in 3 languages, we have very little time to fix bugs (functional and linguistic) in builds. That's why we need to eliminate them at the prototype stage.
TMS
Dynamic Prototypes
Ecosystem

13. Second Step to Continuous Integration: ToolsUX
UI Kit UA UI
CCMS
Mosaic
TMS
Dynamic Prototypes
Ecosystem

14. Second Step to Continuous Integration: Tools
MS SQL Support
Versioning and branching
Variable content for different products
Localization support
Metadata support
Tests automation
Interfaces to integrate with Sketch, Mosaic, CCMS, and CAT Tools
UI Kit
CCMS
Mosaic
What if we had a database of content we would be able to reuse in mockups, user interface, and user assistance materials?
Requirements for a content reuse database:
MS SQL Support
Versioning and branching
Variable content for different products
Localization support
Metadata support
Tests automation
Interfaces to integrate with Sketch, Mosaic, CCMS, and CAT Tools ….
But why create a new tool and integrate it with Sketch, Mosaic, CCMS, and SDL if we already have a CCMS that satisfies most of the requirements?
TMS
Dynamic Prototypes
Ecosystem

15. Second Step to Continuous Integration: Tools
UI Kit
CCMS
Mosaic
We decided to try the CCMS as a technology for a UI Content Reuse Platform.
Let’s look what it looks like on a simple example – Notification Center.
Notification Center is a common component in most Positive Technologies products.
TMS
Dynamic Prototypes
Ecosystem

16. [domain]_[feature]_[control_type]_[function]
Actual Results: UA
[domain]_[feature]_[control_type]_[function]
We fill the UI Control Platform in СCMS (SCHEMA) with IDs from UX designers as variables, localizable and reusable.
The ID format is agreed between UX, UI, and UA.
We can see the difference between localizations of different products and estimate the volume of synchronization.
Versions and Branches are supported if required (product customization, product release workflow support. etc.).
Translation status is easy to check (when synchronized with SDL based on COTI level 3, translation progress is displayed in SCHEMA). Automated send/receive translation with SDL Trados (COTI).
A fast reuse report shows what content will be affected if a control changes.
Reuse in User assistance materials
XML Export to Mosaic for UI Component Reuse
Reuse of variable [common_<pseudo>_button_save] in user documentation

17. Actual Results: UI
After we create the Content Reuse Platform in SCHEMA, we export it as XML (as a multilingual XML).
Then we convert XML to JSON in Mosaic (parsing the XML content and separating it for each language).
And use the JSON file to visualize the corresponding component in the Dynamic Prototypes Ecosystem.
In the Ecosystem, we can switch between languages, change the number of notifications (checking plural forms), reproduce the component functionality, perform functional, cosmetic, and linguistic checks BEFORE this component is integrated into a build.

18. Continuous Product Delivery with fully synchronized UI and UA
Key Benefits
Automated Continuous Development
All UI content is created and updated in one database.
Test BEFORE build
Ecosystem allows running feature testing on a dynamic prototype and fixing bugs before committing changes to a build.
Synchronized UX, UA, and UI Development
Deep UX, UA, and UI integration allows UA to start creating documentation based on mockups and exclude synchronization with a build
Continuous Product Delivery with fully synchronized UI and UA

19. Content Reuse Platform: Who Can Benefit
Analysts
Product Management
User Experience
Pre-Sales & Consulting
User Interface Development
Public Relations
User Assistance
CCMS as a company-wide system supports reuse and single-source practices for different units.
We expect that the UI Content Reuse Platform will be used by:
Product marketing in brochures, white papers, any other product marketing materials
Consulting in pilot materials (reports, etc.)
Marketing on the corporate website
PR in PR content
Support in technical support articles in the Knowledge Base
Also we are planning to integrate CCMS with a tool for Business and Technical requirements (like IA or Jira) to trace each requirement to the affected content.
It will allow us to estimate how much we need to rework or update in case of any changes to requirements.
As for the QC, we have test cases with UI content to check if it is synchronized with requirements. We expect to exclude these tests from the project scope altogether.
A dedicated team of UI Testers can exclude test cases to check the content on the UI.
Marketing
Quality Control
Support

20. Content Reuse Platform: Potential Risks
Unexpected changes of variables
Synchronization fails (Sketch ↔ CMS ↔ Mosaic)
Unexpected changes of variables - Very careful permission management
Synchronization fails (Sketch ↔ CMS ↔ Mosaic) – there should always be «plan B» (manual update)

21. Content Reuse Platform: Future Plans
CCMS & Sketch integration
XML/XLSX → JSON based on SCHEMA layout
All UI components → Content Reuse Platform
Content Reuse Platform is one of core components with clear release cycle
Unexpected changes of variables - Very careful permission management
Synchronization fails (Sketch ↔ CMS ↔ Mosaic) – there should always be «plan B» (manual update)
CCMS & Sketch integration – autogeneration of IDs from Sketch
XML/XLSX → JSON – autogeneration of resource files
All UI components → Content Reuse Platform
Content Reuse Platform is one of the core components with a clear release cycle
Next year we will be able to demonstrate this Content Reuse Platform fully integrated with Sketch, Mosaic (with the synchronized content changes in all tools)

22. Technologies and Tools
Technologies (Mosaic & Ecosystem):
AngularJS & Angular
Angular Translate
Language Plural Rules
Tools:
SCHEMA ST4 for user assistance and Content Reuse Platform
Sketch for mockup creation
Zeplin for mockup negotiation
SketchContentSync Plugin integrating Sketch with Google Docs (similar to Content Reuse Platform in SCHEMA)

23. Questions?

24. Thank you!