COMPANY: VIVINT SOLAR
Home Energy App Nest Integration
About The Project
Vivint Solar wanted to integrate with energy devices so that they could add value to the Home Energy App (HEA) by creating an energy ecosystem. This ecosystem would show the customer how the energy is being used. The first step to building this ecosystem was to integrate with the Nest thermostat.
My Role & The Team
I’m the UX Designer for the HEA. I work alongside the Product Manager(PdM), Project Manager(PjM), and five software engineers. I lead brainstorming session for new features, design and review meetings, perform product research, and create visual designs for the app. At times, I seek help from the UX team for brainstorming sessions or guidance.
The User
Several Vivint Solar customers either have a Nest thermostat or are interested in getting one. The customers that currently have a thermostat, use the nest app. Some of them understand the app very well but some do not.
To better understand user needs we categorized users into two different types; level 1 and level 2.
Level 1 user is the user that either has never downloaded the nest app, hardly ever opens it, or doesn’t quite understand it. These people set up their nest app when they got it and have not really made any changes to it.
The level 2 user has the app on their mobile device, opens the app occasionally to constantly, understands it, and knows how to use it really well. These people also like to look at the email reports that Nest sends out every month.
The Challenge
The main challenge with this new feature in the app is that it was the first attempt at adding a third party integration into the app. There was going to be a lot of learning along the way. We knew that if we nailed this integration then other integrations would go a lot smoother. So it was important to get it as right as possible the first time.
Throughout the project, I came across a couple challenges. I will discuss these challenges and the decisions I made along the way.
Design Approach
My approach to every project is Human Centered Design. In the research part of the project I like to observe and ask a lot of questions. First, I try to understand the business and it’s goals. I do this by asking a lot of questions about the product or project. Then, I like to understand the user. I do this by observing the user when possible or by asking a lot of questions. Lastly, I like to understand the the elements of the product I’m going to design for. In this case the Nest. I do this by reading and understanding their guidelines and API documentation.
RESEARCH
For this project I began by researching why Vivint Solar wanted to integrate Nest into the app and what they wanted to accomplish with it. I set up a meeting with the product manager, the dev manager, and the project manager to discuss what needed to be done for this project and what the goals were.
I found out that Vivint Solar wanted to integrate Nest into the app because it would add to the story of the energy that is being used in a customer’s home. For the MVP of this feature we decided that HEA was not going to be a replacement for the Nest app. The customer would not be able to change the temperature of their thermostat through our app. The app was simply going to display the status of the thermostat. This is where I found my first challenge. I needed to create a meaningful feature in the app that basically did nothing.
After I understood the needs of the business, I needed to understand the customers. I took three different approaches.
First, I created a survey and sent it out to a couple of people. I used the survey to understand what was important to the customer about the information Nest had to offer.
Second, I interviewed several people that had a Nest at home. During these interviews I was surprised by one thing that became the second challenge. I found out that there are several people have more than one thermostat in their home. Some have multiple houses with multiple nest in each home. I needed to display multiple thermostats and multiple location in a limited amount of space.
Third, I observed people using the Nest app. The first group of people I observed were people that were familiar with the app. I asked them to navigate through the app freely and do their regular routine when they use the app. I also asked them why they would look at certain sections of the app. This would help me understand what was important to the user. The second group of people I observed were people that had never used the app. I wanted to see their struggles and I also asked them what they found to be interesting or useful in the app.
Lastly, I needed to understand the product. I looked over the Nest design guidelines and API. I found that there were a lot of restriction for third party apps and that we were not allowed to store any historical data for more than 16 days. This was a challenge because HEA has a lot of historical data so the customer can see how their energy is being used. I decided that we were not going to add the historical data Nest would provide to HEA. We could get this information another way by using an energy consumption monitoring system. This is a feature Vivint Solar is looking to provide for their customers.
IDEATION & WIREFRAMES
At this point in the process I took everything I had learned from the research and used it to come up with ideas. I started by sketching out the site map and user flow of the feature. This allowed me to easily see every part of the feature that would need to be designed. This is when I like to show the site map and user flows to the developers to see if they have any other ideas or opinions.
Then, I start creating the wireframes. I typically create two types of wireframes. The initial set is a really quick and dirty, blocky set. Typically, I’m the only one that understands these wireframes. Once I’m satisfied with an idea and find the direction I want to go, I create a second set of wireframes that are well defined. I then like to bring the developers in once again but this time I set up a design review and we go over the wireframes. In this design review the developers can see all the options I have come up with so that they can provide feedback and share any ideas that they might have. I started doing this so the developers feel like they are involved early in the process and they feel like they have an opinion.
During wireframe creation I was able to address some of the challenges that had come up during the research.
I began by focusing on the first two challenges. I needed to make the Nest section meaningful and I needed it to display multiple thermostats and multiple locations. I created several wireframes. After discussing these with the developers and making several iteration I decided to create a swipeable carousels. This pagination made it possible for people to view all their thermostats and locations without much effort.
When I made this design decision, I received some pushback from the Product Manager(PdM). He is not a fan of the swipeable carousels and thinks it is a bad experience. He wanted to go with a design that made the user take more effort and had some discovery issues. I did some quick user testing with swipeable carousels to see how familiar users are with the interaction and the discoverability of it. I came to the conclusion that a lot of people are familiar with it and they don’t have a problem with it. After showing the PdM all my findings, I felt that we shouldn’t go off of his personal opinion and we needed to go with what tested best.
With the help of the developer, I was able to come up with the content for the widget. I also decided to put a tappable icon that would send the customer to the Nest app so that they could control their thermostat. We decided that a quick link would be helpful to the customer.
Accessibility
Vivint Solar’s biggest customer demographic are customers that are between 40-60 years old. We have realized that some of these users tend to use either the text size option or the accessibility option to make the text bigger on their device. Because of this, we have to account for how larger text will appear in the app.
For this I decided that the widget needed to take most of the screen width. If a customer has made their text bigger on their phone, the larger text will fit just fine. At the same time we will put a limit to the text size so that it doesn’t ruin the design of the widget.
UI Design
Once the wireframes are approved and the developers have given their opinions and feedback, it is really easy to get the high fidelity UI started. I create all the necessary screens from the site map and user flows.
Once all the screens are created, I create a flow document and set up a meeting with the PM and developers to do the initial set of reviews. At this point the amount of feedback is small because most of the bulk of feedback is done during the wireframing stage. I then make some quick changes to get the designs ready to prototype so that I can perform some product testing.
Testing
Currently, I do all my prototyping and product testing with InVision. I find InVision to be really simple and quick.
I expected this test to answer a couple of concerns. First, to make sure that the swipeable pagination was a good decision. Second, to make sure that the user flows I created were well designed.
Here are the questions and result from the test:
You noticed that Vivint Solar added a new feature that lets you integrate a Nest thermostat to the app. You don’t have a Nest so you are not interested in this new feature. What would you do?
Expected interaction: Tap the X > tap yes on the pop up.
1. Pass - initially would do nothing. She would just let it sit there. Had to persuade her to get rid of it.
2. Pass
3. Pass
4. Pass - Hesitated to tab on the X because he didn’t know what would happen. He was concerned that if he got rid of it, he wouldn’t know how to bring it back.
5. Pass
6. Pass
7. Pass
You just got rid of the widget but now it’s a month later and you decided to get several Nest Thermostats. Three for your house and two for your malibu beach house. They have all been set up in your houses and are ready to go. Now, how would you get the widget back?
Expected interaction: Tap on settings > tap on integrations > Tap on nest > Switch display widget on.
1. Pass - struggled a little.
2. Pass
3. Pass
4. Pass - barely!
5. Pass
6. Pass
7. Pass
Now that you have the widget back, can you connect to Nest?
Expected interaction: Go back to the Nest widget > Tap works with nest button > Reads modal > Connects to nest
1. Pass
2. Pass
3. Pass
4. Pass but was slot to tap on the nest button
5. Pass
6. Pass
7. Pass
You just integrated with Nest. Can you show me what the ambient temperature is set to at your Malibu beach house?
Expected interaction: Go to the nest widget > swipe right
1. Pass
2. Pass
3. Pass
4. Pass - struggled
5. Pass
6. Pass
7. Pass
Last task. How would you change the temperature of your Malibu beach home?
Expected interaction: Tap on the Nest icon > Tap yes on modal
1. Fail - lame!
2. Fail - wtf!
3. Fail - Changed the icon
4. Pass - Nice!
5. Pass
6. Pass
7. Pass
Note: After the first three fails I realized that the testers did not understand the icon I initially used for this interaction. After some thought I decided to switch it to an icon that looked more like a thermostat. After the icon changed the rest of the users passed really easily.
They were all really surprised that it would take them out of the app and send to the Nest app.
Tester 5 asked if the modal would show up every time they wanted to go to the Nest app.
Observations of the test: If the user dismisses the widget and later gets a Nest, they might forget that there is an integration.
They all found the widget useful.
Some of the testers thought that they should be able to change the temperature in the app but that the icon that sent them to the Nest app made it simple.
The pop up should only appear the first time after tapping the Nest icon. After the user discovers it’s function, there is no reason to show it again.
Lessons Learned
This was a fun project and it was the cornerstone to future features. I learned that there can be many surprises when creating a project for the first time. I also learned that as the expert, I need to trust in what I know. I know that the user is always right. I have to trust in the test I create and in the result of my research. I also learned to a an open mind and to try a lot of different approaches.
Other Projects
