Next →
Solar4America — Customer Portal
Visual Interface Designer
Solar4America
Smart Home Energy Solution
July .19 — November .19
Duration: 5 months
Sacramento, CA
Tools: HTML/CSS, JS, Adobe CC
Team: Content Designer, Web Product Manager, Visual UI Designer
Problem statement
The Customer Portal is a system tool designed for current Solar4America customers to engage and track project timeline. Products range from solar, roofing, battery, and fences. The portal acts as a user-friendly tool to help them better understand the process, and provide them needed information about their project.
The project is divided in four phases:
1. Portal redesign, 2. Automated emails, 3. Customer feedback, 4. Portal gamification
Phase One — Portal Redesign
The challenge
Congratulations! You just sold a solar product to a new customer. So what are the next steps? Each Solar4America product is broken down in 7-8 steps to ensure thorough customer satisfaction. Each step requires a call to action, whether the Project Coordinator, Product Manager, Superintendent, or the customer themselves. The main issue is designing a thorough, yet interactive timeline that addresses these important call to action.
The opportunity
As the UX/UI designer of this project, it is my responsibility to refine and implement an interactive timeline portal that is an improvement from the old customer portal.
When a customer is given login & password information, they are presented with the portal login page as they search:
http://petersendean.portal (to be live soon).
Mid-fidelity mockups
The old customer portal included a top-level navigation tab holds a description of all the next steps. Unfortunately, users weren’t able to track their progress, know their scheduled date, etc. Overall, the information in the old portal was static and very hard to follow.
The first step was to mock the webpage’s skeleton for solar & roof installation. These two installations will be the first projects to launch and test UX functions. A mobile version will also be included.
Desktop version
Mobile version
High-fidelity mockups
Every installation process is monitored and dated based on progress. Users will be provided with step to step information to ensure customer satisfaction. The timeline page will also include call to action notifications (marked in red), or date change notifications (marked in orange) under user help. The timeline bar allows users to see how far they are in the installation process.
After user testing, the fencing and battery project timeline will eventually get added onto the portal. Within completion of portal redesign, the next step would ideally include customer profile. This would add organization to data and allow customers to view their account information.
Phase Two — Automated Emails
Alert pathway
How would customers get notified about project progress without manually logging into their account? At the start of each step, automated emails will be triggered and send directly to the customer, notifying project updates and call-to-action.
Automated Email Alert Pathway
HTML/CSS coding process
How would customers get notified about project progress without manually logging into their account? At the start of each step, automated emails will be triggered and send directly to the customer, notifying project updates and call-to-action.
I was working closely with the Senior Web Product Manager and the Content/SEO Strategist to build these automated emails and set them up through Salesforce. I was responsible for editing and fixing the visual functions using HTML/CSS.
Final email mockups
Solar email — layout approval
Battery email — pre engineering / design
Roofing email — pre-site survey
Fence email — material delivery
Phase Three — Customer Feedback
and Engagement
The challenge
After installation completion, what happens next? Typically, customers who had positive experiences give 5/5 reviews, while customers with bad experiences (such as product issues 2 months post-installation) will give extremely negative reviews. Unfortunately, most of these cases happen which hurts the company and their willingness to improve communication. What is a better way to resolve this while saving much more time?
The goal
Phase 3 aims to engage customers to give honest reviews about their services after project completion. The goal is to improve communication and to bridge the gap of positive/negative reviews.
Project completion popup
When a project successfully reaches to “Utility PTO”, a popup will automatically be triggered. The popup will allow the customer to give a general rating on a scale of 1–5 stars. Customers who give a 3+ star rating will be directed to PC engagement to review their overall experience. Customers who provide lower than 3-star ratings will be directed to customer care/help to resolve further issues and improvements.
Help & support page
To provide better usability for customer feedback, the Customer Portal would soon develop a Help & Support page to organize reviews. This would help PC’s and the company end to improve services.
The Account page will soon be created to include customer personal information, and point of contact for their active and previous projects.
Phase Four — Portal Gamification
The challenge
It’s good to have honest and helpful reviews after a project, but there are more opportunities to improve installation and getting more products. Unfortunately, each project seems very tedious and more beneficial to the company. Instead, we want to show more benefits to customers! What is a fun way to implement bonuses in addition to these projects?
The solution
Adding reward systems & “Scooby-Doo snacks” to the Customer Portal. Customers are allowed to earn badges and points in many different ways to increase engagement and communication.
Badge & Icon Design
Ting Chang ©️ 2023 | Last updated: March 2023