Setting up the pHin device is a comparably long process and it might take up to 20 screens. So I decided to start it with a fun and playful welcome screen. These are several illustrations I created. The plan was to add a simple animation and make it more lively.
The following illustration is what the team chose. Animation requirement was to make sure the bottom of the device is not revealed, so it can represent both pHin device types; inline and floating pHin. 
There are 2 types of pHin,
- Floating pHin that floats directly in a pool or hot tub
- Inline pHin that gets installed into the water pipe
This is the implementation. The layout slightly differs on different screen sizes, because the front layer (device jumping in) is pinned to the bottom of the screen.

You may also like

Back to Top