UX DESIGN - VISUAL DESIGN

GridControl

Helping WindStax's renewable energy customers manage their production and consumption needs

The Challenge

How can we create value for WindStax through a mobile service that meets an unmet stakeholder need?

WindStax Energy is a renewable energy service provider looking to sustain a competitive advantage by providing inexpensive and scalable clean energy solutions. Their signature microgrid solutions combine solar, wind, and battery power to meet energy needs. My objective as part of Interaction Design Studio was to research and design a mobile service to create new value for the business.
CONTEXT
Course project

TIMELINE
4 week sprint
SKILLS
Wireframing
User Flow
High-fidelity Prototyping
Figma


MY ROLE
I was the lead designer on a team of four designers. I led our team in defining the feature requirements, information architecture, low fidelity wireframe, and visual design system, as well as iteratively designing core screens of the prototype.

The OUTCOME

GridControl: A data-driven service that provides all the tools you need to optimize your microgrid performance

GridControl is a mobile service that utilizes past and present energy data to curate personalized recommendations to help WindStax customers best manage their microgrid performance and optimize their energy efficiency.

KEY FEATURES

Home Page

Summary: Microgrid customers can quickly assess the state of their entire system with the battery status, as utility grid power is in use if batteries are dead and vice versa. The highest priority alerts are also pushed to the top for users to see straight away.

Rationale: Users need to know if their systems need immediate attention or maintenance. Otherwise, they may want to know the overall state of production. They are also greeted with reminders of their positive energy effects.

Maintenance Flow

Summary: From the home page maintenance alerts, users are taken directly to a pre-filled appointment booking. They can input their preferred maintenance appointment times and confirm.

Rationale: I created this flow because users don't just want to know about issues -- they need to address them. This simple wizard user interface allows them to take steps to fixing issues.

Microgrid Status

Summary: This page provides a birds-eye view of the system inputs and outputs, while also providing entry points to more granular data and AI-powered recommendations to improve efficiency.

Rationale:  Users need to be able to understand the overall system status at-a-glance, while also being able to dig deeper into the time-series performance of specific energy sources and understand what actions to take to optimize production.

Personal Goals

Summary: In addition to a traditional profile page, users input their personal energy goals and view their progress.

Rationale: Using gamified experiences motivates users to meet their goals by providing transparency regarding progress and providing encouragement when achievements are met.

I. Design Process

Problem Statement

How might we identify business opportunities for WindStax from unmet user needs?

Through rapid research and modeling methods, my team was challenged to quickly survey WindStax's competitive landscape and hone in on a focus area. We started with a stakeholder map and value flow diagram to visualize the stakeholders and interactions.

Competitive Analysis

I led the effort to identify market need by surveying the service offerings of similar companies to identify common pain points

To help my team prioritize a user and narrow down to a focus, I conducted my own research into top microgrid companies to understand their business platforms and competitive advantages.

💡key takeaway💡

Because of the unpredicatable nature of weather, a key challenge of microgrid systems is to manage energy inputs and outputs. All of the largest and most trusted energy microgrid providers include software to address this controls problem.

Analogous domain + Semi-structured interviews

Understanding the challenges of self-generated energy

In lieu of speaking with actual WindStax customers, as many of them live on remote farms and were inaccessible to my class, I spoke with 3 solar power owners to understand their challenges and concerns. Three themes emerged:

🕛 Timing

Because weather is unpredictable, users must try to predict when are the best times to use electrically-demanding equipment.

"I hope it doesn't keep tripping up the fuse box when I use the washing machine in the daytime with the AC going."

💵 Tracking Investments

Renewable energy is a big investment, especially for individual homeowners. Users feel anxious to see their investments pay off.

"I'm not sure if the panels will save me enough money on my energy bill to pay off the loan I took out."

🔧 Scheduling maintenance

Scheduling maintenance is a pain, as sometimes the city, company, and owners need to line up schedules.

"I needed to upgrade the ampage of the power wires, but it took forever because people from the company and city were showing up at different times, especially with traffic."

Persona

WindStax created the word "prosumer" to describe their customers, who are the unique position of being both the consumer and producer of their energy through mini wind and solar farms. In order to be as efficient as possible and avoid paying to use backup grid power, they must make adjustments to their use based on available energy production.

DESIGN BRIEF

How might we help prosumers monitor their energy levels in order to use energy in a more efficient way?

Based on our rapid research activities, we converged on the design goal of designing a data-driven service to help users track their system performance and make any necessary changes to their usage.

Starting from Scratch

Using jobs-to-be-done to structure the user flow

I launched our ideation phase by listing the various jobs-to-be-done under the scope of our design brief and sorting them by time-sensitivity to begin structuring the task flow and information architecture.
Jobs-to-be-done
Task flow
I made the assumption that the goals that are most time-sensitive, such as fixing a broken system, would need to be seen first and therefore placed prominently on the home screen. We later tested this assumption with the low fidelity prototype.

Ideation

Rapid parallel prototyping

My team ideated on approaches to the design brief with parallel prototyping. From this divergence of ideas, we were able to select the most promising design directions to iterate on.
💡Takeaway from testing 💡 Users need to see their most pressing issues and notifications first. Instead of making them dig for the information by deciphering a chart or navigating to another page, we decided to put the overall notifications and simple status updates on the homepage.

Low fidelity Wireframe

Structuring the information around context-based needs

Next, I layed out initial wireframes from the task flow my team agreed on so that we could visualize the flow and structure of the app. My teammates then augmented the layout with specific features on the homepage such as viewing progress on the gamified energy goals, weather info, and environmental impact overview as a daily dose of positivity and encouragement toward sustainability.

I also iterated on the fidelity of the energy flow screen, which serves as a central hub to view the energy inputs and outputs at-a-glance.

Learning from testing

Streamline the central purpose of the app

From two rounds of testing and heuristic evaluation, the most resounding feedback we received was to narrow our focus to one goal instead of pulling the user in multiple directions. This led us to ask ourselves:
We therefore refocused our design's core value add as:
  1. Immediate notifications about how to address time-pressing issues
  2. Informative data and personalized tips given unique energy usage history

II. Final Design

Value Proposition

The Three M's: Monitor, Maintain, and Modify

GridControl's data-driven alerts and recommendations make it easy to keep your microgrid working at peak performance. The service was designed to give you access to both the data in a digestible visual format and qualitative evaluations which make it easy to understand what actions to take to optimize your energy production and consumption.
I came up with these categories according to specific user goals derived from our WindStax prosumer persona. Given the numerous different features within our prototype, I found these categories useful to link together all of the different pages and provide a framework to pitch the design. Many of the pages contain features which fall into more than one category.

UI KIT: Building brand Consistency

To unify the design system, my teammates and I put together a UI kit. I chose the colors and fonts according to WindStax's brand voice of trustworthiness and optimism. I also custom-made the icons!

reflection

Sustainability is one of my core values. I relished in the technical challenge presented by the nuts and bolts involved in the move to renewable energy. Furthermore, WindStax was a welcome empathy exercise in researching the contexts of remote microgrid customers and the unique challenges they face. Finally, I was heavily involved in every aspect of this design project and feel I was able to shape the final product to my vision.

The next steps for this project include testing on actual microgrid customers. Due to the constraints of the design sprint, we only ran heuristic evaluation and tests with other designers, but ultimately we need to put the app in front of real WindStax customers to see how it performs in meeting their goals. Stay tuned!