EcoSmart
EcoSmart serves as the bridge connecting the traditional solar industry with the future. This AR app makes installing and managing solar effortlessly accessible at your fingertips.
Role
EcoSmart was a personal project where I took on the role of product design, research, and branding.
Duration
December 2023 - January 2024
For my final project in Google’s UX Certificate program, I collaborated with Smart Commercial Solar to create an innovative solution that makes solar more fun, accessible, and simple for everyday homeowners.
Overview
Team
Personal project (with the help from Smart Commercial Solar for research)
Tools
Figma
Scope
UI/UX, AR Design, Interaction Design, User Research, Usability Testing
The big picture
Background
In Australia, where the abundance of sunlight surpasses that of any other continent, the potential for solar energy to meet up to 60% of the country's energy demands is substantial. This not only holds the promise of significantly reducing greenhouse emissions but also offers a viable solution to the ever-rising energy costs.
Despite its benefits, widespread adoption is hindered by the perception that solar energy is inaccessible and overwhelming for the average homeowner. But how can we change this?
Discovering user needs
Given this under-explored problem space, I approached this project with an open mind, starting by asking initial key questions and focusing on what the primary users have to say. What is preventing homeowners from installing solar? What are their doubts and pain points? How would EcoSmart differ from existing energy-providing platforms?
Through this multidimensional approach, I identified two overarching needs: a clear functionality and benefits preview, and an intuitive maintenance dashboard.
Analyzing current market space
Next, I analyzed current competitors to gain a comprehensive understanding of the Australian market and to define the product's position within it. Specifically, my evaluation focused on the user needs identified during interviews and how competitors are currently addressing them.
During this analysis, I discovered a significant gap in the market, with two out of the four main competitors only offering in-person consultation with no provision for visual previews. While EnergyAustralia and AGL include solar monitoring features in their apps, the emphasis is largely on usage and bills. On the other hand, MySolarEdge and Enphase Enlighten offer in-depth monitoring but lack a modern UI and effective data visualization for users. This absence of intuitive design adds to the prevailing stereotype that the green-energy market lacks variety and innovation, thus rendering it inaccessible and confusing for average homeowners.
Defining the problem
“People are spending tens of thousands of dollars on a product they can’t see and praying that it’ll work.” - User #3
Solar panels are expensive, and adopting a green lifestyle is an investment for many Australians. Given the nature of this investment, they tend to approach it with greater caution and harbor more doubts.
This means that I need to adopt a more direct and thorough approach in addressing the users' needs. I organized the interview data by grouping common themes together to gain a holistic understanding of the problem, and this is what I found:
Breaking down the problem
Okay, so what’s the goal?
To enhance the accessibility of solar installation for everyday homeowners by making the process more visual, simple, and intuitive.
How might we…
How might we accurately and visually represent the installation outcome?
How might we making solar monitoring less complex while effectively communicating the benefits?
How might we tackle the perceived complexity of solar monitoring, making data more understandable and meaningful for users?
Meet the users
Research revealed that Millennial homeowners are the most interested in installing solar on their rooftops. Thus, to really get a feel for the target users, I created personas based on these data. This allows me to step into the users' shoes and prioritize features accordingly.
Ideating the solution
Next, I began jotting down my ideas on sticky notes regarding potential features to address the "How Might We's" in relation to these target audiences, grouping them under similar features.
Key Decisions
I have opted to integrate AR visualizations as they offer an accurate reflection of the post-solar installation appearance on customers' houses, while aligning with my design goal of innovation. Additionally, I wish to incorporate simple gamification elements to enhance users' comprehension of environmental benefits data while adding an element of fun to the experience.
Roadmap
Given the scale of this project, I employed the MoSCoW analysis to effectively prioritize problems that need to be solved into a strategic timeline and avoid having too many product features.
Wireframes
Having a solid grasp of feature priorities, I engaged in brainstorming sessions to explore potential UI designs and flows, aiming to conceptualize the app and define its core features.
Design decisions
How do I make it intuitive and visually clear for users to preview their installation and forecasted benefits? I mocked up 3 different types of screens and analyzed them focusing on the user’s needs.
Option 1 emphasizes the system preview image as the primary focus, with the benefit stats of the recommended system size overlaid. It also provides users the choice to preview it with AR or proceed directly to the next page. Option 2 highlights the various system sizes, enabling users to swipe and view the different benefits. The AR preview button is located on the preview image for direct access to different sizes. Option 3 showcases the recommended system size with the stats card positioned underneath. The AR preview option is integrated into the preview itself, with the primary call-to-action being the next button.
I decided to go with Option 3, where only the recommended system size is previewed, and the AR preview button serves as a secondary call-to-action, reducing confusion for users. This approach ensures that users won't accidentally click on it and will only preview it in AR if they choose to. Additionally, placing the benefits card at the bottom enhances visual clarity.
Usability testing
A product isn’t complete without user testing. To get the best results, I created an interactive prototype on Figma and went back to the users for testing. I focused on letting the users interact with the product in a moderated setting, using the think-aloud method.
To ensure that the product is usable, I also conducted a heuristic evaluation using using Jakob Nielsen's 10 general principles for interaction design.
What I found…
01 Confusing weather preview in AR page
Users were overwhelmed by the weather widget and how it affects the generation stats.
02 More benefits detail
Users enjoy the benefit card views, but wishes to see more customization and details.
03 Increase gamification
Users wants to see more gamification elements, separating the product from traditional solar monitoring.
What I changed…
Increased customization.
I added a customization feature that enables users to personalize their details section. This, in turn, allows them to personalize secondary information shown on their dashboard, such as simple gamification elements.
Simplified visual focus.
Users expressed that all the information displayed is detracted them from the primary AR focus. In response, I integrated the weather statistics and benefits into a pop-up window, triggered only when users click on the designated button. This declutters the screen and places greater visual emphasis on the AR preview.
The solution
The onboarding screens replace the traditional in-person pre-installation inquiry process. Users will have the option to preview their panels and book an appointment with a solar expert or log in through their current energy provider.
Simplified Onboarding
PAIN POINTS SOLVED: Providing the option to preview solar system sizes and benefits simplifies the decision-making process and allows for more thoughtful consideration without pressure.
The AR visual preview allows users to see what their property will look like after the solar panels are installed.
AR Visualization
PAIN POINTS SOLVED: Offering the option to preview their property post-installation addresses the aesthetic concerns users may have regarding their property's appearance pre-installation.
The dashboard incorporates system data, financial savings, environmental benefits, and allows for customization. Easy-to-understand data visualizations are crucial to the UI, enabling users to comprehend complex data easily.
Personalized Dashboard
PAIN POINTS SOLVED: EcoSmart rephrases data into everyday comparisons, such as illustrating how many trees users have saved. This resolves the issue of using solar jargon and outdated UI.
Interactive prototype
Note: Press Enter to type
Visual identity
Blending calming blues with light greens and yellows, I wanted to create playful yet intuitive visuals for EcoSmart. I also experimented with using cards to group each benefit detail, intending to present all data at a glance with more detailed information accessible upon clicking.
The main typeface for the app is Roboto, which I chose for its compatibility with EcoSmart’s emphasis on data visualization, creating versatile contrasts between uppercase and lowercase styles.
I also implemented an 8-point grid system to make my design neater with standardized spacing.
In retrospect
As a self-proclaimed (beginner) environmentalist, designing EcoSmart was incredibly rewarding. I experimented with Figma micro-interactions and crafted a more intuitive user experience. Throughout the process, I learned to think outside the box. From incorporating AR technologies to creating engaging designs, I developed a non-traditional approach to display important data. Here’s what I’ve also learned:
What made this project unique was the opportunity to interview and gather feedback from both solar experts and target users. I found it rewarding to listen to their needs and frustrations, which helped me create a product that stands out in the industry.
Users first.
Iterate, iterate, iterate.
I enjoyed seeing my design evolve with each iteration. However, due to time constraints and limited resources, I couldn't conduct multiple usability tests. Moving forward, I hope to conduct tests with a wider range of users and continue iterating based on their feedback.
To move this project forward,
I would think about how the app can collect data and connect to various providers. How can this be adopted by the niche audience? How can the business model raise profit?
If I have more time, I would also like to develop the AR portion on Unity 3D.