During this sprint I implemented the design made by Lara Defayes, the media and interaction designer of the team. As you can see the UI design has rather well evolved.
I added some animations to render the interface more friendly and fun at the image of Aimo. The buttons and some informations of the main menu appear in an animated way once the view is loaded.
When the app is waiting for the user to do an action related to Aimo device, the text giving the instructions is pulsing until the action is performed.
Filling a form is often a painful task in the experience of the user. In order to attenuate this step we postponed it as much as we can in the flow of the app. Once the user fills his information, the form won’t appear again. Some animation were also added when the fields are displayed in order to surprise and encourage the user to fill it.
A large piece of the implementation of the UI was devoted to the making of a range slider. A range slider is a slider with two markers in order to set an interval between two values. This UI component is not part of the items offered by Apple with the development tools. Some external libraries exist but their solutions aren’t enough flexible in term of visual customisation. This is the reason why I chose to create one from scratch to better match to our visual identity.
A special care has been taken in order to keep visible the value of the marker even when the user’s finger is on it. To avoid the finger obstruction the marker is automatically shifted up in order to avoid being hidden. Because of the finger obstruction some user tends to move their finger down after having tapped an item to better see and control what is happening. If that happen, the marker drops down to its initial position on the bar.