Microinteractions

Despite this week’s assignment telling us to continue working on what we build in the previous week, I figured I really don’t like how my design turned out, so I decided the only thing I will keep is the base idea for the app: FitnessApp. Everything else will be completely different.

I will explain each screen and its microinteractions according to the desired user flow.

https://cloud.protopie.io/p/792d66fb1c

The Welcome Screen.

It consists of an image of two people running, accompanied by a welcome message. This screen is designed to go away after 2 seconds to show the home page.

The Homepage

After reading numerous articles on sign-up forms and onboarding I discovered that there is a new trend going on. A single field for both logging in and signing up. Using ProtoPie’s variables and conditions I created a homepage that would allow users to input their email address, and from there on two things could happen. If the email address was already in the system, they were taken to the log in page. If not, they were presented with a sign-up form. I also included a paging container showing different functionalities of the “app”.

Now, I would like to first approach the log-in process. To do this, in the email field input johndoe@mail.com.

The Log In Form

In this form the only necessary information needed is the password, which in this case is wordpass. But first, try introducing any other password but that. To notify the user that the password is wrong, the field itself bounces left and right a few times, while also turning red-ish. Once the correct password is put in, will follow a loading screen, at the end of which the user is welcomed back, at their first name is displayed.

Now let’s look at the alternative, the Sign-Up form.

If on the homepage you input any email other than johndoe@mail.com, you will be redirected to the sign-up screen. On this page, again using variables and conditions I have displayed the email address used to sign-up at the top of the screen so the user can have an extra look at it and make sure it is the correct one.

Below that we can find the name fields and when we get to the last one, the password, there are two conditions that need to be met before the account can be “created”. Once a condition is met it will turn green and only after both become green, the user can proceed. We are again, redirected to a loading screen.

The Loading Screen

Thinking about the ways I could create a waiting time of 10 seconds or more that would be engaging, I wanted to find animations that would amuse people, so I chose a running hamster that fits the scope of the app, and a success animation. After sizing and timing them to make the transition as smooth as possible, I realized that the waiting time is still long and that might not be enough to keep users engaged for the whole period, so I decided to add some facts that could keep the users busy while the app loads. After about 12 seconds the app displays a Success message on top, and a Hello message on the bottom, followed by the user’s first name. There is also a success sound added for extra fulfilment effect, and on ProtoPie player for iOS, it will also vibrate.

Something else that is present on all fields is that when they are focused-in, the placeholder text moves up to become a label, so the user doesn’t forget what field he is typing in, and a red bar expands from the middle sideways on the bottom of the field, to highlight it.

Testing and reflection

While testing it, most of the feedback received from the peers was that the app felt smooth, the animations were complementing the forms quite nicely and it felt quite final for what it was – a prototype. Unfortunately, I got no suggestions of what I could improve from the 5 people it was tested with.

This week’s assignment probably took me longer than it should’ve, but that was only because I was immersed by ProtoPie and what I could achieve with it. Giving the fact that this was my first encounter with it I am really satisfied by what I’ve learned and also how my project turned out in the end.