Energy Customer Portal
Responsive Web Redesign
NuWatt Energy is a leading provider of renewable and solar energy solutions.
Project
Evolve and enhance the self-service portal to provide higher quality services to its existing and potential clients, add features on par with competitors, and improve overall usability, visuals, and customer messaging.
Tools and Deliverables
-
Stakeholder Interviews
-
Heuristic Analysis
-
User Flows (Miro)
-
Low-fidelity Wireframes (Figma)
-
High-fidelity Mockups (Figma)
My Role
UX Researcher and Designer
-
Conducted Herustic Analysis, and created User Flows, Wireframes.
Understanding the Problem
In our initial discussion with Aiman Alawa, the CEO of NuWatt Energy, we gained a thorough understanding of the website portal’s objectives and the current user experience concerns. Aiman emphasized the importance of allowing users to interact with the system before committing to a contract. He also highlighted the necessity for users to be able to track their progress and easily communicate any issue or concerns to the company.
“...users should be able to play with the system before signing the contract”
“users can monitor the progress and contact us for issue/concern with ease"
Business Goals:
-
Make customers feel comfortable and valued
-
Effectively showcase the available services, such as roofing
-
Increase sales through customer referrals
User Goals:
-
Understand services before committing to a contract
-
Track their progress and monitor energy usage
-
Easily communicate any issue or concerns to the company
Problem Statement
NuWatt Energy’s current user portal lacks compelling visual appeal and fails to effectively engage users. It lacks key features such as progress tracking and energy monitoring, and an unorganized tab bar.
How might we?
-
How might we show and make aware to potential clients that other services such as roofing, are available?
-
How might we inform potential clients about specific services so that they can use the services for safety reasons?
-
How might we show potential clients that they can monitor their own data and progress once the panel is installed?
Solution
To address these concerns, our team proposed a comprehensive redesign on refining visual aesthetics while maintaining existing UI style, and integrating new features to improve user usability and navigation. We tailored wireframes, user flows, style guides, and high-fidelity mockups to elevate the user experience.
Research
To understand the problem space better, I conducted a heuristic analysis of NuWatt Energy’s top competitors, primarily comparing the usability and visuals of each website portal. I used three of Jacob Nielson’s Herusitic Principles to assess the competitors’ user portals and identify potential areas for enhancing the user experience at NuWatt Energy.
Heuristic Analysis
In this section, I conducted a heuristic analysis of SunPower and IPSUN Solar’s user portals, focusing on key metrics such as “Visibility of System Status”, “Aesthetic and Minimalistic Design”, and “Help and Documentation”.
On the other hand, upon initial login to NuWatt Energy’s customer portal, I was directed to the “My Proposals” page with no content or firsthand information about the system. Moreover, the navigation throughout the various tab bars was challenging and confusing because they weren’t categorized, making it difficult to find my desired destination.
Insights
-
Visibility of System Status: â…–
-
The tab bar categorization is unorganized
-
No visibility on energy monitoring or status
-
-
Aesthetic and Minimalist Design: â…˜
-
UI elements are consistent but the color scheme makes it hard for them to stand out effectively
-
-
Help and Documentation: â…—
-
Has comprehensive information on FAQ and available contact options
-
Ideation
Sitemap
After identifying apparent problems on the user portal, I reorganized the tab bars into four categories: Dashboard (home), Assessment, Services, and Support. This restructuring aims to streamline navigation and enhance user experience by grouping related features for better access.
*The Dashboard page serves as the landing page including an overview of solar energy status and design system monitoring.
User Flow
I created a user flow specifically for useres to view their proposals:
Prototype
Wireframe
Next, our team came up with multiple wireframe designs to present to the client, providing him with options to choose from. Within my wireframe, I incorporated features such as real-time system status updates, energy usage tracking, and performance metrics. So that users are provided with immediate insight into the performance of their solar energy systems.
Landing page upon login. In the performance monitoring square, I envision having solar energy status and monitoring. For the graphs, users can view the performance with selected dates. The side squares are other additional elements (ex: battery life, bill, etc) that can be deleted or added based on the user’s preference. At the bottom, I removed the “Design your system” tab which was originally one of the many side tab bars in the portal, and incorporated it into the home page.
Feedback
After presenting to the client, he likes the boxes that separate everything and wants to insert energy usage meters with data users can view and other dynamic information. He would like it to be obvious and shown to the users immediately upon navigation of the portal.
“I am glad to see this analysis as it helps in firming what experience we should be giving the users. Many thanks for working on this report”
Here is the wireframe the team created after adjusting based on the client’s needs and feedback. We made aware of the energy usage upon login, and incorporated rectangular boxes above for easier access to energy situation.
Style Guide
We kept the original color scheme that matched the logo and chose a minimalistic font to let the users read clearly.
High-Fidelity Mockup
After many discussions with the client regarding his design preferences, we arrived at a final design and proceeded to create a high-fidelity mockup. We kept the color the same as the client desired, added box features to advertise additional services, and made the button color darker to make it more stand out.
*This is the landing page upon login. We included the usage monitoring and financial summary for users to have immediate knowledge access.
*In the additional services page, we displayed other available services (in boxes) to make users aware of them.
Before
This is the page where users upload their documents (energy bills, financials, etc).
Before
This is the original page of the “Next Step” tab, where users can see their project progress.
After
-
With the new design, we replaced the “delete” button with an icon so that it doesn’t take away the spotlight on “download”.
-
We replaced the background color on the file names with blue to have a consistent UI color scheme.
-
We edited the text color for “file size limit 5 MB) to gray so that users are not confused about where to look at first glance.
After
We reorganized the design by placing the power production at the top to provide users with a firsthand visual of their usage. Next, we positioned the progress overview on the side to allow users to track their steps while still maintaining visibility of production usage.
Takeaway
If we had more time, I would focus on developing a visually appealing and user-friendly landing page by replacing the current solar image and UI kits with a clearer and more modern style. I would also create a new set of UI elements, including fonts and color palettes, to establish a stronger brand identity.
Despite facing challenges such as time zone differences and tight deadlines, the redesigned portal received positive feedback from the client, meeting objectives with improved visuals and new features. This experience taught me how important open communication and teamwork are to achieve high-quality results. Moving forward, I will use this experience as a reminder of the importance of fostering consistent and collaborative teamwork in future projects.