We built a mobile-web energy savings calculator for Havells Sylvannia to improve sales penetration across their global markets
The brief
Global lighting specialists Havells Sylvania contacted us when they had the idea of producing an online Energy Savings Calculator which would allow their customers and team of 200 sales staff to understand the pay-back period when designing and installing LED lamps. The application needed to link to an extensive product matrix, had to allow users to select specific products for comparison and should generate an extensive report visually demonstrating comparative lifetime costs of different products.
Case study
The blueprint
We recommend that an application (whether a web app, mobile app or desktop app) requires what we refer to as a ‘Blueprint’ because by the implication of the word ‘app’ there is usually enhanced features and functionality whilst often rich and immersive user interface and user experience considerations. More complex applications also involve understanding the workflow and business logic of an organisation so the documentation we produce for the blueprint is often varied and dependant on scale and requirements. What is common throughout all blueprints is that the process is always highly collaborative and results in a well defined project that the client can understand, visualise and sign off prior to design and build.
In the case of the Energy Savings Calculator we produced the following documentation for the Blueprint:
UI/UX/Information architecture
Whilst this process could be referred to as wireframing (and we often do on other projects) the activity of wireframing the Energy Savings Calculator could be more accurately called prototyping: whilst we did define user interface and information architecture (typical features of wireframing) the process was especially beneficial when defining how a user went about interacting with the app. There are a number of tools that serve this purpose but we are big fans of Axure which in the right hands can be a rather powerful prototyping tool and we use it for defining interactivity and user experience in web applications: it is possible to create an interactive prototype that can be user acceptance tested and tweaked prior to development.
Functional specification
Working with the client we defined the core application functionality, web service definitions and several use cases in order to describe in more detail how the web application would function.
Technical specification
The Havells technical team were taking on the task of hosting the application so our roll was to recommend a set of technologies that we thought would dovetail with their existing infrastructure as well as provide a robust, scalable and efficient solution: their plan was to roll it out across numerous sites without duplicating the code base so there were important scalability factors.
We wrote a technical specification based on our understanding of the Havells infrastructure which contained a number of recommendations for:
- Web server specification
- Back-end framework
- Deployment strategy
- HTTP acceleration and caching
Design - look and feel
The Energy Savings Calculator is available across several product brands (they have dozens of websites and product offerings) and is also deployed as a service on partner websites. As such the design had to be simple, functional and relatively neutral but to follow the Havells Sylvania corporate brand guidelines.
One key consideration was the layout and behaviour of the application at different responsive breakpoints (for desktop, tablet and then smartphone) and whilst we’d spent time considering this within the wireframes, it’s only when you get something working on a device that you can get a real feel for the user experience itself: you can wireframe all you like and test on different mobile emulators but there’s no better alternative to actually testing on a device. It was therefore important to get the front-end of the app up and running quickly, to test it early and get some UAT and client feedback and then to iterate revisions quickly until satisfied.
Application build
On the front-end the break-points (the resolutions at which we adapted the user experience) were implemented with responsive techniques utilising CSS3 media queries. The more complicated aspect of the front-end involved the application build and data handling and this was where we employed Backbone.js, a JavaScript framework specifically designed to help give structure to web applications.
On the back-end we utilised the Enterprise level PHP framework Zend and made particularly good use of multilingual support using the translate library: Havells operate in many countries around the world and it was important for them to have an admin interface whereby they could easily enter the translations for all the on-page copy within the web application for each language. We developed an interface where they could set up new languages, translate all the on-page content and then generate an access key allowing them to release the calculator to the other language domains.
Another interesting task was for us to develop a product matrix uploader which would take a rather complex Excel spreadsheet containing product relationships and parse it to the database for use within the web application. The process involved us sitting down with their product team and thoroughly understanding how the matrix functioned. Luckily, Rob’s crazy Excel skills came to good use.
Sustain
We’ve continued to work with the client and released a major phase 2 update six months after the initial launch of the calculator including a sales team management console and login allowing approximately 200 of the Havells sales team to produce customised reports for customers as well as to handle unreleased products in live reports if requested. We also support Havells internal IT team to deploy the calculator across numerous Havells branded and several third party sites.
What the client says
I've had the pleasure of working with UVd over the past few months. Aside from being a great bunch of guys to work with, they are highly knowledgeable in their respective fields, professional and passionate about what they do. Rather than simply deliver a product to brief, they go above and beyond, adding enhancements and additional features. Their approach is hugely analytical, meaning you are able to rest assured that whatever is being delivered is fully thought through and simply, the best it can be. My own project was a success purely as a result of the service we received. I look forward to working with UVd again.
Yacoob Nujurally, E-Business Manager at Havells Sylvania
