Case Study

Designing Intuitive Platform for QCells to Monitor Solar Panels

How did we design the user experience that everyone loved

Project overview

About the client

Qcells is a prominent solar energy company that specializes in the manufacturing and development of solar photovoltaic (PV) products.

What were they looking for?

They requested our assistance in creating a web application tailored for their clientele. Their primary goal was to offer customers an exceptionally intuitive and user-friendly platform for monitoring their solar panels, as well as a streamlined and effortless online process for purchasing and installing these panels. Additionally, they expressed a desire for a proficient fleet management program.

Who were the target users?

Anyone who wants to buy and install solar panel and monitor the device
Qcells staff who will monitor the fleet

Users insight

Most of the customers will purchase the solar power as a long-term investment that will ultimately lead to reduced energy bills
Most of the customers are motivated by the idea of generating their own clean energy
The customers are concerned about the upfront costs of solar panel installation
They don’t have extensive technical knowledge about solar systems
They are worried about how solar panels might affect the aesthetic appeal of their home
Almost 70 – 80% of the customer will use their cell phones to access the web app

Team size

The team involved 7 members from our company and 6 members from the client side. It was a 4 months project

My role in the project

I lead the UX design effort, producing all major deliverables and presenting these to the client
I worked alongside a junior UX designer.
I was responsible for research, interaction design, visual design, and usability testing.
I worked with the front-end developers and a business analyst.

How did the project get started

Initiating the Customer Dashboard Project

The initiative commenced by focusing on the design and development of the customer dashboard, which served as a tool for overseeing both the solar panel system and the individuals who had purchased panels from the client.

The client initially provided us with a preliminary outline of the components they wished to see in the dashboard. Subsequently, we carefully reviewed the document to gain a thorough understanding of these elements. Following this, we conducted further research and subsequently engaged in a call with the client to delve deeper into the specifics. During the call, all our queries were addressed.

Our aim was not solely to adhere to the client’s instructions, but rather to devise something more user-friendly. Therefore, we conducted additional research before commencing the design phase.

Pain points

Existing system is time consuming

Qcells operates through its website, where they attract users and encourage them to register. Upon user registration, they engage in manual communication with the users. At present, the purchasing and installation procedures are also conducted manually. This process consumes a significant amount of time and is also susceptible to errors.

Complex questionnaire

In order to offer customers the products and services that precisely align with their needs, the company has an established in-house application. This application is employed to pose pertinent questions, enabling the company to devise optimal solutions based on individual requirements. However, customers frequently do not respond to all the questions due to their abundance and the inadequate formatting that fails to incentivize comprehensive responses.

Complex structure of the application

The process from purchasing to installing the solar panel systems required company advisors to navigate through numerous intricate stages. The system not only progressed to the subsequent step after each prior task was completed, but advisors also occasionally needed to take specific actions. Unfortunately, the current application lacked user-friendliness, potentially leading to confusion for anyone interacting with its interface.

Process & planning

Each project possesses its unique characteristics, necessitating tailored processes and planning approaches. In the case of this particular project, its relatively compact scale and time constraints limited the scope for extensive usability testing. Additionally, recognizing that a majority of users accessing the customer module do so via mobile devices, we strategically focused on mobile optimization in our planning process. With these considerations in mind, we devised a specialized plan and approach for this project.

Mobile first design approach:
Recognizing that nearly 70-80% of users would predominantly utilize mobile devices to access the application, we prioritized a mobile-first design approach for the customer modules. The admin modules, however, were tailored exclusively for desktop use.
Efficient Design System and Component Library:
Swift design delivery was imperative to prevent delays for developers. To expedite this process while ensuring design consistency, we harnessed the power of the Sketch Component Library. Its seamless implementation greatly aided us in maintaining uniformity across the application. Notably, during an unforeseen color scheme alteration, the use of Color Variables facilitated swift adjustments.
Collaborative workflow:
Daily synchronization calls were instituted, fostering seamless communication within the internal team and with the client. To assess the technical viability of designs, we actively engaged developers, thereby preemptively addressing any potential feasibility challenges. Given the project’s reliance on NG Prime, which presented certain constraints, involving developers and the QA team in brainstorming sessions proved instrumental.
In-house usability testing:
In instances where budget constraints limited formal usability testing, we conducted in-house assessments with team members from diverse departments. This process ensured that critical user experience evaluations were still integrated into our development approach.
Comprehensive UX/UI audit:
Drawing from prior experiences, we recognized the potential disparities between proposed designs and actualized pages. To bridge this divide, a rigorous auditing process was implemented, ensuring seamless alignment between design concepts and final implementation.

Challenges and solution

1. Confusing App design

The entire process within the Buy and Install module proved to be confusing for users, as they encountered difficulty in discerning their current progress and the subsequent actions required. Clarity was often lacking regarding when specific actions should be executed.

Solution

We undertook a restructuring effort, segmenting the Buy and Install module into four primary steps and further breaking them down into sub-steps.
Some stages were automated in nature; for instance, users received notifications concerning scheduled consultations, and upon successful consultation, an installation document was dispatched.
On the other hand, certain stages demanded user participation, such as reviewing and accepting documents or uploading photos.
We formalized the necessary steps based on client input and presented them with checkmarks denoting completed steps and highlighting the current step.
This approach aimed to enhance user comprehension.
To facilitate user engagement, we implemented a notification system that would appear at the page’s upper section. This feature effectively conveyed to users when specific actions were required.
We employed two distinct notification styles: one for actions necessitating user input and another for general system notifications or user feedback.

2. Vague requirement

Initially, the specifications for the Buy and Install module were unclear. This was due to the presence of numerous steps, where users were required to take certain actions in some, while in others, the system would prompt them to proceed once the preceding step’s task was completed in the background.

Solution

In order to grasp the sequence of steps and necessary actions for customers to purchase the solar panel system, we organized our comprehension into a spreadsheet.
Subsequently, we engaged in a clarification process with the client, involving iterative discussions.
Despite some initial back-and-forth, we successfully attained a thorough comprehension prior.
Then we worked on the User Flow before commencing the wireframe and prototype design phase.

3. Nested table

During our collaboration on the “Program Management” module, we devised a data table design that featured an embedded nested table. This design choice was motivated by the need to visually represent the relationship between programs and their corresponding child sites. Initially, this design approach appeared elegant and facilitated a clear association between programs and sites. However, upon further reflection, we recognized a potential drawback: as the grid’s column count increased, it could introduce design intricacies. Specifically, the presence of numerous columns could complicate scrolling and the alignment of columns with their respective headers.

Solution

We moved the child table (Site information) to a new page called Program Details page
To add or review Sites under a program, users should click on the program details icon in the action column.
This page allows users to execute various actions, including editing/deleting a Program and adding/removing Sites from it.
The updated design offers a more intuitive user interface, reducing any potential confusion for users.

4. Data table actions

In the beginning, we incorporated Edit and Delete actions within the data grid to provide users with a convenient way to modify or remove their desired programs. However, upon receiving insights from the customer, we realized the potential ramifications of program deletion and the need for admin users to have visibility into program details before proceeding with deletion.

Solution

we made the decision to relocate these actions to the Program details page to ensure more informed and cautious decision-making.

5. Complex questionnaire

Within the solar panel Buy and Installation module, a dedicated section was designated for customer use. This section included a comprehensive questionnaire, which encompassed a multitude of queries. Our team devoted efforts to devising numerous strategies aimed at simplifying and enhancing the user experience, striving to create an engaging and user-friendly environment that would encourage users to readily complete the form.

Solution

We proposed two options for the questionnaire.
1. Option 1: A single-page form with all the questions on one page.
2. Option 2: Displaying one question at a time.
We then conducted usability testing in-house, and here are the outcomes:
- Option 1: A single-page form with all the questions on one page
  - Pros:
    - Users found the long form easy to complete as they didn’t need to click the next button multiple times.
  - Cons:
    - The page was lengthy, which might deter some users from filling out the form.
- Option 2: Displaying one question at a time
  - Pros:
    - Presenting one question at a time made it easier for users to comprehend and respond. It reduced cognitive load.
    - Questions were easy to locate.
    - Clear indication of the total number of questions and progress.
  - Cons:
    - For desktop or higher resolutions, a long form might be a more convenient option for filling out the form.
Based on the usability testing results, we decided to take a middle approach. We restructured the form into four steps, each containing three to four questions. This solution proved to be more effective than the initial two options.

6. Absence of usability testing budget:

The client lacked the financial resources for formal usability testing

Solution

we opted to conduct internal testing using team members from various departments not directly involved in the project.
This approach yielded invaluable insights that significantly enhanced the user experience.
The knowledge gained greatly influenced the design of key components, including the Questionnaire module, Fleet Management module, Customer Dashboard page, and Program Management module.

7. Adding sites to program

Initially we designed the sites adding functionality with the following steps:

Go to Program Details
Click on Add Site button
From the Add Site model window search the site(s) you want to add
Select the site(s) from the search result and then hit the Add button
The site(s) get added to the program

However, upon presenting the design proposal to the client, we were advised that the addition of sites should be approached cautiously due to associated costs.

Solution

As per their requirements, the inclusion of a site in a program necessitates the admin user’s action of clicking a final “Save” button to confirm the site’s inclusion.
Drawing from insights gained through past projects, we anticipated that users might overlook this critical step, presuming that sites were automatically saved once added to the program. To address this, we implemented the following measures:
1. After successfully adding the sites to the program, users were alerted that the program’s changes were pending and that they must click the save button to confirm the modifications.
2. In the event that users inadvertently navigate away from the page, an additional notification serves as a reminder to save the newly added sites under the program before proceeding.

The outcome

Increase in user satisfaction

Post-implementation surveys indicated a 20% increase in overall user satisfaction compared to the pre-redesign phase.
User feedback scores on key satisfaction metrics improved from an average of 6.5 to 8.9 out of 10.

Increase in adoption or engagement

The adoption rate of the redesigned feature saw a notable spike, with a 30% increase in new user sign-ups within the first month after launch.
Daily active users (DAU) saw a 25% boost, indicating a significant improvement in user engagement levels.
Conversion rates for the checkout process improved by 15%.
The bounce rate for the landing page reduced by 12%, signifying a more engaging and effective user experience.

Learning

Usability testing

Due to budget constraints, formal usability testing was limited. We conducted in-house testing for certain modules. A broader in-house testing across the entire application could have yielded more user feedback, enhancing the overall user experience.

Mobile first design approach

While adopting a mobile first approach for customer modules, time constraints prevented us from fully refining higher resolution designs for all application pages. This resulted in leaving some aspects of the design to developers. There was room for improvement in enhancing the design for higher screen resolutions on certain pages.

Prime NG

Limited familiarity with Prime NG UI design posed some challenges, leading to occasional rework due to compatibility issues with the desired design.

Component library and design system

While the component library played a crucial role in maintaining consistency and expediting the design process, we fell short in establishing a comprehensive design system for developers. This led to additional work for developers in order to uphold design consistency throughout the project.