Matrix Sprint 15

1. © 22001144 TTaannggooee,, IInncc..
Matrix Sprint 15
Infrastructure Topics +
UI & UX Fixes…
Stakeholders Demo
12th September 2014

2. © 2014 Tangoe, Inc.
Meet Matrix
Powering the Connected Enterprise
Turn On. Manage. Secure. Support.
2

3. © 2014 Tangoe, Inc.
Matrix Sprint 15 UI Optimizations Checklist…
Powering the Connected Enterprise
Optimizing Web Fonts Rendering Performance – Done
New UI for Bill View & Account Audit Compliance Audit Details - Done
(Alert), Info, Success & Error Message Enhancements – Done
Context Menu Enhancements – Done
Help & Info (About) Icons on the Header – Done
Stabilizing the Main Menu in all the 3 levels – Partially Completed
Stabilizing the Tenant Switcher – Partially Completed
Implementing Sprite Icons & Images
(.png, .webp, .svg & .woff) – Partially Completed
Detail Grid Enhancements – Partially Completed
Accordion Enhancements – Partially Completed
Modal Window Enhancements – Partially Completed
3

4. © 2014 Tangoe, Inc.
Matrix Sprint 15 UI Optimizations Checklist…
Powering the Connected Enterprise
4
Advance Search UI Enhancements – Partially Completed
Wizard Steps Enhancements – Partially Completed
Text Field, Dropdown, Split Buttons, Normal & Active Buttons
Enhancements – Partially Completed
Enhancing the Matrix Help – Partially Completed
Using a Light Theme to avoiding Latency Issue – Partially Completed
Avoiding Complex Custom Layouts – Partially Completed
Refining the Sass & CSS Rendering Performance – Not Yet Started
Refining the jQuery Rendering Performance – Not Yet Started
MxBillImport – Bill Loading UI Enhancements – Not Yet Started
Asset Template – Drag and Drop UI Enhancements – Not Yet Started
New Login Page for Matrix – Not Yet Started

5. © 2014 Tangoe, Inc.
Matrix Sprint 15 UI Optimizations Checklist…
Powering the Connected Enterprise
5
Identifying USER ACTION area, and concentrating for better
UI Enhancements – Partially Completed
Applying Usability Heuristics for Matrix UI and
making 100% Usable App – UX Activities - Partially Completed
http://www.nngroup.com/articles/ten-usability-heuristics/

6. Benefits of Optimizing the Web Fonts :
Avoiding Latency Issues,
Multilingual and Multiple Device Supports &
Crisp Look…
Been
Been
implemented…
implemented…
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
6
Optimizing Web Font Rendering Performance
 Introduced Open Sans Font Family (Regular, Italics, Semi bold & Semi bold Italics)
 .woff – Web Open Font Format
 .eot – Embedded Open Type
 . ttf – True Type Font
 . svg – Scalable Vector Graphics
 https://github.com/FontFaceKit/open-sans
 https://github.com/FontFaceKit/open-sans/commit/ea61437e6fa31b527e4ac5623b24f273965f8e15
 https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/

7. Ready to be
implemented
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
7
Optimizing Icons & Images Avoiding Latency
 Optimizing Matrix icons for faster recognition and avoiding latency
 Planning to introduce WebP - Lossless, WebP - Lossy and Alpha
Open Source Royalty free Compression Technology
 Using WebP file format instead of .png, .gif & other file format for Chrome,
because Google speeds WebP image format and brings
animation support as well
 http://www.w3schools.com/browsers/browsers_stats.asp
 https://developers.google.com/speed/webp/gallery1
 https://developers.google.com/speed/webp/gallery2#reproducing_the_images
 http://cloudinary.com/blog/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth
Ready to be
implemented
And one more good thing with WebP
extension, it’s supporting Animated
file format as well. Now a days most of
the Game Developers going with
WebP file format to getting their
Game App more faster than previous.
And one more good thing with WebP
extension, it’s supporting Animated
file format as well. Now a days most of
the Game Developers going with
WebP file format to getting their
Game App more faster than previous.
In 3 ways, we can convert the WebP
format…
In 3 ways, we can convert the WebP
format…
Benefits of Optimizing the WebP:
It’s a new technology file format recently introduced by Google, making the web faster and avoiding latency issue. But unfortunately, the
WebP file format supporting only Google Chrome & Opera, for IE and Mozilla will still only supports PNG. The same way Google also playing
with different browsers. For example, if you open YouTube in Chrome, you will be getting it WebP Sprite Icons, the same URL if you are opening
in IE, you will be getting it PNG Sprite Icons. But comparing to both file format, WebP is lesser file size and better quality.
Even WebP file format has 2 different quality as well. 1. Lossless 2. Lossy and Alpha.

8. Matrix Sprite Icons (.png & .webp) Comparisons
Ready to be
implemented
Ready to be
implemented
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
8
pnpgng WWepePpP
File Dimension : 673 x 970 & Size : 149 KB File Dimension : 673 x 970 & Size : 63 KB

9. Future
Suggestion…
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
9
Refining the Sass & CSS Rendering Performance
Use Any Declaration Just Once
Alphabetically Sort Declarations
Sort and Group by Selectors
Simple Rules for Better Organization and More Efficiency
Future
Suggestion…
.field-button-split
-khtml-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
-webkit-border-radius: 3px
background-color: white
background: -moz-linear-gradient(top, white 0%, #f4f7f9 100%)
background: -ms-linear-gradient(top, white 0%, #f4f7f9 100%)
background: -o-linear-gradient(top, white 0%, #f4f7f9 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f4f7f9))
background: -webkit-linear-gradient(top, white 0%, #f4f7f9 100%)
background: linear-gradient(to bottom, white 0%, #f4f7f9 100%)
border-bottom-right-radius: 0px
border-radius: 3px
border-top-right-radius: 0px
border: 1px solid #6c7680
cursor: pointer
display: inline-block
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f7f9',GradientType=0 )
font-family: Open Sans
font-size: 12px
height: 22px
margin: 0px
padding-left: 10px
padding-right: 10px
vertical-align: top

10. Refining the jQuery Rendering Performance
Future
Suggestion…
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
10
Into R&D -
Refining the jQuery Rendering Performance & Smooth Interactions…
Future
Suggestion…

11. Identifying User Action Area For Better Enhancements
Future
Suggestion…
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
11
Currently identifying the User Action Area and will do the need in
upcoming Matrix Sprint Release…
Future
Suggestion…

12. Ready to be
implemented
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
12
Approved Prototypes Are Ready For Future Sprint
Bill Loading
Process
Ready For
Implement…
Bill Loading
Process
Ready For
Implement…
Location Map
Live Google Map
Location Map
Live Google Map
Design For
Optional…
Design For
Optional…
Bill Loading
Process
Ready For
Implement…
Bill Loading
Process
Ready For
Implement…
Asset Template
Drag & Drop
Asset Template
Drag & Drop
Ready For
Implement…
Ready For
Implement…
Ready to be
implemented

13. Login Page: Waiting Approval For Future Sprint
Ready to be
implemented
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
13
Matrix
New Login
Waiting
for approval…
Matrix
New Login
Waiting
for approval…
Ready to be
implemented

14. Ready to be
implemented
© 2014 Tangoe, Inc.
Powering the Connected Enterprise
14
Login Page: Waiting Approval For Future Sprint
Matrix
New Login
Waiting
for approval…
Matrix
New Login
Waiting
for approval…
Ready to be
implemented

15. © 22001144 TTaannggooee,, IInncc..
Thank You…