WindStax +

Mobile app • Service strategy

A service that transforms your energy saving management.

Spring 2018 | Interaction Design Studio II

In Collaboration with: Emily Deng, Matthew Miller

Timeline: 3 weeks

My Role: Research, Concept Development, Wireframing, Prototype



WindStaxs is a local Pittsburgh business, a full-service developer of alternative energy solutions such as vertical-axis wind turbines, microgrids, and industrial batteries. Currently the level of customer engagement is low, and we need to convince customers that the WindStaxs they purchased are worth the value.

As a team we are proposing a mobile app service that provides value for both the customers and the business.

Our final design focused on post-purchase customer engagement using data analytics and a conversational user interface through chatbot. Our process consisted of primary and secondary research, visioning exercises, sketches, and screen designs, and high fidelity prototyping.


Problem Research

Background Research

Through internet search and interviews with the founder of WindStax, the team sought the understand the positioning of WindStax in the alternative energy market. We found that:

  • WindStax’s technology  provides access to wind power to those in areas of low wind

  • WindStax  circular turbines can be installed where there is not enough space for a traditional windmill

  • WindStax do not disturb birds and insects as do traditional windmills

The team gathered information regarding the activity of WindStax since it’s launch, and found that its customers were primarily:

  • Businesses attempting to reach green goals or look green

  • Businesses in remote areas such as oil fields where grid power is unreliable

  • Home owners hoping to be green and save money long term with a substantial up-front investment.

Stakeholder Map

We developed a stakeholder map to better understand how WindStax operates and what influences their business. We considered their internal departments, suppliers, and customers. Our secondary research informed us on external promoters and detractors, such as government policy and corporations.

stakeholder map_d2.png

Problem Defintion

After the initial research and brainstorming, we identified some potential barriers for the growth of WindStax business that include expensive up-front cost, and little post-purchase follow up with customers. As we refined our scope, we decided to focus on the low level of customer engagement as our problem that we want to tackle with the app service. Because the majority of WindStax clients are returning customers, we need to convince them that their purchase is worth the value.


Our solution is to design the mobile service that:

  • utilizes data analytics and chatbot to monitor and communicate energy usage and savings with meaningful metrics

  • facilitates the communication between WindStax and customers.

Because WindStax customers usually are eco-friendly and would like to make environmental impact, the service coincides with their “green” vision and can eventually help to build the community of WindStax users. We chose emerging technologies because, as a whole, they provide the business with real-time analytics that can be used to inform future investment decisions and gather valuable business insights.





For the wireframes, the team used parallel prototyping to quickly iterate through the main features that we want to display in the interface without wasting precious time on aesthetic decisions when some directions would inevitably be abandoned.

The first set looked into the homepage of the app, and tested different combinations of geographic location and machine parameters to help customers have a first high level overview about the status of the multiple WindStax that they own.

The second set explored ways of displaying energy usage and consumption data, trying to incorporate micro-interactions which allow users to toggle on and off different layers of information to compare and better understand the data and their own consumption habit.

The third set focused on the customer support, which enables users to navigate through sets of common problems and find the solution, and directly connect to service representative if none of the problems are applicable.

The feedback we got for the wireframes were mainly concerned with the visual and the usability aspect of the design. Based on the feedback, we added in more icons and adjusted size of the numbers and text to emphasize the information we want the users to focus on, and because of the hierarchy, users would be able to easily glance through the page and get the visual cues about the important information immediately.

Hi-Fi Mockup Round 1

In first round of high-fidelity mockups we applied the color and style to the pages to make them look unified. Initially we chose ice blue and orange colors with black and white as our main palette. Yet because of the lightness of the blue the white text was a little hard to read and felt a little “anemic”. We then replaced it with green for readability and to better match the theme of “green energy”.

The dashboard like graphics were initially inspired by Fitbit and tracking apps that allow people to quantify and visualize their exercises with easy, understandable metrics such as floors climbed or steps taken.

consumption habit.png

The feedback we got for the high-fidelity mockups mainly concerned with the “energy bill like” visualization of the energy consumption and saving data. Kilowatt-hours was not a meaningful metric for most people to use in everyday life. Therefore we decided to convey such information in more usable metric like household electronics. For example, the energy saved through WindStax this month equals to 37 hours of television use.



Final Design

Final Solution

After several rounds of iterations, the final design has a few main business goals

  • Keep the customer engaged with the WindStax brand, whereas they typically do not re-engage and thus do not buy more WindStax. This lack of engagement was revealed in one-time exchange from the stakeholder map.

  • Provide a platform to upsell products, intelligently based on actual user needs as measured by instrumentation in the app and the WindStax turbine.

  • Convince customers of the ongoing value of their WindStax financially and environmentally so that they might purchase more.

  • Collect valuable customer data to inform future product investment decisions.

Design Walkthrough

My WindStax

On the home page, the customer can see at a glance that their WindStax have no issues. As three is a common number of WindStax according to our primary research, it is important to be able to quickly check up on all of them.

The map icon takes user to the performance analysis of a particular WindStax.

The carousel allows the user to jump between WindStax without going back to the map view.

WindStax also has the opportunity to upsell batteries to their customers who are exceeding their battery capacity and offer similar promotions.

Benefits to Customers

Customers want to know that their WindStax are helping them be green and that it is saving them money. Thus, there is a section devoted to each.

The data collected here on the customer’s energy usage is presented in a digestible format to the user, while it is logged and sent to WindStax so they can better understand their customers’ usage patterns.


The chatbot allows users to get answers quickly for common questions, and more urgent issues can be handed off to a customer services team.  Because fewer issues are being handled in-person, WindStax can better allocate their human resources.

The chatbot is also a valuable source of common issues that WindStax can use to decide how to improve the customer experience.


As WindStax customers are focused on being green, we created a feature that leverages WindStax smartgrid technology to shut off all non-critical power while on vacation and maximize environmental impact.

The microinteraction is designed to prevent the user from enacting vacation mode unintentionally.

First the slider turns red, and then the slider must be pulled fully and deliberately to the right. Choosing a slider over a button decreases the chance of an accident, while also giving the user the satisfaction of a physical motion that results in a real-world action, more so than a quick tap would.

Interactive Prototype with Framer




Our team used a product roadmap to envision how our mobile service app would be rolled out and what additional features we would want to include in the future. We focused on two initiatives through our emerging tech: customer support the conversational user interface and monitoring through data analytics.

Roadmap v3.png