Mapsense hadn't quite thought about their onboarding process prior to this project. I got to really think through how to understand the customer base thought. Though a login and sign up flow is simple, this was one of the first elements implemented with the brand personality. 

Getting sketchy

Flows and sketches took over my desk. I had to understand what exactly I was designing, so I started the process with some flows. Login and onboarding are pretty simple, so it wasn't too complicated, but it did help to clearly understand what I should be designing.

I began sketching out some visual elements, layouts, and new ways to create a "login" button. I wanted to incorporate the feeling of a "vault" into it because that was one of the words the CEO of Mapsense highlighted in the brand. 

wire those frames

I took some time to create wireframes for the login page. Since I wanted to play with an unconventional way to show a login button, I found that creating high-fidelity sketches were really helpful. I could understand where the button could exist without going unnoticed.

I also got to think through animation and interaction elements of the login screen. Since Mapsense's product is highly intelligent, I wanted to make the onboarding experience the same way. The idea was that when the user enter's a username and at least 4 character for the password, the button would rotate and turn a different color or signify that they were opening a "vault of information" (sound familiar?). 

I also wanted to give the option of using a more traditional button for this early round - so that in the event that users were not understanding the "play" type of login button we would have a quick and easy fallback to revert to.  I felt that giving our CEO an option of a non-traditional and traditional login screen allowed me to talk through the strengths and weaknesses of both. It was a great collaboration project.