Needs

We started with a web app, and the need to provide the ease of use to our customers of a mobile app was very important. To gain some time, we hired our communication agency to work on the design for us, and I took care of developing the mobile app. The app is only for our customers and not the staff (except salespersons with a special guest account for demonstration), and only has customer-related functionalities (see some historical data, turn on/off, change setpoint, access the schedule and energy meters).

Stack & dependencies

  • VueJS 2
  • Quasar, a VueJS framework which provides a CLI to build SPA, PWA, hybrid mobile app with Capacitor, and many UI components and utilities.
  • Highcharts for the energy meters visualisations
  • Axios for simplified fetching

Design & screenshots

The design was sketched by an agency, Section4, and given to me as a Adobe XD result. With Quasar, I could recreate the design and create all the interactions and cards. The end result isn’t far from the original sketch given. It stays in the Material UI idea.

Screenshots from the mobile app taken on an iPhone 7 Plus