Web UI Development for a UK Security Company

  • Professional UI design: delivery of sleek, style guide compliant web app interface designs
  • Web UI 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.

  • Angular
  • HTML
  • CSS
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:

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

Project Team

Iflexion’s 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 Iflexion’s independent quality assurance team.

Since the Customer had a clear vision of the future project and its requirements, they’ve chosen Time & Material engagement model. 

Functionality overview

The Customer was looking to avoid reliance on browser plug-ins (their legacy C# UI client was based on Microsoft Silverlight), so a combination of HTML5/CSS3 and JavaScript was the obvious option to choose for web UI development.

Essentially, the solution was designed as a single page application based on the Angular JS framework and Microsoft ASP.NET SignalR library. Other tools used 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 date-pickers. Applying the sliding window method, Iflexion’s developers 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 developed web UI helps the Customer to optimize end-user experience through responsive and brand-consistent UX while offering rich functionality and high 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 the Customer’s 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 the establishment of a long-term, multi-project technology partnership. 

Screenshots

Want to start a project?

It’s simple.

Contact us