WattPlan

WattPlan is a decision-making application that provides personal recommendations and life-time plan configured for your utility and individual factors.

Areas of my focus:

  • User research
  • Usability studies
  • UX metrics
  • Wireframing & interactive prototyping
  • Design system
  • High fidelity design
  • Interaction design
  • Design documentation

 


Product Overview

Wattplan is a personalized, decision-making software for solar utilities and their customers. It is designed to help customers understand what is the best way to generate, consume and sell solar energy along with all other kinds of energy. It makes smart calculations based on user’s personal data and creates a detailed and personalized review of possible investments and outcomes.


Design Challenges

Here is a classification of problems and challenges that I faced working on the product:

Customer problems:

  • Need for a clear and comprehensive plan of my energy consumption with solar and other technologies
  • Need for personally crafted recommendations about efficiency of adopting solar technology and technical specifics
  • Understand the environmental impact of using solar energy

Business objectives:

  • To increase customer base and inherently profit
  • To become a reliable partner for solar companies
  • To provide an effective tool that adopted successfully by customers

Design process problems:

  • Understand the customer and the real problems that we are trying to solve
  • Establish design thinking process
  • Streamline the workflow and communication between departments
  • Set up Design System, provide consistent UI and design language
  • Make decisions based on data and UX metrics

Understanding the Customer

Personas

Based on the data gathered from analytics, qualitative and marketing research I created personas in order to define the portrait and the context of our typical customer.

User stories

User stories helped understand what are the prospective goals of our personas.

As a home owner, I want to calculate expenses related to solar energy consumption in the long run, so that I know how much and how soon will it save money in future.

As a home owner willing to install a solar roof on my house, I want to understand what will be my monthly bills next XX years, so that I could make decision about purchase.

User Flow

In order to understand customer’s journey, I mapped out all basic steps of interacting with the product, that allowed to defineĀ  what are the key areas of focus.

Goals and Questions

Based on interviews, questionnaires and data analysis, I mapped out major goals and questions that our customers have in mind while interacting with the product. I was extremely useful to get a better understanding of how we could craft the user experience and build a strong value proposition.

Data Flow

The interaction with the product starts with a wizard that will collect data from the user, which will allow to provide a personalized calculation and recommendations based on the received data. I was very important to classify the data threads that are entered by the user and are represented in the generated recommendation plan.

Prototyping

Prototypes helped attain the following goals:

  • Create a shared understanding between stakeholders
  • Validate design decisions earlier
  • Iterate at lower cost

In general, the prototyping workflow was the following:

  • Whiteboarding sessions kick-off
  • Defining micro user flows, navigation patterns
  • Engineers are involved to do a t-shirt sizing (defining technical constraints)
  • Building click-trough prototypes in Axure/Webflow/Invision

Prototypes:


Moodboard

After finalizing the prototype I started thinking about visual design. It’s very challenging and fascinating to explore different visual treatments for data visualization and layout design. I concentrated on visceral and behavioral areas of delightful UX and started investigating competitive products and deriving inspiration from Dribble, Pinterest, Behance.

High Fidelity Design

Areas of focus:

  • Product homepage
  • Landing page of the wizard
  • Input wizard
  • Generated report
  • Reiterating input data (report options)

Data-driven improvements

Wizard

  • Based on qualitative feedback and statistical data analysis I identified that our users do a lot of drop-offs going over wizard flow and after interviews it became clear that a lot of them are confused with having many pages and need. Therefore, it was decided to provide more seamless and smooth experience by organizing all steps in a modal window and depicting a progression strap.
  • To minimize efforts for the user I used location auto recognition functionality for the address step.
  • According to events tracking in analytics, a lot of user clicked “next” without filling out the fields on the steps, hence the UI has been improved towards discoverability and ease of use.
  • After qualitative research a lot of feedback was about providing white-labeling functionality, which was extremely important for our customers. So, the new design was primarily focused on this feature.
  • The stats showed a lot of drop-offs on the final step – calculating end generating report. The problem was in the lack of system status visibility. To improve it I designed the detailed progression loader.

Recommendation Plan:

  • According to analytics data there have been much smaller clicks at the bottom of the page. Therefore I put a lot efforts in rethinking the layout and navigational structure.
  • Based on qualitative feedback there have been a lot of concerns about difficulty of digesting the information and visually discerning between different data sections.
  • There was a lot of concerns about understanding the connotation of data. So, I took into consideration the help system to make the UI and content more self-explanatory.

Settings

  • We realized that we need to emphasize the visibility of settings sections because the stats showed that a lot of people went back to the landing page and wizard to updated the input setting which was more painful for them.
  • The question about the explanation of data and each setting was also relating to this experience, so it was important to think through the helping system.

Landing Page

Wizard Flow

Recommendation Plan

Interactions

The main goal of working on interactions was to explore and define the interaction models for different parts of UI and explain in a clear way to engineers how this particular interaction should look like.

Interaction prototypes helped surface a lot of misconceptions about:

  • Navigation
  • System feedback
  • Operating the data

Tools used for creating prototypes:

  • Principle
  • Webflow
  • Adobe After Effects

Design System

The first and foremost feature request from our partners was to provide a possibility to implement white-labeling, i.e. to adjust the visual look and feel to the design language and branding guidelines of different solar companies. In order to provide this functionality we needed to build a cohesive system of UI components, where we could easily change the colors, typography and branding in short time.

I created a Design System based on atomic approach, that had differents level of hierarchy and a consistent structure. This approach brought immediate values to the team and the product:

  • Deliver results much faster
  • Adhere to consistency
  • Streamline the workflow
  • Focus on the content and functionality
  • Bridge the gap between Front-End and Design teams

Hand-Off

The goals that I surfaced with proper had-off process:

  • Better understanding between FE and Design teams
  • Consistent UI patterns and rules
  • Avoid discrepancies in the code and design
  • Streamline the process by providing clear redlines and specifications

For each deliverable item there was a specific structure:

  • Overview of UI components
  • Different states explanation
  • Design redlines
  • Interactions explanation
  • Related assets

Measuring Design Success

Validating the design solutions and measuring the ROI of design is the most important step in the design process. I implemented the HEART framework (from Google) in the workflow, hooked up the Google Analytics and conducted series of usability studies and qualitative interviews. All of that allowed to:

  • Make data-informed decision
  • Justify assumptions
  • Validate designs
  • Iterate faster and cheaper
  • Be more customer-oriented

The HEART table represents the basic goals, signal and metrics that were surfaced in the process.

Conclusions

Here are some valuable takeaways that I came up with while working on the product:

  • The design thinking process is not linear, as it shown in plenty of articles and books. All the phases constantly overlap and a good product designer must use critical thinking in order to assess quickly the situation, identify the problem and generate a solution for it.
  • Invite engineers to the table as early as possible. They must do t-shirt sizing and scope down the plan considering technical possibilities. Make devs your sidekicks and partners.
  • A good product designer should be always thinking from customer perspective and validate personal assumptions.
  • It’s tremendously cheaper to iterate at prototyping phase than at high-fidelity design phase. Wireframing and prototyping are the most powerful weapon of a designer.
  • Don’t just solve a problem, but also deliver delight at different levels: visceral, behavioral and reflective.