WattPlan

Transform online customer engagement with personalized, decision-making software, configured specifically for your utility.

(This case study is designed in the form of a presentation and should be described in-depth in personal conversation.)

Product Overview

Wattplan is a SaaS product produced by the company CleanPower Research for solar utilities. This 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 your personal conditions and creates a detailed review of your possible investments and outcomes.

Challenges

Problems:

  • Developers driven decisions
  • Lack of design system
  • Not fully customer focused
  • Ineffective design process

Challenges:

  • Streamline process
  • Consistent UI and design language
  • Improve UX based on customer needs
  • Introduce design thinking approach

Design Process

Principles:

  • Data driven assumptions
  • Shared understanding in the team
  • Validate ideas
  • Be flexible

Steps:

  • Research
  • Ideation and planning
  • Prototyping
  • Design
  • Test
  • Iterate

User Research

Goals:

  • Empathize with customers
  • Improve UX based on customer’s needs
  • Identify the direction for the product

Conducted studies:

  • Competitve Analysis
  • Personas
  • Scenarios and and flow-charts
  • Surveys and usability studies
  • Data-flow
  • Analytics

Personas

Based on user research and analytics data, I created personas, that represented our key audience segments.

Goals:

  • Represent a major audience for our product
  • Focus on the key needs and expectations of our users
  • Empathize better with our customer
  • Describe real people with their backgrounds, goals, and lives

User story sample:

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

Customer Journeys

Based on personas and user stories I developed customer journey representing most typical steps our customers go through in engaging with our product and achieving their goals.

Data Flows

While working on customer journey, I also investigated the flow of information coming through the interaction with the product. It was very important to understand the mental model of the user and identify what information comes in and goes out. Firstly, I put together all major questions, that the user might ask while using the product and organized it by importance. Then I identified the main threads of information that had to be provided by the user and what information was used in generated report.

Prototyping

Tools:

  • Whiteboarding and sketch for wireframes
  • Axure
  • Webflow

Goals:

  • Validate ideas
  • Create shared understanding of experience
  • Decrease iteration cost
  • Streamline design process

Visual Design

Areas of focus:

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

Principles:

  • Progressive disclosure
  • Visual hierarchy
  • Consistency
  • Self-explanatory UI
  • Simple as possible, but not simpler

Design System

Benefits:

  • Consistency
  • Reinforce the brand’s design language
  • Streamline the process

Interactions

Benefits:

  • Explain better interactions and flow
  • Predict the interaction model
  • Validate ideas

Tools:

  • Adobe After Effects
  • Principle
  • HTML/CSS/JS

Deliverables

Goals:

  • Better understanding
  • Consistent UI
  • Decrease discrepancies
  • Streamline the process

Tools

Here is a range of tools I used in my design process.

Sketch

Wireframing, rapid prototyping, high-fidelity UI design, illustrating.

Invision

Click-through prototypes, user flows, mood boards.

Marvel

Works great for interactive prototyping in conjunction with Sketch.

Sketch Measure

A must-have plugin for Sketch, that enables to provide easily specs for developers and teammates.

Adobe Illustrator

Number one tool for working with curves and designing illustrations and icons.

Adobe Photoshop

Comprehensive editing and creating of raster graphics.

Adobe After Effects

Motion graphics, UI animation, animated visual effects.

Principle

Makes it easy to design animated and interactive user interfaces.

Analytics

To understand better user behavior and utilize UX metrix I leveraged data received from Google Analytics installed on our product. It allowed our team to make data-driven decisions and find a rationale behind our design ideas and different assumptions.

Key metrics:

  • Bounce Rate
  • Events
  • Sessions
  • User behavior flows
  • Demographics

Results

A project (product) is never done. I constantly measured the outcome of the released updates and tried to leverage it in the full extent to improve the user experience. By monitoring analytics, exploring customer support requests and gathering the feedback from customers I actively used the HEART framework to measure and understand the results:

  • Happiness
  • Engagement
  • Adoption
  • Retention
  • Task completion