SunUp

SunUp is an interactive web application with 3D animations to automatically layout solar panels on rooftops.

Challenge

The client came up with the task to completely redesign the front part of an existing application. The main design challenge was customizing the old design and making it easy for the user, who is barely familiar with solar panel specifics, to find their way through the complex functionality of the application. On the development side, it was crucial to implement new design really time efficiently, as the app already had a number of users waiting for improvements.

Solution

The main design task was to enable the user to take less steps to create the layout of solar panels. The solution was to show the steps using Wizard Design and show the instruments for creating the layout of solar panels in easiest way.

To optimize implementation time, it was decided to use a ready-made library Material UI. It also has an advantage of being easy to configure, in case of adding new features in the future.

To show the design of solar panels on the roof in 3D, we used ThreeJS. To set the roof dimensions according to real area scale and place panels on the roof tops then, we used FabricJS.

Since the user has to work with forms to enter roof data and choose module parameters, React-hook-form was the best solution for this purpose.

Working with an existing back-end, we used Redux-saga and Axios to contact the server. Redux was used for convenient state management of the application.

Front-end development of the application

Project Timeline

First-stage

13 hours

Research (4h)

User flow (3h)

Hypothesis testing (6h)

Second-stage

60 hours

Desktop Prototypes (34h)

Desktop Design (26h)

Third-stage

3 month

Implementation (3 months)

Design pages

Solution for solar panel installation management

Solution for solar panel installation management first

Solution for solar panel installation management second

Solution for solar panel installation management third

Solution for solar panel installation management fourth

Solution for solar panel installation management fifth

Technical Expertise

Web service for solar panel installation management

Results

We have created intuitive user interface for an interactive web application, following modern trends in design. The user questionnaire clearly showed that the new user experience oriented design is more convenient and comprehensible, as well as average user’s time for panels layout creation has decreased by 45%