How we built ng2-admin based demo application and Angular UI kit on Mitel Style Guide

Upgrade of the front-end stack to Angular 2.0 and design guidelines leverage.

Mitel Networks ng2-admin based demo app

Client overview:

Mitel Networks Corporation is a Canadian telecommunications company that focuses almost entirely on Voice-over-IP (VoIP) products.

Challenges 

The organization historically used different approaches and frameworks within their departments while building UI applications. As a result of this, some products looked really different and sometimes it was difficult to find some common corporate style between different apps.

The Client planned to upgrade their technology and design stack to create brand new user experience for their applications in the area of telecommunications. They have also chosen Angular 2 to be their main front-end stack and they needed professionals experienced in it to implement all of their ideas.

Mitel wanted to create a base framework that would be used by most of the teams within the organization to optimize costs and bring unified styleguide across their products.

Scope of work

Mitel provided AKVEO their style guide document. The task was to implement these style guides into AKVEO’s ng2-admin Angular 2 template while saving animations that were already available in ng2-admin.

As a result, the plan was to deliver following:

  • Angular UI Kit based on the Mitel Styleguide
  • Documentation website containing component description and usage examples
  • Demo application that could be used as a starting point for Mitel teams when building new applications.

Solution

Akveo delivered several projects to satisfy client’s requirements.

  • Angular 2 -based component kit based on the style guidelines provided by Mitel Networks. It consisted of:
  1. Layout, sidebar, header, footer components
  2. Different form inputs
  3. Charts
  4. Login/Signup -related components
  5. Tables 
  6. Modals
  7. Charts
  8. Custom icon library
  • Documentation website containing component description and usage examples
  • ng2-admin based demo application

Technology Stack: 

The technology stack was including: 

  • Angular 2, 
  • HTML/CSS, 
  • Saas, 
  • Webpack, 
  • Rollup, 
  • Typescript, 
  • Tslint

Results

  • 30+ components with unified styling and different settings available for Mitel teams to be used on their projects
  • Documentation website with examples published for Mitel software engineers
  • At least 2 teams using the framework for their apps
  • The internal development team was on boarded and the development team was handed over after training



Key Results

Download PDF >

Technology Stack

Angular
TypeScript

What Our Customers Say

Make a project with us?

Get in touch with us. We will carefully guide you through the entire process, from idea generation to product launch.

contact us