Switch Off — Improving the experience of a green startup landing page.

switchoff-image-hero
Type of project: UX / UI
Focus: Landing page re-design

Switch Off is a green startup based in Mexico City that created a smart device that disconnects automatically electronic devices when they're not in use, making people save up to 15% on their electric bill.

The challenge.

The company landing page wasn't performing well. The initial hypothesis was that users were having some difficulty understanding the value proposition of their product through the website affecting online sales.

Old website.
switchoff-old-website

UX Research.

I carried out a qualitative research and usability testing with users that were interested in the product but have not taken a purchase decision to understand what things were holding them back to make improvements in the digital experience.

switchoff-research-photo

Hero section.

On the hero section users were expecting to see immediately the product with a clear and quick description of it. On the old website they were just describing the promise of the product without showing how it looks.

"I get what the product is about, but an image is worth a thousand words, the image they use is not very engaging or relevant to me, I'd like to see how the product looks like".
switchoff-hero-section

Product description.

Users needed a quick understanding of the value proposition of the product, showing the most important functional benefit they would get of it (saving money). On the old website there was too much text explaining what are electricity leaks with a video that didn't really added much value as it was just a loop animation.

"There's too much information in this section, I just scroll through pages and if I see a bunch of text I don't read it. The explanation about the phantom energy is ok but I just want to see what the product is about and if it will be useful for me".
switchoff-product-description

How it works?

On the old website there was a mix between how the product works and some of its features making it a bit confusing to understand. That's why it needed to be divided into two sections: the "How it works" section and then show and explain the most relevant features of the product and how they work.

"The steps of how it works can be confusing at first, the information is understandable but I don't know if the illustration with the text is clear, maybe that's why at the beginning it was a little confusing".
switchoff-how-it-works

Product features.

The product features were explained within the "How it works" section, they needed their own section as they really add value to the value proposition of the product.

"I didn't realize some of the features that the product has, which are relevant for me but those feature descriptions get lost in the how it works section, that information is mixed".
switchoff-product-features

Product benefits.

On the old website it was not clear which were the benefits for the users as there was a mix between functionalities of the product with functional benefits for the people.

"This are just specs of the product, the benefits for me as a customer aren't clear, It's important to take care of the world but honestly I'd just focus on how easy it is to use and how much electricity is going to save without breaking down my devices".
switchoff-product-benefits

Product design.

Users were not convinced about the aesthetic design of the product, the black color was not matching the philosophy of the company, as well as it was a product that the users would be hiding instead of leaving it in sight of others. I conducted an A/B testing to see the reaction of the users as the aesthetic design of the product was influencing their purchase decision.

"The product is not very attractive, is something that I would use but maybe hide it. I like to leave in sight this kind of tech products such as my Google Home mini, it must be functional and beautiful".
switchoff-product-benefits

UI design.

Landing page new design.
1-ui-switchoff1-ui-switchoff1-ui-switchoff1-ui-switchoff1-ui-switchoff1-ui-switchoff1-ui-switchoff
Let's talk
Or save my email for the future.

🙃
Oops! It's better if you see this website in a vertical position. Sorry for the inconvenience.