I learned how to do this by learning from a YouTube video and also with the help of AI to give me directions on how to successfully achieve this.
Mastering Conditional Prototyping: A Step-by-Step Tutorial
I used variables and conditional interactions in my prototype to make the onboarding flow feel more realistic.
I used variables like emailFilled and passwordFilled to track when the user had entered their details. Once these were set to true, the button state could change and allow the user to continue. I also added a condition so that the sign-in button only navigates to the Verify Email screen once the required information has been filled in.
had never done this before, so it was completely out of my comfort zone. However, I am really happy with the outcome and proud of what I was able to achieve.
I added an interaction to the component so that when you press and hold it, the design changes to a second variant. The transition uses a quick dissolve animation with an ease-in effect and a 100ms duration.
For this part I added an on tap trigger so when the user taps the selected button or area, it navigates them to the Home screen.
I used a dissolve animation with a linear easing and a short 200ms duration, so the transition feels quick and smooth without being too distracting. This helped me make the prototype feel more realistic and allowed me to test how users would move through the Memori app.
