NRG_LOGR_CaseStudy_Banner-1030x343 Building World Class Web UI in 240 KB with JavaScript and HTML

Leveraging user interface (UI) expertise for embedded systems to develop a polished product in only 240 KB for the solar energy industry.

The Client

NRG Systems is a global provider of highly engineered products and solutions targeted at the renewable energy industry. They aim to create a world powered by more sustainable resources, and their clients range from aerospace markets to electric utilities.

The Business Need

NRG Systems was launching a new customized microcontroller product, called the LOGR-S Data Logger, for their clients in the solar energy industry. The hardware is used to acquire, store, and deliver data from various sensors for monitoring environmental conditions. The LOGR-S product utilizes custom firmware written to the microcontroller and is serviced via a web browser UI.

Over the years, NRG has cultivated a reputation in the industry for their simple and elegant UI. Their branding has a clean and cordial look and feel, and is used consistently across their different products. The original UI used during the development phase for the LOGR-S was functional but needed additional design and development work in order to deliver on NRG’s brand promise and satisfy end users.

In addition, there were other technical constraints. First, the microcontroller has a limited memory space of 240 KB, and this restricted the design of the front-end interface. Second, the microcontroller needed to be installed in physical locations without network connections. Therefore, a solution that didn’t rely on internet access (that would normally pull in external libraries or images) would need to be designed.

In order to deliver on an ambitious product development schedule, the NRG team sought external help in order to accomplish their product goals.

The Optimus Solution

Optimus Information used a collaborative and agile approach with the NRG team. Sprints were weekly, and Optimus held frequent demos of the progress in order to incorporate feedback early into the next iteration.

  1. Optimus first worked on a one-page proof-of-concept with the existing hardware to ensure their ambitions were feasible and would fit the limited memory storage of the device.
  2. They then ran a workshop with the different stakeholders (representing the technical, business, and customer needs) and elicited feedback on what they saw as positives and negatives of the current product experience. The suggestions and improvements that were agreed to be workable were rolled into the development feature list.
  3. A new web UI was designed for the firmware which was closely aligned with other products that NRG was rolling out. It incorporated the brand’s colours and visual identity within the limitations of the memory available.
  4. Finally, with all the assets in place, Optimus completely redeveloped the front-end code with Javascript and HTML and tested it on the hardware. The result was a rich and polished experience for the end purchasers of the system.

In addition, Optimus avoided disruption to service by utilizing the same tools and platforms already in place for the ongoing internal development of the product. NRG and Optimus developers worked hand-in-hand to resolve blockers quickly.

The Result

Working around constraints and avoiding unnecessary disruptions to users, Optimus delivered a polished user interface that aligned with NRG’s brand. The project not only resolved all of the pain points but was also delivered ahead of NRG’s targeted launch date.

With Optimus’s help, NRG was able to:

  • Fill in short-term gaps in web front-end development without occupying NRG’s internal staff.
  • Unify internal support for product design by bringing stakeholders from multiple departments for early consultations.
  • Show stakeholders how their ideas were being incorporated and improved upon through frequent demos, feedback sessions, and development iterations.
  • Develop a polished-looking product in the restricted amount of storage space available.

Technologies used:

HTML
CSS
Javascript
C++

Contact us for your UI and application development needs.