SunUp

SunUp Logo

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

Solar panels on rooftops
Web application features

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.

sunup challenge

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)
SunUp interface SunUp interface

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

Technical form
material-ui
React.js
axios
HTML
Redux
CSS
Git
redux-saga
three.js
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%

Solution for 3d solar panel layout
Thanks for watching :)
SunUp main SunUp main Solution for 3d solar panel layout

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%

SunUp main SunUp main
Thanks for watching :)