Energy Management Cloud Portal

CO4 Cloud is a smart energy management platform for commercial and industrial users. My goal was to turn complex, real-time energy data into a clear, actionable dashboard.

App name / Client

Energy Intelligence

My Role

Product Designer

Industry

Energy Sector

Platform

Web Dashboard

project image

Overview

CO4 Cloud is a smart energy management platform that helps commercial and industrial users monitor, analyze, and optimize their energy consumption in real time. My goal was to transform complex, technical energy data into a clear, actionable experience that supports smarter, faster decision-making.

As the lead product designer, I led the UX process from discovery to delivery—conducting research, building prototypes, collaborating with engineering, and delivering a design system built for scale and clarity.

Prototyping

Dashboard Panel: Click Here

Home Page - Energy Management Cloud Portal
ZEV App - Energy Management Cloud Portal
Install Apps - Energy Management Cloud Portal
Application Detail Page - Energy Management Cloud Portal
Object Detail Page - CO4 Energy Management Cloud Portal
Object Icon Selection - Energy Management Cloud Portal

Research Process

Understanding the complexity of the energy landscape and the diversity of user roles was key to designing a meaningful solution. I conducted end-to-end UX research to guide the entire design process.

🎯 Objectives

  • Understand user pain points and workflows in energy monitoring and reporting
    • Identify feature priorities across different user roles
      • Validate design decisions early and continuously

        🧪 Methods Used

        • Stakeholder Interviews – Conducted 8 interviews with energy consultants, engineers, and sustainability leads
          • Persona Development – Created three core personas:
            • Energy Analyst – focuses on data accuracy and anomaly detection 
              • Sustainability Officer – monitors carbon footprint and compliance
                • Operations Manager – needs real-time alerts and high-level summaries
                • Task Analysis – Mapped typical user workflows, such as generating reports, spotting trends, or checking equipment status
                  • Usability Testing – Ran moderated tests with mid- and high-fidelity Figma prototypes to refine flows and navigation
                    • Synthesis Workshops – Used affinity mapping to uncover common pain points and mental models across users

                      🔑 Key Insights

                      • Users felt overwhelmed by excessive data without context
                        • Different roles needed different data depths—dashboards had to flex accordingly
                          • Users wanted faster access to anomalies and alerts without digging through reports
                            • Navigation structure and naming conventions were unclear in the original product

                              These findings directly influenced the dashboard hierarchy, navigation patterns, and filtering tools that became core to the redesign.

                              My Design Approach

                              🔥 Understanding the Users

                              I used research findings to craft targeted personas and define goals for the redesign. This kept the team aligned around real user needs like reducing energy waste, spotting issues early, and improving compliance.

                              🧱 Information Architecture & Wireframing

                              I restructured the dashboard to elevate essential KPIs—energy usage, cost savings, and emissions. I introduced a flexible layout system with collapsible panels and a persistent global filter, allowing both overview and detail-level interaction without overwhelming users.

                              🎨 Visual Design & Interaction

                              I designed a modular UI kit using a neutral, data-focused color palette to support clarity and readability. Real-time visualizations like charts, alerts, and custom widgets allowed users to spot trends instantly. The interface was responsive and accessible across devices and roles.

                              🤝 Collaboration & Iteration

                              I worked in tight collaboration with the development team to ensure design intent translated smoothly into implementation. I delivered a detailed Figma component library and specification guides, ran usability testing at key milestones, and iterated based on both internal reviews and user feedback.

                              Impact

                              • 30% Faster Insight Generation Clear data hierarchy and real-time visualizations helped users identify trends and anomalies faster
                                • 50% Reduction in Onboarding Time New users reached proficiency within one week due to improved navigation and intuitive layout
                                  • Elevated Market Perception The new design positioned the client as a premium, modern energy intelligence provider, increasing product credibility and stakeholder confidence

                                    Reflection

                                    This project deepened my expertise in designing for complex, data-heavy platforms. It was a reminder that good design isn’t just about clarity—it’s about creating tools that enable smarter, faster decisions. By embedding research into every stage of the process, I was able to simplify complexity in a way that felt both powerful and effortless for the end user.

                                    It also reaffirmed the importance of adaptability: designing for users who range from highly technical analysts to high-level decision-makers requires systems that are both flexible and focused.