Designing a multi-platform Solar Monitoring App
Click to interact with vision prototype for SolarZero
My Impact
Led the design of SolarZero’s revamped multi-platform app, creating a seamless experience for iOS, Android, and Web users.
Translated complex energy data into user-friendly visuals, empowering customers to understand and act on their energy usage.
Collaborated closely with cross-functional teams to prioritize features, align with technical constraints, and deliver within tight deadlines.
Validated designs through usability testing, making key refinements to data visualizations and navigation based on user feedback.
Delivered an MVP on time, improving user satisfaction, reducing support calls, and achieving a 4.6-star rating on app stores.
Background
SolarZero, a leading solar energy provider in New Zealand, needed a major overhaul of its customer-facing app. The existing web app was plagued with performance issues, a confusing interface, and lacked meaningful insights into energy usage. Customers struggled to track their savings, leading to frustration and high support call volumes. The goal was to empower users to find answers to their questions independently by providing clear, easy-to-understand information, reducing support calls, and improving the perception of the company.
Old SolarZero dashboard
Problem
The old web app had multiple usability issues, including frequent crashes, poor navigation, and an inability to present energy data in a digestible way. Users found it difficult to track real-time and historical energy usage, leading to misinterpretations and disengagement. This resulted in:
Users struggling to understand solar energy insights
Low customer satisfaction and high support ticket volumes
Success Metrics:
Improve energy insights for better understanding and engagement
Reduce the number of frustrated customer interactions
Launch a mobile app (on-time), achieving ratings of at least 4 out of 5 stars on the App Store and Play Store.
Discovery
To uncover the root causes of these issues, we conducted a detailed discovery phase:
Stakeholder Interviews: We engaged with product managers, engineers, support teams, and marketing to align business and user needs.
Heuristic Evaluation: We analysed the existing web app, identifying usability flaws and areas for improvement.
Customer Feedback: We reviewed past surveys and support call data to understand user pain points.
Whiteboarding & Ideation: We collaborated with product team, engineers and delivery leads to explore potential design improvements and feature prioritisation.
Feasibility Study: We assessed the software architecture to determine development effort for various features and risks associated.
Process
With clear insights from discovery, we defined a structured design and development approach:
Prototyping & Validation:
Created a Figma prototype to visualise the new app structure.
Iterated on wireframes based on technical feasibility and stakeholder feedback.
Conducted usability testing to refine navigation and data presentation.
Usability Testing:
Ran remote usability tests to validate whether users could easily access and comprehend energy insights.
Adjusted data visualisations and navigation labels to improve clarity.
Scalable Design System:
Built a scalable design system using Figma variables to ensure consistency across iOS, Android, and Web.
Standardised semantic colours, typography, spacing, and UI components across design and code for seamless multi-platform implementation.
Ensured design efficiency, reducing duplication of efforts across platforms and streamlining developer handoff.
Agile Development Phases:
Horizon 0: Core features like login, onboarding, realtime and daily energy tracking.
Horizon 1: Hot water control, AI Assistant for support queries, enhanced data visualisations, historical usage insights, and cost-saving metrics.
Horizon 2: Advanced features such as personalised recommendations and self-service options.
Cross-Functional Collaboration:
Worked closely with engineers to align design decisions with technical constraints.
Conducted regular sync meetings with stakeholders to ensure iterative improvements based on feedback.
A walkthrough of the figma file
Outcome
The redesign led to a significant improvement in both user satisfaction and business impact:
Achieved a 4.6-star rating on both the App Store and Play Store.
Customers found the app more intuitive, leading to fewer frustration-driven support interactions.
Increased engagement with energy insights, and reduced support calls related to energy tracking significantly.
Clearer cost savings breakdowns improved customer perception and trust in the company.
