Web UI Design and Development for a Security Systems Configuration Tool

  • Professional UI design: delivery of sleek, style guide compliant web app interface designs
  • Front-end development: replacement of the legacy C# based solution with a high performance, rich functionality responsive HTML5/JavaScript UI client
  • Integration with access control systems’ hardware (proximity cards, electronic locks, turnstiles, etc.) 
Expertise
Media Content Distribution
Verticals
Manufacturing
Public Sector

Redesign and replacement of the legacy C# based client with a responsive, rich functionality front-end solution communicating with the existing web services and integrated seamlessly with the hardware APIs. 

Calendar
10
Duration
Months
Gears
27
Efforts
Person-months

Context

Our Customer is a leading manufacturer of security systems based in the UK. The company offers a wide range of access control solutions to suit different site requirements along with the ability to manage them conveniently from a centralized web-based configuration platform. 

Challenge

Within a large-scale project initiated in-house ‒ development of a next generation configuration platform for access control systems ‒ the Customer was looking to outsource some of the development effort involving:

  • professional UI design;
  • front-end development;
  • API integration and testing.

Essentially, the project objective consisted in redesign and replacement of the legacy C# based client with a responsive, rich functionality front-end solution communicating with the existing web services and integrated seamlessly with the hardware APIs. 

Solution

Proof-of-Concept

Iflexion delivered a pilot project (proof-of-concept) demonstrating profound understanding of the Customer’s business needs and adequate pricing approach. A high appraisal from the Customer’s top management team enabled us to win the contract. 

Project Team

Iflexion’s managed project team comprised a UI designer and 2 full-time front-end developers. Another front-end developer was involved part-time on an as-needed basis. End-to-end testing of all project deliverables was carried out by the independent Iflexion’s quality assurance team.

Since the Customer had clear vision of the future project and its requirements, Time & Material was picked as an engagement model of choice. 

Functionality Overview

The Customer was looking to avoid reliance on browser plug-ins (their legacy C# UI client was built using Silverlight technology), so a combination of HTML5 and JavaScript was the obvious option to go with.

Essentially, the solution was designed as a single page application based on Angular JS framework and Microsoft ASP.NET SignalR library. Other tools utilized on the project include Grunt JavaScript task runner, Bower package manager and LESS CSS processor.

The developed user interface supports drag & drop and right-click context menu and provides for two types of information presentation – Classic view & Simple view and four view modes – Details, Listing, Small Icons and Large Icons. Among the implemented UI elements are ribbon bar, tree view, menu, grid, dropdown, time- and datepickers. Applying sliding window method, Iflexion’s professionals ensured easy records upload and display. 

The updated user interface enables end users ‒ administrators or global administrators ‒ to create and manage time profiles for access devices, including:

  • Creation and management of time profiles for access control devices;
  • Viewing statuses on access elements (blocked, deleted, live etc.);
  • Real-time monitoring of system events & custom reports on pre-determined parameters;
  • Adding users (user groups) and assigning rights to them;
  • Adding and managing access devices and setting up their working scheme;
  • Creating and configuring multiple settings, including timetables for access devices, access rules for system users, access system rules and global administrator’s rights;
  • Synchronization with access system devices.

Within the project scope, Iflexion’s team also performed integration with the API provided by the customer’s in-house team with subsequent API documentation and testing

Results

The delivered front-end solution helps the Customer to optimize end user experience through sleek, responsive, style guide compliant designs while offering rich functionality and first-class performance. Designed to handle millions of database records, the system is capable of servicing up to 10 000 concurrent users with no performance loss. 

Effective collaboration with the Customer’s in-house development team, weekly status calls and status reports, and convenience of day-to-day communication assured seamless project flow and high level of Customer satisfaction with the project deliverables.

When the current undertaking was still in full swing, the Customer initiated two more projects with Iflexion, which resulted in establishment of a long-term, multi-project technology partnership. 

Screenshots

Want to start a project?

It’s simple.

Contact us