Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, don't have a sliding transition, or anything like that. Just have it display one, then have a single button that you click to have it immediately display the other. Then when you click the button again, it goes back to displaying the first one again. Click, click, click - and your eyes do all the work for you.
(Not unrelated: answer from Andrei Herasimchuk at https://www.quora.com/Why-does-Adobe-Photoshop-differentiate...)
Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left?
(This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)
I turned this into a game. Which image do I think looks better? Now I try to figure out which image is supposedly supposed to look better.
For example the washing machine. You dont need real time information because you know how long it takes since you've done it 1000s of times and it beeps. All these things are just managed in our heads subconsciously.
Actually, this is one example of home automation that works very well. My washer will remind me that wash is ready to move to the dryer, and stops reminding me once the washer door opens.
It means that a) I don't have to put it on my mental reminders, b) it works very well with anybody else in the family that does a wash and _they_ forget to move it to the dryer.