Challange
Worten, one of Portugal's largest retail surfaces in entertainment & eletronic products, identified the need to build a solar panel simulator that would be intuitive, easy to use for the average online customer and effective, generating contact leads for future deals.
The colors and the components used were based on Worten's design system, while the iconography was designed for the simulator. Developer handoff was made with Zeplin and in the later iterations, Figma.
Research: in the research phase, I was responsible for the benchmarking, analyzing the competitior and similar simulators from Portugal to the United States, evaluating the best user friendly approaches that could be applied to my design.
Ideation: I worked closely to Worten, defining the strategy, outlining the simulator's content and requirements and drawing low fidelity (wireframes) to quickly assess diffente approaches.
Prototype and user testing: I created prototypes to test with real users in what would be a first phase. The prototype would be later tested with real users from Worten's side, before being publicly announced. The whole design was built around mobile usability, using a mobile-first design approach.
First user testing iteration
Step 1: Address
In the first step, the user would have to locate his address in a map powered by Google Maps through a form field. As the user writes, the form will prompt an autofill container to help the user. When the user clicks on a suggested result, the map will zoom in the selected place.
The "Continue" button will then be active and the user may proceed.
Step 2: Draw roof's area
In the beginning of this step, a motion animation would replace the map, explaining the user how to draw the roof's area. The animation would play on loop.
If the user was not satisfied, he was able to restart using the secondary button. When he was happy with the roof's area drawing, he could proceed.
To start drawing, the user would just need to press the "Start" button, in red. To draw the roof, the user must press/tap the screen (atleast) four times, and the simulator would calculate the roof's area. This is just a reference value for Worten's technicians.
Step 3: Consumption
In the final step the user has to fill a quick form about it's energy consumption information.
Product Solutions
Based on the user inputs, the simulator would then calculate and display the best products to match the user's needs. It would present always three products, a recommended one (the best offer), in the middle, a lower quality and cheaper on the left and a premium, more expensive version on the right.
On mobile, the solutions card's carousel would start on the recommended one.
Product Details and Contact
The user is able to see more info about the solar panel solution by clicking in "See Details" (secondary) button in the card.
He can also click the "I'm interested button" and choose how he wants to be contacted by Worten: phone, email or a presential diagnosis (buy and schedule a technician visit). This will then generate a contact lead to Worten.
If the user selects contact by email he will also receive a PDF by email with the product details.
Second user testing iteration
After testing the simulator with some users some minor corrections were implemented.
The usability tests showed that not all users understood the roof area drawing, especially those with less digital literacy. The users were a bit confused with the motion animation suddenly replacing the map and did not understand it was explaining the next step, so they would just skip it. That caused them to not understand what to do in the drawing phase and leaving the simulator or asking for help.
We proceeded to make the roof area drawing an optional and skippable step. We also removed the big motion animation and moved it to a smaller version, on a popup with text explaining what to do.
Now the simulator helps the user by giving instructions while he is drawing with three states:
1 - When the user has not drawn anything yet, it will say: "To start, click to set the first point of your roof on the map";
2 - When the user has already a dot on the map, it will say: "Click to set the next point and connect them to finish your roof's area".
3 - When the user connects the dots, it will say: "It is done!".
solution
After the internal tests started to get better results we decided it was time for a small "beta" GoLive. The simulator was released without being publicly announced, so Worten could monitor it within a small and controlled sample.
The live tests showed that the users kept abandoning the simulator, mainly in the roof drawing phase and in the consumption questionnaire phase.
After talking with Worten, we realized the roof area was not that big of a deal in the lead generating process. Since it had a negative impact on the user experience, we decided to scrap it entirely from the simulator. The questionnaire phase was also reduced to one page, removing the redundant and optional questions. Further work was done to improve the responsiveness and usability on mobile.
Step 1: Address
Now the simulator has a fixed title, so users know they are still in the simulation. It also includes the current step out of all steps and the step name (e.g. "Step 1 out of 2 - Your address"). You can also see how the interface transitions better and more easily from desktop to mobile.
In the previous mobile versions the users were having problems understanding where the "help" was located. It was a small phone button on the top right corner. We've decided to fix it, keeping the icon, as in desktop and inlucing the copy "I need help".
Step 2: Consumption Questionnaire
The questionnaire was shortened and the UI updated to match Worten's latest design system. We also opted to make the form fields look more like usual fields. We also got rid of the tooltips since there was no need to hide information, leaving the form description under it. You can also see the active and filled styles in the images below.
Solar Panel Solutions
The solutions based on the user inputs were also updated. The cards information was reorganized to make them less tall, in order to help fit smaller smartphone screens. The carousel steps and the "New Simulation" button were placed at the same vertical level, as sometimes the users woudn't scroll down, not knowing they could reset the simulation.
Solution Details
The solution detail's sections were placed inside a collapsable container, with the less relevant information hidden, as we didn't want to overkill the user with irrelevant product info.
Contact Lead
In the contact phase of the simulator the buttons were updated to match the latest design system. The forms were updated aswell for clarity. In the phone contact we gave the users the possibility of receiving the info PDF by email through an additional optional email field, hidden beneath a checkbox. The presential diagnosis page was also updated: we scrapped the ilustration as it was not relevant. To make better use of the small screen space, we moved the price inside the button ("Buy for 24,99€").
The new user test revealed the simulator to be more intuitive and easy to use, as more users could get to the end of it without problems!
Conclusion
Through this iterative process, paired with user testing it was possible to achieve a great solution that was both intuitive for the average digital user and great at generating leads for Worten, while still maintaining the simple and clean Worten's overall design.
