Pro Plus Matrix design customization

Portfolio Details

  • Category: Web Application
  • Company Name: WyreStorm Technologies LLC.
  • Used Technology: Drupal, PHP & MySQL, HTML, CSS, jQuery, Ajax & API



With over 4 years of remarkable existence, we can proudly say that we have made our client’s happy, content, and re-contacting us. Yet it was the time again to achieve something unparalleled while meeting the client’s exact requirements.

This time the Client was WyreStorm – A well- acclaimed name in the world of manufacturing supreme quality HD distribution and control solutions. The award-winning electronics manufacturer has its own development laboratories in Europe and Shenzhen, China and uses latest digital technology to develop and produce best HD distribution and control products.

And WyreStorm asked us for a “simple solution” realizing the exact requirements like “something visual that helps our (WyreStorm) visitors to use our products before actually buying them. Some graphical, playable, simulation tool that would inform potential customers that WyreStorm is the company which likes to provide simple ways and solutions.”

However, before hitting the bull’s eye, we first had to face some challenges including:

  • What best solution we should provide on the basis of client requirements
  • Will this work as an effective solution in market?
  • Is anything like this done before in market?
  • How users will response to such kind of solution?
  • Will this increase Client reputation in market?
  • Can this tool be raised to the completion?


And seriously, it was not the cake-walk it charged number of brainstorming sessions to us to seek and plot the exact solution for client’s “simple solution” while beating our own set of challenges. So finally, we had the following answers to our challenges (respective to the series of challenges aforementioned):

  • Let’s make a WIDGET. Yes, you read it right, we decided to develop a Widget giving the freedom to WyreStorm’s users to make their very own customized Matrix using WyreStorm’s products.
  • Yes, this would be the most effective and best solution in the market.
  • Apparently, there is nothing like our prospective widget in the market till now. So, We were going to be the No.1 creator for such kind of solution ever provided to any business.
  • Every consumer is smart these days. She/he checks reviews of every service and product before paying for it. In such situation, our solution is going to bestow the “creating” power to users only. Power to make their own matrix thus there would be no scope for after-sale complains and complexities.  So, definitely users will love the solution and accept it with great applauds.
  • As said, no such solution is ever provided to any business till date and the solution will bring power to users. And when consumers love something, provider’s reputation automatically raise.
  • Yes, with best of both worlds – Developing and Designing we can complete the tool.


Once conquering the challenges, we had to develop – A neat & clean system design with highly effective graphics & images, offering following to the users.

  • Easy to use mouse draggable & droppable feature of transmission cards and other peripheral devices images connecting the matrix slots.
  • Ability to change/remove transmission card from the slots, in case user made wrong selection of matrix.
  • Send this matrix configuration to admin (WyreStorm) via e-mail as s/he created, i.e. in the tabular format with all cards & slots representation.


But as they say “nothing worth having comes easy”, we had to seek way out of following complexities while developing the tool:

1. The first complexity was: Dragging and dropping of device icons in the particular droppable area was one of the biggest challenges while developing this widget.
The way out we opted – Hard core calculation based drag and drop of icon was the best-sought solution for this issue, which was accomplished by using jQuery, HTML, and CSS.

2. Next complexity we faced when applying validations to use Amplifiers. And to overcome this particular challenge, the conglomeration of jQuery and  HTML helped us.

3. Another hurdle came across while assembling icons whenever new 8X8 matrix added. Saving the icons as they were added by the user and previewing the exact assembly was daunting.
Nonetheless, we found the way out again. This time PHP, MYSQL, jQuery, HTML & CSS were used.

4. However that was not the end, previewing the complete audio set-up in one go/on a single screen was the next tedious task. As the entire audio set-up on single screen was looking a messy cluster, we decided to preview only one matrix set-up in one go. For this we applied jQuery, HTML & CSS.

5. And the complexities score kept rising, when scrolling of the device icon droppable area popped out as the next big issue in the queue.
But we have Players who sought the usage of jQuery plugin as the best-suited resolution for this problem.

6. So, the last straw was printing the set-up and e-mailing the exact map to client.
Once again we got the way out by using jQuery, HTML & third-party API


Although overcoming the complexities was not easy and simple but we finally nailed it and came up with a UI letting users to configure a customized set-up of MX0808-PP-POH matrix by using the versatile device of WyreStorm – AMP-001-010 where user can also e-mail the exact layout to WyreStorm to get the exact set-up soon at his/her place.

So ultimately we won the challenges & the complexities with pure commitment and dedication. And the result we achieved is:

  • Win-Win situation for client and the site (WyreStorm) visitors.
  • Now, potential customers need not worry about how they inform WyreStorm Sales team about their HD requirements as this tool turned the difficulties into an easiest thing, which is more like a game with all customizations that provide better communication of requirements.
  • Better communication means better understanding means better business relationship between WyreStorm and its customers.
  • Last but not least, WyreStorm’s Satisfaction.

But then Pictures always paints a thousand words better, given are the images to depict what we actually achieved.

However in case of images are not just enough for you, go and access the widget yourself

To wrap-up with, the simple-sounding requirements from one of the prestigious clients WyreStorm were indeed quite challenging and tricky. These requirements made us do severe brainstorming to conceptualize the much-wanted solution. It took us over 2 months to cut the mustard and provide our client with a unique and interesting solution.