I encountered a few issues when trying to prototype the extending nav bar.
Firstly, when I tried to make one prototyped nav bar and copy and paste it into place on each page, I couldn’t alter the icon’s colour to a different colour signifying that the user is on that page currently, without other random icons turning that colour as well.
Home default nav bar
Home extended nav bar
Planner default nav bar
Planner extended nav bar
Calendar default nav bar
Calendar extended nav bar
I solved this by creating multiple versions of the nav bar, and changing the icon to a different colour as the default state, for the page that we are currently on.
I prototyped the nav bar first, before anything else as I had to insert each nav bar inside its corresponding page.
After placing the nav bars correctly, I moved on to protyping the icons. The way I did this was creating a component of each of the icons that could be pressed, and added a variation for the hover state. I made the hover state green, as this will stand out well from the background and indicate to users that the icon can be pressed, and will carry out an action upon pressing.
This part took the most time during prototyping, as I had to do this to each individual icon and then place the new componenet back to where the icon was originally. Next time I would prototype icons first before placing them within pages, to avoid this and save some time.
For the rest of the prototyping, it went smoothly, I simply connected all of the pages together, the nav bar was already prototyped before I placed it in each page, so I only had to prototype the secondary nav bar and each button that takes the user to a different page. I used pretty standard prototype settings, without utilising smart animate as I felt if I overused it, it would take away from the design of the wireframes and waste time from the user’s day, as well as distract them possibly, from the task they were trying to carry out.
The only time I utilised the smart animate feature was for the onboarding, as I felt like I could allow that transition to be more fun and take slightly longer, as it happens only once when the user launches the app for the first time that day. The settinga for the onboarding were smart animate from each screen to the next, as a consistent flow, and slow 600ms. I found this to be the smoothest transition, while not being too slow and frustrating for the user to have to watch every launch.
For the future I would want to learn how to prototype more of the popups, for example I created the “someone is calling” popup, however, I didn’t have time ti figure out how to make that popup randomly when going through the prototype, without having to link it to a button and ruin the purpose of the randomness of someone calling.
