Clever Control

Overview

Clever Control is an IoT company offering custom-built hardware and software solutions for energy monitoring, data collection, and automation. Their flagship consumer product is the P1 reader, a plug-and-play device that connects to a smart electricity meter's P1 port and streams real-time consumption and production data to a companion app.

While the hardware worked flawlessly and the backend was successfully pulling data, the product lacked a usable interface to make that data meaningful to the end user. I was brought in as the sole product designer to build the application architecture and UI from the ground up.

My Role

End-to-End Product Design

Design System

Native App Design

Marketing & Product Website Design

Interactive Prototyping

User Research

Micro Interactions

Cross-Functional Collaboration

Brief

The scope of the project covered the end-to-end design of a cross-platform energy monitoring ecosystem, alongside the creation of a brand-new customer-facing marketing website. The dual goal was to build a bridge between hardware data and human action, while simultaneously establishing a digital presence to drive product adoption.

My Role

User Research & Information Architecture

Initial work focused on analyzing user needs to map core journeys, including hardware device pairing and multi-property management. These insights informed structural decisions to simplify data-heavy screens, such as utilizing progressive disclosure so users only encounter complex charts when needed.

AI-Powered Exploration & Wireframing

AI tools were integrated into the workflow to quickly generate multiple grayscale layout directions and early wireframes. This accelerated the ideation phase, allowing for rapid testing and iteration of different structural concepts before committing to a final design path.

Application & Website Design

Following layout validation, user interfaces were built from scratch for both the cross-platform energy monitoring application and the company's marketing website. The website was designed to communicate the product value proposition and drive user acquisition, while maintaining visual and structural consistency with the app.

Design System Engineering & Developer Handoff

The company’s brand guidelines were translated into a scalable design system in Figma, creating reusable components optimized for mobile, tablet, and desktop screens. Final deliverables included fully interactive prototypes and detailed handoff documentation to ensure accurate code implementation by the developer.

Key product design chalanges

  • The device detail screen required partitioning data into three separate tabs. Because live data, historical usage, and solar production are related but fundamentally different metrics, the challenge was balancing data isolation versus correlation. Collapsing everything into a single view risked overwhelming users, while keeping tabs completely self-contained made it difficult for users to instantly see if they were net consumers or net producers.

  • The team faced a high volume of repetitive customer support inquiries regarding technical product details. The root cause was a lack of embedded helpful text and self-service resources within the legacy setup. When building the application from scratch, the challenge lay in introducing intuitive in-app help frameworks that resolve user confusion immediately at the point of action, without disrupting the core data experience.

  • The hardware was capable of pulling highly technical, real-time energy streams, but it lacked a visual layer. When building the user interface from scratch, the challenge lay in translating these raw metrics and data points into clear, understandable charts and insights that everyday users could instantly interpret and act upon without needing a technical background.

Impacts and Outcome

The project successfully transitioned Clever Control from a hardware-focused company into a business with a cohesive, commercial digital ecosystem. All core deliverables were completed and handed off for engineering

  • Market Readiness: Building the software infrastructure from the ground up provided the necessary digital foundation for Clever Control to confidently scale into both the residential consumer (B2C) and facility management (B2B) markets.

  • Proactive Support Reduction: Integrating an embedded, contextual help framework directly into the app structure established a self-service model designed to deflect repetitive technical inquiries and lower the team's operational support load.

  • Transition to Data-Informed Iteration: Designing the product with a planned Microsoft Clarity integration shifted the company from assumption-based development to a structured framework where future product updates can be prioritized based on measurable user behavior.