Scroll
26%
Less loading time
2K+
Integrators impacted
14%
Increased productivity
Solarview
Client
Leadership, UI UX Design
Services
Nov 22 - Apr 23
Date
SolarView is a pioneer in the field of Solar Energy in Brazil. For a long time, it has been a leader when it comes to monitoring platforms and generating consumption reports.
With over 80 employees, including technology, sales, after-sales, and C-levels. The technology team is the largest with nearly 30 people.
Pioneer in monitoring Solar Energy
Role &
Responsibilities
Form the UX Design Team from scratch
Manage 2 other designers
Understand deeply the business logic
User research (Integrators and Final Users),
to validate pain points and need for iteration.
Migrate designs from AdobeXD to Figma
Build screens in desktop and mobile format
Usability Tests
Iteration and more testing
The Challenge
Crumbled design, no relevant data, hard to find what is needed.
The decision to redesign the current screens was due to feedback coming throught the success of the client sector. The initial idea was simply to clean the designs, make it easier to find data, but turned out to be more than this.
UX Team Creation
SolarView did not have a dedicated design team, and design tasks were either handled by developers or business analysts. Initially, they used Adobe XD as the design tool.
Edgar Penido
Product Designer
Herick Morais
Product Designer
Leonardo Abreu
UX Lead
Biggest Issue
Clients were abandoning the platform due to design issues.
The original platform was developed with a focus on immediate needs, without dedicated attention to design or user experience.
Over time, this resulted in a series of issues that directly impacted user satisfaction. To identify the main problems, we held meetings with stakeholders and the customer support team.
We discovered that more than half of the complaints were related to poor design and low usability of the platform.
Main Objectives
Redesign the web platform to improve user experience and design.
Reduce the usability issues identified in the research and interviews.
Build a design culture within the company.
Create a robust design system to ensure visual consistency, functionality, and scalability.
18%
37%
45%
55%
Of the issues reported to the support team, are caused by poor design.
Direct Usability Issues
Indirect Usability Issues
“I can’t find the settings for my plant.”
“I confused the buttons and sent the wrong report.”
“I didn’t know there were new pending items.”
“I don’t know why my plant was down last week.”
“I canceled my Premium Plan because I didn’t see much benefit.”
“I thought I had to reset the entire module, but I only needed to update the rate field.”
The Challenge
SolarView worked with customer feedback through the Customer Success team
which was usually engaged when users expressed dissatisfaction with the tool or had questions and assumptions that didn't evolve into certainties. The feedback management flow involved the user's pain being reported by a third party who interpreted the request and provided a subjective account.
We implemented interviews with active users for each functionality to understand how they performed their routines using the tool. We included questions and assumptions in the interview scripts to address them.
The close contact with real users of the tool allowed us to make adjustments to the experience and guided the next steps in the project. The process of conducting research and interviews with real users became an essential and responsibility phase within the UX design team.
Main Takeaways
Too crumbled
Irrelevant Data
Map using lot of space
Ideation
After migrating all the screens from XD to Figma
the challenge was to understand the product's context and its functionalities, how the user interacted with the tool, in order to determine how to redesign the screens and improve the user experience.
- We conducted benchmarking with competitors and portals that had similar functionalities.
- We defined the new visual standard for the screens.
- We designed the wireframes for the functionalities.
- Validation of the idea with stakeholders.
- Creation of the high-fidelity prototype using the components and Design System.
- Validation of functionalities with stakeholders.
- Handoff to development.
Start of the Design System
After evaluating the product's needs,
its various functionalities, and the complexity of the interfaces, in contrast to the demands for screen production, we decided to start a Design System for SolarView. This way, the project would gain scalability, ensuring that all visual elements are consistent and easily adaptable in different contexts.
The focus was on:
- Defining and creating Design Tokens.
- Style inventory.
- Component inventory.
- Continuing component creation.
- Handoff.
Handoff Process
The process of transitioning projects from Design to Development
was previously done by simply sending the screens without documentation that explained which Style Types were applied, lacking the usage flow, and sometimes incomplete. This demanded more time for development of functionalities and made the process lengthy and inefficient.
To ensure that the projects were executed as designed, we first implemented the handoff process for components. Then, we applied the same rationale for delivering screen layouts and added the representation of the usage flow.
In some specific cases, we created interactive high-fidelity prototypes.
Key Learnings
The project highlighted the importance of deeply understanding user needs, desires, and behaviors. This understanding was crucial in designing relevant and efficient experiences for the users. The research helped identify opportunities, validate ideas, and provided valuable insights for decision-making.
The creation of components and the establishment of a design system revealed the challenge and significance of having a unified system for design reuse and consistency. By designing scalable components, we streamlined the design and development process, ensuring a consistent experience across different parts of the product.
Frequent testing and iteration allowed us to identify and resolve issues early, leading to a more refined and effective solution.